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 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
小程序转发探索示例
Feb 19 Javascript
vue生命周期的探索
Apr 03 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 Javascript
用vue写一个日历
Nov 02 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
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
详解php的socket通信
2015/08/11 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript常见用法总结
2014/05/22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Php多进程实现代码
2018/05/07 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
如何基于python实现脚本加密
2019/12/28 Python
python用什么编辑器进行项目开发
2020/06/17 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
安全资料员岗位职责
2013/12/14 职场文书
工伤赔偿协议书
2014/04/15 职场文书
初中家长评语和期望
2014/12/26 职场文书
运动会致辞稿
2015/07/29 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers