html鼠标经过图片放大
2024-06-04 18:23:46
源码：http://www.codesocang.com/texiao/pic/7211.html#
源码如下：
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>转载于:https://www.cnblogs.com/chen8881-bg/p/5751793.html
html鼠标经过图片放大相关推荐
- layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
- CSS仿艺龙首页鼠标移入图片放大
CSS仿艺龙首页鼠标移入图片放大,效果似乎没有js好...... <!DOCTYPE html> <html lang="en"> <head> ...
- html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟 鼠标悬浮 图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果 代码结构 1. 引入CSS 2. HTML代码 va ...
- 【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果 前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
- 鼠标悬浮图片放大特效
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- [CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果 一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover; object-fit 属性 objec ...
- body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 鼠标经过——图片放大效果
鼠标经过,盒子里的图片放大,但不超出盒子的范围 <!DOCTYPE html> <html lang="en"><head><meta c ...
- CSS鼠标悬浮图片放大效果
当鼠标移入图片时,图片变大.父容器宽高不变. 效果: 鼠标移入前: 鼠标移入后: 代码:
- html中实现鼠标悬停放大,如何实现鼠标悬停图片放大的效果。
在网页上我们经常看到鼠标悬停在一个图片上,这张图片会慢慢的放大,感觉是像放大镜放大的效果,当鼠标移开的时候,图片有恢复原来的样子,今天就实现这种效果. 实现原理以思路: 1,首先这是一张图片在悬停时放 ...
最新文章
- Android String.xml 批量翻译工具 | Android string.xml 各国语言转换
- Eclipse调试Java的10个技巧【转】
- neo4j删除所有节点
- 活动 | 玩转“视”界杯 —— 2018 上半年广告数据分析及短视频分享
- 基本算法个人PHP 实现（四）
- numpy基础(part12)--快速傅里叶变换模块
- 在word文档的后面开始页码编
- 如何使用Pinterest新推出的功能Rich Pin
- Hadoop MapReduce执行过程(一)
- 【LeetCode】剑指 Offer 39. 数组中出现次数超过一半的数字
- mysql练习题练习
- perform update operations on columns of type JSONB
- QQ浏览器下拉词推广是什么？
- go - reflect
- r语言 怎么把字调大_R语言中的字体调整
- 泰坦尼克号数据集处理
- php中COM函数的使用
- PHP长字符串表示方法
- 用vba复制模板，并根据指定的列形成多个sheet重命名
- 程序员成长之旅——同步IO和异步IO（五种IO模型）