html鼠標通過圖片放大

時間 2019-11-22
標籤 html 鼠標通過圖片放大欄目 HTML 简体版
原文原文鏈接
源碼：http://www.codesocang.com/texiao/pic/7211.html#javascript
源碼以下：css
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>jQuery心型圖片牆鼠標懸浮變大</title>
  6 <style type="text/css">
  7 *{padding:0; margin:0;}
  8 ul,li{list-style:none;}
  9 body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}
 10 .heartPic{width:749px;height:630px;margin:60px auto 0 auto;}
 11 .heartPic ul{float:left;width:749px;}
 12 .heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
 13 .heartPic ul li.on{z-index:99;}
 14 .heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}
 15 .heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
 16 .heartPic .showDiv{display:block;}
 17 </style>
 18 </head>
 19 <body>
 20 <div class="heartPic">
 21     <ul>
 22         <li></li>
 23         <li>
 24             <div class="in">
 25                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_01.jpg" />
 26                 <p class="pTxt">可愛的女娃娃</p>
 27             </div>
 28         </li>
 29     <li>
 30             <div class="in">
 31                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_02.jpg" />
 32                 <p class="pTxt">呆萌的小熊</p>
 33             </div>
 34         </li>
 35     <li></li>
 36     <li>
 37             <div class="in">
 38                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_03.jpg" />
 39                 <p class="pTxt">卡哇伊的小熊</p>
 40             </div>
 41         </li>
 42     <li>
 43             <div class="in">
 44                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_04.jpg" />
 45                 <p class="pTxt">女巫騎着掃帚</p>
 46             </div>
 47         </li>
 48     <li></li>
 49     </ul>
 50     <ul>
 51     <li>
 52             <div class="in">
 53                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_05.jpg" />
 54                 <p class="pTxt">女娃娃</p>
 55             </div>
 56         </li>
 57     <li>
 58             <div class="in">
 59                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_06.jpg" />
 60                 <p class="pTxt">星星可愛</p>
 61             </div>
 62         </li>
 63     <li>
 64             <div class="in">
 65                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_07.jpg" />
 66                 <p class="pTxt">呆萌女</p>
 67             </div>
 68         </li>
 69     <li>
 70             <div class="in">
 71                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_08.jpg" />
 72                 <p class="pTxt">狗狗</p>
 73             </div>
 74         </li>
 75     <li>
 76             <div class="in">
 77                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_09.jpg" />
 78                 <p class="pTxt">綠樹</p>
 79             </div>
 80         </li>
 81     <li>
 82             <div class="in">
 83                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_10.jpg" />
 84                 <p class="pTxt">粉愛粉愛的</p>
 85             </div>
 86         </li>
 87     <li>
 88             <div class="in">
 89                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_11.jpg" />
 90                 <p class="pTxt">蠟筆小新</p>
 91             </div>
 92         </li>
 93     </ul>
 94     <ul>
 95     <li>
 96             <div class="in">
 97                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_12.jpg" />
 98                 <p class="pTxt">震不碎的心</p>
 99             </div>
100         </li>
101     <li>
102             <div class="in">
103                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_13.jpg" />
104                 <p class="pTxt">頗有意境</p>
105             </div>
106         </li>
107     <li>
108             <div class="in">
109                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_14.jpg" />
110                 <p class="pTxt">櫻木花道最愛啊</p>
111             </div>
112         </li>
113     <li>
114             <div class="in">
115                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_15.jpg" />
116                 <p class="pTxt">倆骷髏</p>
117             </div>
118         </li>
119     <li>
120             <div class="in">
121                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_16.jpg" />
122                 <p class="pTxt">萌妹子</p>
123             </div>
124         </li>
125     <li>
126             <div class="in">
127                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_17.jpg" />
128                 <p class="pTxt">可愛的小狗</p>
129             </div>
130         </li>
131     <li>
132             <div class="in">
133                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_18.jpg" />
134                 <p class="pTxt">夫婦倆白頭偕老</p>
135             </div>
136         </li>
137     </ul>
138     <ul>
139     <li></li>
140     <li>
141             <div class="in">
142                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_19.jpg" />
143                 <p class="pTxt">刷子</p>
144             </div>
145         </li>
146     <li>
147             <div class="in">
148                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_20.jpg" />
149                 <p class="pTxt">偶的頭像</p>
150             </div>
151         </li>
152     <li>
153             <div class="in">
154                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_21.jpg" />
155                 <p class="pTxt">樹葉子</p>
156             </div>
157         </li>
158     <li>
159             <div class="in">
160                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_22.jpg" />
161                 <p class="pTxt">星星</p>
162             </div>
163         </li>
164     <li>
165             <div class="in">
166                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_23.jpg" />
167                 <p class="pTxt">淺色哦</p>
168             </div>
169         </li>
170     <li></li>
171     </ul>
172     <ul>
173     <li></li>
174     <li></li>
175     <li>
176             <div class="in">
177                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_24.jpg" />
178                 <p class="pTxt">太陽帥哥</p>
179             </div>
180         </li>
181     <li>
182             <div class="in">
183                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_25.jpg" />
184                 <p class="pTxt">大笑臉</p>
185             </div>
186         </li>
187     <li>
188             <div class="in">
189                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_26.jpg" />
190                 <p class="pTxt">企鵝</p>
191             </div>
192         </li>
193     <li></li>
194     <li></li>
195     </ul>
196     <ul>
197     <li></li>
198     <li></li>
199     <li></li>
200     <li>
201             <div class="in">
202                 <img width="100" height="100" src="http://www.codefans.net/jscss/demoimg/201404/index_27.jpg" />
203                 <p class="pTxt">小兔子</p>
204             </div>
205         </li>
206     <li></li>
207     <li></li>
208     <li></li>
209     </ul>
210 </div>
211 <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
212 <script type="text/javascript">
213 $(function(){
214     $(".heartPic li").hover(function(){
215         $(this).addClass("on");
216         $(this).find("img").animate({"width":"200px","height":"200px"});
217         $(this).find("div").animate({"width":"200px","height":"200px"});
218         $(this).find(".pTxt").animate({"width":"200px","height":"20px"});
219         $(this).find("p").addClass("showDiv");
220     },function(){
221         $(this).animate({height:"100px"},100).removeClass("on");
222         $(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
223         $(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
224         $(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
225     });
226 })
227 </script>
228 <div style="text-align:center;clear:both">
229 </div>
230 </body>
231 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。