首页
矢量素材
PNG图标
JS代码
网页小图标
网页素材
设计欣赏
广告达人
有趣新鲜
技术文档
懒人博客
懒人论坛
当前位置:
首页
>
JS代码
>
JS特效代码
>
图片特效
> 第1页
鼠标滑过图片出现大图片提示层效果js代码
VIEW:893
来源:懒人图库
2009-06-04
<style> #demo{overflow:hidden;width:120px;text-align:center;padding:10px;} #demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4} #enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4} </style> <div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px"> <img src="http://www.lanrentuku.com/images/uppic/200801101244190.jpg"> </div> <div id="enlarge_images"></div> <script> var demo = document.getElementById("demo"); var gg = demo.getElementsByTagName("img"); var ei = document.getElementById("enlarge_images"); for(i=0; i<gg.length; i++){ var ts = gg[i]; ts.onmousemove = function(event){ event = event || window.event; ei.style.display = "block"; ei.innerHTML = '<img src="' + this.src + '" />'; ei.style.top = document.body.scrollTop + event.clientY + 10 + "px"; ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; } ts.onmouseout = function(){ ei.innerHTML = ""; ei.style.display = "none"; } ts.onclick = function(){ window.open( this.src ); } } </script> 转载请注明出处:<a href="http://www.lanrentuku.com/">懒人图库 </a>
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。
鼠标滑过图片出现大图片提示层效果的js代码
↑上一篇:
虚线表格
↓下一篇:
默认图片是灰色鼠标放上去变彩色css效果代码
图片不存在的时候,显示一个默认图片
CSS图片边框效
用相对定位和负向移动完成图片象框阴影
随机图片效果
图片边框变换CSS Hover状态效果一例
CSS强制图片自适应大小
鼠标移过图片变清晰效果
掉链图片的替代图片方法
JS图片模糊变化切换效果
广告代码
共
338
个JS广告代码
››全部
焦 点 图(156)
全屏广告(11)
对联广告(6)
在线客服(5)
相册代码(39)
菜单导航(32)
TAB标签(13)
悬浮漂浮(3)
视频播放(4)
图片特效(23)
翻牌书角(7)
其他代码(39)
特效代码
共
273
个JS特效代码
››全部
导航菜单(55)
表单按钮(43)
文字特效(11)
表格图层(35)
图片特效(15)
时间日期(21)
滚动代码(11)
窗口特效(8)
颜色背景(2)
网站常用(42)
CSS样式(13)
其他特效(17)
最近浏览过的特效代码
更多››
关于我们
-
版权声明
-
广告服务
-
懒人西西
-
RSS订阅
-
工作机会
-
网站地图
-
友情链接
-
联系我们
-
在线留言
Copyright © 2006-2009
lanrentuku.com
All Rights Reserved.
-
京ICP备08001501号