jq放大镜
来源:互联网 发布:西安软件新城软件公寓 编辑:程序博客网 时间:2024/05/21 13:30
JQ放大镜
*{
padding: 0;
margin: 0;
}
.outer{
width: 200px;
margin: 80px auto;
position: relative;
}
.big{
width: 180px;
height: 180px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255,255,255,0.8),0 0 7px 7px rgba(0,0,0,0.3),inset 0 0 40px 2px rgba(0,0,0,0.3);
background: url(iphone.jpg) no-repeat;
display: none;
}
.small{
display: block;
}
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script><script type="text/javascript"> $(function(){ // 定义实际图片的大小 var imgWidth = 0; var imgHeight = 0; $(".small").load(function(){ // 创建图片对象 var imgObj = new Image(); imgObj.src = $(this).attr("src"); imgWidth =imgObj.width; imgHeight = imgObj.height; $(".outer").mousemove(function(e){ var outerOffset = $(this).offset(); var mx = e.clientX - outerOffset.left; var my = e.clientY - outerOffset.top; // 放大镜的显示与隐藏 if(mx > 0 && mx < $(this).width() && my > 0 && my < $(this).height()){ $(".big").fadeIn(100); }else{ $(".big").fadeOut(100); } // 判断放大镜可显示 if($(".big").is(":visible")){ var rx = Math.round(mx/$(".small").width()*imgWidth - $(".big").width()/2)*-1; var ry = Math.round(my/$(".small").height()*imgHeight - $(".big").height()/2)*-1; var bgp = rx + "px " + ry + "px"; // 放大镜跟随鼠标 var gx = mx - $(".big").width()/2; var gy = my - $(".big").height()/2; $(".big").css({ left:gx, top:gy, backgroundPosition:bgp, }) } }) }) })</script>
阅读全文
0 0
- jq放大镜
- 放大镜 JQ
- jq放大镜
- jq放大镜
- JQ实现放大镜效果
- jq淘宝放大镜
- 项目中jq实现放大镜
- JQ放大镜插件的调用
- [JQ权威指南]图片放大镜插件jqzoom
- [原创] JQ仿淘宝图片局部放大镜效果
- 放大镜
- 放大镜
- 放大镜
- 放大镜
- 放大镜
- 放大镜
- 放大镜
- 放大镜
- JavaScript笔记(浏览器上--操作DOM)
- redis面试总结
- Spark性能优化指南——基础篇
- java攻城狮之路-面向对象(2)
- JS原生实现多个小球跟着鼠标移动
- jq放大镜
- Linux基础命令总结(CentOS6.9, CentOS7.3)
- MVC、MVP、MVVM之间的关系
- svg兼容ie
- 2017 四川省赛 A.Simple Arithmetic【溢出】
- Spark--03基本架构及原理
- 限制一个段落的字数(项目总结)
- 异常
- Install vlc in Fedora 26