jQuery实现的放大镜效果示例


Posted in Javascript onSeptember 13, 2016

本文实例讲述了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实现的放大镜效果示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
详解javascript void(0)
Jul 13 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 #Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 #Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 #Javascript
JS实现页面数据无限加载
Sep 13 #Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 #Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 #Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 #Javascript
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
python通过post提交数据的方法
2015/05/06 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
项目资料员岗位职责
2013/12/10 职场文书
仓库管理计划书
2014/05/04 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2016年寒假家长评语
2015/10/10 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书