jQuery实现的放大镜效果示例
2020-02-21 16:00:43来源:爱站网 阅读 ()
放大镜效果在JavaScript开发中都会广泛应用,实现的效果其实大家都很熟悉,当然这个原理并不是很困难,下面就让爱站技术频道小编带我们一起了解jQuery实现的放大镜效果示例吧!
分享给大家供大家参考,具体如下:
zoom.css:
*{ padding: 0; margin: 0; } li{ list-style-type: none; } .zoom{ margin: 50px; position: relative; } .zoomMiddle{ border: 1px solid #ccc; width: 300px; height: 300px; margin-bottom: 3px; position: relative; } .zoomMiddle img{ width: 300px; height: 300px; } .mask{ width: 100px; height: 100px; background: #abcdef; opacity:0.4; position: absolute; left: 0; top: 0; display: none; } .zoomSmall{ -overflow: hidden; width: 302px; height: 54px; } .zoomSmall span{ float: left; height: 52px; line-height: 52px; width: 10px; text-align: center; border: 1px solid #ccc; cursor: pointer; } .zoomSmall span.disable{ cursor: default; background: #ccc; } .wrapSmallImg{ float: left; height: 54px; width: 232px; /*background: #f00;*/ position: relative; overflow: hidden; } .wrapSmallImg ul{ width: 348px; /*background: #f00;*/ position: absolute; left: 0; top: 0; } .wrapSmallImg ul li{ float: left; width: 50px; height: 50px; border: 2px solid #ccc; margin: 0 2px; _display: inline; cursor: pointer; } .wrapSmallImg ul li.current{ border: 2px solid orange; } .wrapSmallImg ul li img{ width: 50px; height: 50px; } .zoomLarge{ width: 350px; height: 350px; border: 1px solid #ccc; position: absolute; top: 0; left: 320px; overflow: hidden; display:none; } .zoomLarge img{ width: 600px; height:600px; position: absolute; left: 0; top: 0; }
zoom.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<input type="text" name="" id="">
<div class="zoom">
<div class="zoomMiddle">
<img src="1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="zoomSmall">
<span class="left disable"><</span>
<div class="wrapSmallImg">
<ul>
<li class="current"><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</div>
<span class="right">></span>
</div>
<div class="zoomLarge"><img src="1.jpg" alt=""></div>
</div>
<script src="jquery.js"></script>
<script src="zoom.js"></script>
</body>
</html>
zoom.js:
$(function(){ var smallImgLi = $('.wrapSmallImg ul li'); var smallImgLiLength = smallImgLi.size(); var smallImgLiWidth = smallImgLi.outerWidth(true); var smallImgUl = $('.wrapSmallImg ul'); var leftBtn = $('span.left'); var rightBtn = $('span.right'); var now = 0; var zoomMiddleDiv = $('.zoomMiddle'); smallImgLi.mouseover(function(){ $(this).addClass('current').siblings().removeClass('current'); var thisSrc = $(this).children('img').attr('src'); $('.zoomMiddle img').attr('src',thisSrc); $('.zoomLarge img').attr('src',thisSrc); }); rightBtn.click(function(){ //当now=2的时候,我们不希望再让他滚动了 leftBtn.removeClass('disable'); if(now>=smallImgLiLength-4){ $(this).addClass('disable'); now = smallImgLiLength-4; }else{ now++; smallImgUl.animate({'left':-now*smallImgLiWidth},300); } }); leftBtn.click(function(){ if(now==0){ now=0; }else{ now--; smallImgUl.animate({'left':'+='+smallImgLiWidth},300); } }); zoomMiddleDiv.mousemove(function(e){ $('.mask').show(); $('.zoomLarge').show(); zoomMiddleDivOffset = zoomMiddleDiv.offset(); var x = e.pageX - zoomMiddleDivOffset.left - $('.mask').width()/2; var y = e.pageY - zoomMiddleDivOffset.top - $('.mask').height()/2; if(x<=0){ x=0; }else if(x>=zoomMiddleDiv.width()-$('.mask').width()){ x = zoomMiddleDiv.width()-$('.mask').width(); } if(y<=0){ y=0; }else if(y>=zoomMiddleDiv.height()-$('.mask').height()){ y = zoomMiddleDiv.height()-$('.mask').height(); } var percentageX = x/(zoomMiddleDiv.width()-$('.mask').width()); var percentageY = y/(zoomMiddleDiv.height()-$('.mask').height()); $('.zoomLarge img').css({ left:-percentageX*(600-$('.zoomLarge').width()), top:-percentageY*(600-$('.zoomLarge').height()) }); $('input').val(percentageX+','+percentageY) $('.mask').css({ 'left':x+'px', 'top':y+'px' }); }); zoomMiddleDiv.mouseout(function(){ $('.mask').hide(); $('.zoomLarge').hide(); }); });
效果图如下:
以上就是爱站技术频道小编介绍的关于jQuery实现的放大镜效果示例,现在开发程序的技术已经有很多变化了,如果你只会墨守成规,那将会离我们越来越远。
原文链接:https://js.aizhan.com/develop/JavaScript/11678.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js防止表单重复提交实现代码 2020-03-29
- Jquery插件写法笔记整理 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash