【前端开发】jquery实现某宝放大点击切换
来源:互联网 发布:二维数组赋值与输出 编辑:程序博客网 时间:2024/06/08 09:24
html代码
<body><div class="boss"> <div class="bigimg"> <img src="img/s1.jpg" height="350" width="350" id="spic"> <div id="mask"></div> </div> <div class="xia"> <a class="prev"><</a> <a class="next">></a> <div class="items"> <ul> <li><img src="img/b1.jpg" height="56" width="56"></li> <li><img src="img/b2.jpg" height="56" width="56"></li> <li><img src="img/b3.jpg" height="56" width="56"></li> <li><img src="img/b1.jpg" height="56" width="56"></li> <li><img src="img/b3.jpg" height="56" width="56"></li> <li><img src="img/b1.jpg" height="56" width="56"></li> <li><img src="img/b1.jpg" height="56" width="56"></li> <li><img src="img/b1.jpg" height="56" width="56"></li> <li><img src="img/b2.jpg" height="56" width="56"></li> <li><img src="img/b3.jpg" height="56" width="56"></li> </ul> </div> </div> <div class="zoom"> <img src="img/b1.jpg" id="bpic"> </div></div><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/js6.js"></script>
css代码
*{margin: 0;padding:0;}li{ list-style: none;}.boss{ position:relative; width: 350px;}.bigimg{ width: 350px; border: 1px solid #ccc; height: 350px; position: relative;}#mask{ width: 150px; height: 150px; background: rgba(255,255,255,0.5); position: absolute; top: 0; left: 0; border:1px solid #ccc; cursor: pointer;}.xia{ clear:both; margin-top:5px; width:352px;}.xia .prev{ float:left; margin-right:4px;}.xia .next{ float:right;}.xia .prev,.xia .next{ display:block; text-align:center; width:10px; height:54px; line-height:54px; border:1px solid #CCC; background:#EBEBEB; cursor:pointer; text-decoration:none;}.xia .items{ float:left; position:relative; width:322px; height:56px; overflow:hidden;}.xia .items ul{ position:absolute; height:56px;}.xia .items ul li{ float:left; width:64px; text-align:center;} .xia .items ul li img{ border:1px solid #CCC; padding:2px; width:50px; height:50px;}.xia .items ul li img:hover{ border:2px solid #FF6600; padding:1px;} .zoom{ width: 350px; height: 410px; border:1px solid #ccc; position: absolute; top: 0; right: -360px; overflow: hidden; display: none;}
jquery代码
var $spic=$("#spic");var $mask=$("#mask");var $bigimg=$(".bigimg");var $bpic=$("#bpic");$(".items img").on("mouseover",function(){ $spic.attr("src",$(this).attr("src"));//鼠标滑过切换 $bpic.attr("src",$(this).attr("src"));});var l=$bigimg.eq(0).offset().left;var t=$bigimg.eq(0).offset().top;var width1=$mask.outerWidth()/2;var height1=$mask.outerHeight()/2;var maxl=$bigimg.width()-$mask.outerWidth();var maxt=$bigimg.height()-$mask.outerHeight();var bili=$bpic.width()/$spic.width();$bigimg.mouseover(function(e){ var maskl=e.clientX-l-width1,maskt=e.clientY-t-height1; if(maskl<0) maskl=0; if(maskt<0) maskt=0; if(maskl>maxl)maskl=maxl; if(maskt>maxt)maskt=maxt; $mask.css({"left":maskl,"top":maskt}); $(".zoom").show(); $bpic.css({"margin-left":-maskl*bili,"margin-top":-maskt*bili});});var marginLeft=0$(".next").click(function(){ marginLeft=marginLeft-63.5; if(marginLeft<-254) marginLeft=-254; $(".items ul").css({"margin-left":marginLeft})})$(".prev").click(function(){ marginLeft=marginLeft+63; if(marginLeft>0) marginLeft=0; $(".items ul").css({"margin-left":marginLeft})});
阅读全文
0 0
- 【前端开发】jquery实现某宝放大点击切换
- 前端jquery实现图片点击放大缩小
- jQuery实现图片点击放大
- jquery实现图片缩小放大的切换
- jQuery 实现点击文字放大效果
- jquery 点击函数切换 toggle() 及其其他实现点击切换
- 图片点击放大左右切换
- [前端] jquery+css3实现弹出层中间放大弹出
- iOS开发笔记:实现点击图片放大全屏
- iOS开发笔记:实现点击图片放大全屏
- 开发中点滴积累图片点击放大的实现
- 利用html和Jquery实现照片墙(点击之后放大,再点击缩小)
- 使用jquery点击切换
- 实现点击图片放大全屏
- js实现图片点击放大
- vue 实现点击图片放大
- Jquery实现点击切换图片并隐藏显示内容
- 使用jquery + css + html实现点击左右箭头切换图片
- request.getInputStream中文乱码解决方案
- 【转】Hibernate三种状态的转换
- Android 开发计步器
- oracle配置监听
- 为什么我要写《Tomcat架构解析》
- 【前端开发】jquery实现某宝放大点击切换
- kaggle入门
- 本地时间戳
- 初识Docker
- oc基础2属性和成员变量
- http状态码想 详细手册
- 110 C语言结构体数组
- iOS多文件post上传
- IDC的业务介绍4——香港服务器带宽都有哪几类