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右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
Bootstrap基础学习
Jun 16 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
去除html代码里面的script正则方法
May 19 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 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
星际实力自我测试
2020/03/04 星际争霸
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP微信API接口类
2016/08/22 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
js密码强度检测
2016/01/07 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
python3.7.0的安装步骤
2018/08/27 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
EJB3推出JPA的原因
2013/10/16 面试题
幼儿教师考核制度
2014/01/25 职场文书
单位活动策划方案
2014/08/17 职场文书
冰雪公主观后感
2015/06/16 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
结婚十年感言
2015/07/31 职场文书
关于教师节的广播稿
2015/08/19 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS