鼠标滑过图片出现大图片提示层效果js代码 发布者: bicman 2017年05月21日 围观次 点赞:1 复制下面的内容新建一个HTML文件保存后运行就可以看到效果! <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.bnxb.com/uploads/allimg/c091113/125P9441PW0-13335.jpg" _fcksavedurl="http://www.bnxb.com/uploads/allimg/c091113/125P9441PW0-13335.jpg"> </div> <div id="enlarge_images"></div> <!--{cke_protected}%3Cscript%3E%0Avar%20demo%20%3D%20document.getElementById(%22demo%22)%3B%0Avar%20gg%20%3D%20demo.getElementsByTagName(%22img%22)%3B%0Avar%20ei%20%3D%20document.getElementById(%22enlarge_images%22)%3B%0Afor(i%3D0%3B%20i%3Cgg.length%3B%20i%2B%2B)%7B%0A%20var%20ts%20%3D%20gg%5Bi%5D%3B%0A%20ts.onmousemove%20%3D%20function(event)%7B%0A%20%20event%20%3D%20event%20%7C%7C%20window.event%3B%0A%20%20ei.style.display%20%3D%20%22block%22%3B%0A%20%20ei.innerHTML%20%3D%20'%3Cimg%20src%3D%22'%20%2B%20this.src%20%2B%20'%22%20%2F%3E'%3B%0A%20%20ei.style.top%20%20%3D%20document.body.scrollTop%20%2B%20event.clientY%20%2B%2010%20%2B%20%22px%22%3B%0A%20%20ei.style.left%20%3D%20document.body.scrollLeft%20%2B%20event.clientX%20%2B%2010%20%2B%20%22px%22%3B%0A%20%7D%0A%20ts.onmouseout%20%3D%20function()%7B%0A%20%20ei.innerHTML%20%3D%20%22%22%3B%0A%20%20ei.style.display%20%3D%20%22none%22%3B%0A%20%7D%0A%20ts.onclick%20%3D%20function()%7B%0A%20%20window.open(%20this.src%20)%3B%0A%20%7D%0A%7D%0A%3C%2Fscript%3E--> 提示:您可以先修改部分代码再运行 顶(1) 踩(0) JS 【搜索相关内容】[打印] [关闭] 上一篇:漂亮的滑动图片效果Javascript+CSS 下一篇:用JS实现的网页关键字高亮显示的方法 您可能还会对下面的文章感兴趣: 相关文章 1 jquery选项卡点选切换图片 点选按钮切换不同图片来回切换 2 随机弹窗代码,随机弹某个页面,随机弹 随机不弹 JS代码 3 QQ网页在线客服实现方法 QQ客户端手机网页点击唤醒聊天 QQ在线客服代码 4 JS随机加载代码 JS随机加载广告实现轮播效果 5 简单JS代码实现打开页面自动打开支付宝客户端领取红包 苹果 安卓 微信 QQ 浏览 6 JS给网站添加自动复制支付宝红包口令代码 让访客自动复制支付宝红包口令 最新评论