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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
windows支持哪个版本的python
2020/07/03 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
促销活动总结怎么写
2014/06/25 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2015感人爱情寄语
2015/02/26 职场文书
小学安全教育主题班会
2015/08/12 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
吃通javascript正则表达式
2021/04/21 Javascript
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS