- css3放大镜效果,没有用到js,只是应用了现代的css3技术来完成。移上左边的图片,右边出现左边放大后的图片。效果简单真实。支持浏览器:IE9+, Firefox, Safari, Chrome and Opera.
<!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>css3放大镜</title> <style> *{margin:0px;padding:0px;} body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;} .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;} .bredcolor{color:#fff;} .small {width:200px; height:450px; background:url("/jscss/demoimg/201210/small.jpg") no-repeat; position:relative; margin:20px 0 20px 10px;} .large {width:500px; height:420px; overflow:hidden; position:absolute; left:-9999px; top:0;} .large img {position:absolute; left:0; top:-1px; opacity:0; -moz-transition: top 0s 3600s; } .pointer {display:block; width:200px; height:168px; background:#fff; opacity:0; filter: alpha(opacity=0); position:absolute; left:0; top:-1px; z-index:10; -moz-transition: top 0s 3600s; } .small b {display:block; width:200px; height:10px;position:relative; z-index:20; cursor:crosshair;} .small b:nth-of-type(1) {display:block; width:200px; height:85px;} .small b:nth-of-type(27) {display:block; width:200px; height:85px;} .small b:hover ~ .pointer {opacity:0.2; -webkit-transition:0.25s; -moz-transition:0.25s; -ms-transition:0.25s; -o-transition:0.25s; transition:0.25s; } .small b:hover ~ .large {left:225px;} .small b:hover ~ .large img {opacity:1; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; transition:0.5s; } .small b:nth-of-type(1):hover ~ .pointer {top:0px;} .small b:nth-of-type(2):hover ~ .pointer {top:10px;} .small b:nth-of-type(3):hover ~ .pointer {top:20px;} .small b:nth-of-type(4):hover ~ .pointer {top:30px;} .small b:nth-of-type(5):hover ~ .pointer {top:40px;} .small b:nth-of-type(6):hover ~ .pointer {top:50px;} .small b:nth-of-type(7):hover ~ .pointer {top:60px;} .small b:nth-of-type(8):hover ~ .pointer {top:70px;} .small b:nth-of-type(9):hover ~ .pointer {top:80px;} .small b:nth-of-type(10):hover ~ .pointer {top:90px;} .small b:nth-of-type(11):hover ~ .pointer {top:100px;} .small b:nth-of-type(12):hover ~ .pointer {top:110px;} .small b:nth-of-type(13):hover ~ .pointer {top:120px;} .small b:nth-of-type(14):hover ~ .pointer {top:130px;} .small b:nth-of-type(15):hover ~ .pointer {top:140px;} .small b:nth-of-type(16):hover ~ .pointer {top:150px;} .small b:nth-of-type(17):hover ~ .pointer {top:160px;} .small b:nth-of-type(18):hover ~ .pointer {top:170px;} .small b:nth-of-type(19):hover ~ .pointer {top:180px;} .small b:nth-of-type(20):hover ~ .pointer {top:190px;} .small b:nth-of-type(21):hover ~ .pointer {top:200px;} .small b:nth-of-type(22):hover ~ .pointer {top:210px;} .small b:nth-of-type(23):hover ~ .pointer {top:220px;} .small b:nth-of-type(24):hover ~ .pointer {top:230px;} .small b:nth-of-type(25):hover ~ .pointer {top:240px;} .small b:nth-of-type(26):hover ~ .pointer {top:250px;} .small b:nth-of-type(27):hover ~ .pointer {top:252px;} .small b:nth-of-type(1):hover ~ .large img {top:0;} .small b:nth-of-type(2):hover ~ .large img {top:-25px;} .small b:nth-of-type(3):hover ~ .large img {top:-50px;} .small b:nth-of-type(4):hover ~ .large img {top:-75px;} .small b:nth-of-type(5):hover ~ .large img {top:-100px;} .small b:nth-of-type(6):hover ~ .large img {top:-125px;} .small b:nth-of-type(7):hover ~ .large img {top:-150px;} .small b:nth-of-type(8):hover ~ .large img {top:-175px;} .small b:nth-of-type(9):hover ~ .large img {top:-200px;} .small b:nth-of-type(10):hover ~ .large img {top:-225px;} .small b:nth-of-type(11):hover ~ .large img {top:-250px;} .small b:nth-of-type(12):hover ~ .large img {top:-275px;} .small b:nth-of-type(13):hover ~ .large img {top:-300px;} .small b:nth-of-type(14):hover ~ .large img {top:-325px;} .small b:nth-of-type(15):hover ~ .large img {top:-350px;} .small b:nth-of-type(16):hover ~ .large img {top:-375px;} .small b:nth-of-type(17):hover ~ .large img {top:-400px;} .small b:nth-of-type(18):hover ~ .large img {top:-425px;} .small b:nth-of-type(19):hover ~ .large img {top:-450px;} .small b:nth-of-type(20):hover ~ .large img {top:-475px;} .small b:nth-of-type(21):hover ~ .large img {top:-500px;} .small b:nth-of-type(22):hover ~ .large img {top:-525px;} .small b:nth-of-type(23):hover ~ .large img {top:-550px;} .small b:nth-of-type(24):hover ~ .large img {top:-575px;} .small b:nth-of-type(25):hover ~ .large img {top:-600px;} .small b:nth-of-type(26):hover ~ .large img {top:-625px;} .small b:nth-of-type(27):hover ~ .large img {top:-630px;} </style> </head> <body> <div class="small"> <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b> <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b> <b></b><b></b><b></b><b></b><b></b><b></b><b></b> <span class="pointer"></span> <div class="large"> <img src="/jscss/demoimg/201210/large.jpg" alt=""> </div> </div> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F7b1b0a3f92f550c351b60c95bab723a4' type='text/javascript'%3E%3C/script%3E")); </script> </body> </html>
相关推荐
插件描述:通过css3样式实现放大镜的效果. 参考示例:http://www.jq22.com/jquery-info4105
很好设置的一个js放大镜 很实用 直接放到项目里 改变一下图片路径就可以用
而不是像其他的普通的放大镜效果那样另外在旁边开辟一个新的位置 适合特殊需要的同学使用 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (注意保持图片...
css3伪放大镜(图片放大动画)效果
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
js+css实现淘宝放大镜效果,fdj.js是javascrip脚本,fdj.css是css代码
jQuery CSS3图片放大镜插件是一款jQuery基于css3属性制作鼠标悬停图片放大镜预览查看效果代码。
HTML+css+JavaScript实现放大镜效果
CSS 放大镜 无兼容性问题
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...css3放大镜动画效果纯CSS3制作飞舞的火箭动画多个CSS3实现的动画效果不错的星级评分效果纯HTML5 CSS3实现一棵自己跳舞的树纯CSS3模拟...
css3编写的5点式放大镜,是一个特效,需要的可以下载下来看看
CSS3 SVG放大镜查看动画特效,可以用于各类商城的商品查看。
之前我们分享过几款非常不错的jQuery/CSS3放大镜动画,比如这款jQuery球状放大镜特效插件和HTML5点阵列局部放大镜动画特效都非常不错。这次我们要分享的也是一款炫酷的jQuery可拖拽放大镜动画,拖拽放大镜在页面上...
CSS3 SVG放大镜查看图片代码是一款采用网格布局,鼠标悬停图片svg剪切路径动画特效,具体效果看演示感受一下。
适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果,可以熟练掌握鼠标经过和鼠标移动事件
CSS3 SVG放大镜查看动画特效.zip
纯css编写的文字放大特效,当鼠标划过文字时文字放大,如果浏览器提示要加载ActiveX控件,则加载
今天要给大家分享的的一款用纯css3实现的图片放大镜特效。页面打开五个小图显示于页面。当鼠标经过图片时,当前图片以灰色背景图的形式展示。效果非常不错。 源码下载 实现的代码: html代码: 复制代码代码如下...
通过css替换鼠标形状,变成放大镜和缩小镜,适合图片操作的时候使用。