jQuery实现放大镜案例


Posted in jQuery onOctober 19, 2020

本文实例为大家分享了jQuery实现放大镜效果的具体代码,供大家参考,具体内容如下

动画:

1、鼠标移入显示区图片时,显示选择框;

2、放大镜特效,将图片位于选择框内的部分放大显示;

3、点击下方小图片和左右移动按钮时正确的显示图片

实现方法:

1、放大效果:放大区的与显示区使用相同的图片,并设置放大区图片的长宽为显示区的二倍;

2、选择框拖动效果:鼠标移动时获得鼠标的坐标,并根据选择框的和图片的offset()属性计算出选择框的新位置。同时修改放大区图片的位置,使其与选择框内的部分对应;

3、点击小图片效果:修改小图片的class改变其样式,同时修改显示区和放大区图片的src显示对应的图片;

4、左移按钮:点击时通过each函数找到当前显示的图片,然后判断是否为第一张图片,如果是第一张图片则将最后一张图片设置为要显示的图片,修改其样式,同时修改显示区和放大区图片的src显示对应的图片。若果不是第一张图片,则将前一张图片设置为要显示的图片,修改其样式,同时修改显示区和放大区图片的src显示对应的图片;

5、右移按钮:原理有左移按钮相同。

(详见下方代码)

动画效果:

jQuery实现放大镜案例

<!DOCTYPE html>
 
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <script src="../jquery.min.js"></script>
 <link rel="stylesheet" href="style.css" >
</head>
<body>
<div id="container">
 <div class="box">
 <div class="normal"><img src="images/1.jpg" alt="图片">
 <div class="kuang"></div>
 </div>
 <div class="small">
  <div class="left"><img src="images/left.gif" alt="left"></div>
  <div class="right"><img src="images/right.gif" alt="right"></div>
  <div class="item">
  <ul>
  <li class="selected"><img src="images/1.jpg" alt="图片"></li>
  <li><img src="images/2.jpg" alt="图片"></li>
  <li><img src="images/3.jpg" alt="图片"></li>
  <li><img src="images/4.jpg" alt="图片"></li>
  <li><img src="images/5.jpg" alt="图片"></li>
  </ul>
  </div>
 </div>
 </div>
 <div class="big"><img src="images/1.jpg" alt="图片"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

css代码

*{
 margin: 0;
 padding: 0;
 list-style: none;
}
#container{
 margin: 50px auto;
 width: 1000px;
 
}
.box{
 position: relative;
 float: left;
 width: 400px;
 height: 380px;
}
.normal{
 position: relative;
 
 width: 400px;
 height: 300px;
}
.normal img{
 width: 400px;
 height: 300px;
}
.small{
 margin-top: 10px;
 width: 400px;
 height: 60px;
 
}
.small .left{
 position: relative;
 float: left;
 width: 10px;
 height: 60px;
}
.small .right{
 position: relative;
 float: right;
 width: 10px;
 height: 60px;
}
.item ul li{
 position: relative;
 float: left;
 margin-left: 5px;
 padding: 1px;
 width: 66px;
 height: 40px;
 border: 1px solid #ccc;
}
.item ul li img{
 
 width: 100%;
 height:100%;
}
.big{
 display: none;
 position: relative;
 float: left;
 margin-left: 20px;
 width: 400px;
 height: 300px;
 overflow: hidden;
}
.big img{
 position: relative;
 left: 0;
 top: 0;
 width: 800px;
 height: 600px;
}
.box .kuang{
 display: none;
 position: absolute;
 left: 0;
 top: 0;
 width: 200px;
 height: 150px;
 opacity: 0.5;
 background: #00f;
}
.item ul .selected{
 border: 1px solid orange;
}

jQuery代码

$(document).ready(function () {
 //当鼠标进入图片时显示放大框和放大图像
 $(".normal").mouseenter(function () {
 $(".kuang").show();
 $(".big").show();
 })
 //当鼠标离开图片时隐藏放大框和放大图像
 $(".normal").mouseleave(function () {
 $(".kuang").hide();
 $(".big").hide();
 })
 //按下鼠标拖动放大框,右侧放大显示图片位于放大框内的部分
 $(".kuang").mousedown(function (e) {
 x=e.pageX-$(this).offset().left;
 y=e.pageY-$(this).offset().top;
 // console.log($(this).offset().top);
 //console.log(y);
 $(document).on("mousemove",function(e){
  
  var _x=e.pageX-x-$(".box").offset().left;
  var _y=e.pageY-y-$(".box").offset().top;
 
  //设置_x和_y的范围
  if (_x<0){
  _x=0;
  }else if (_x>200){
  _x=200;
  }
  if (_y<0){
  _y=0;
  } else if(_y>150){
  _y=150;
  }
  $(".kuang").css({"left": _x, "top": _y});
  $(".big img").css({"left":-2*_x,"top":-2*_y});
 })
 })
 //鼠标抬起时停止取消拖动
 $(document).mouseup(function () {
 $(document).off("mousemove");
 })
 //点击左侧下方小图片时,左侧上方显示相应的图片,且左侧放大区也更改为与小图片对应的图片
 $(".item ul li img").click(function () {
 $(this).parent().addClass("selected")
 $(this).parent().siblings().removeClass("selected");
 $(".normal img").attr("src",$(this).attr("src"));
 $(".big img").attr("src",$(this).attr("src"));
 
 });
 //点击向左按钮,选中当前显示图片的前一张图片,小图片样式做相应的修改。图片显示区和右侧图片放大区都改为前一张图片
 $(".left").click(function () {
 $(".small li").each(function (index,value) {
  if($(value).attr("class")=="selected"){
  //如果当前显示第一张图片,则点击向左按钮时显示最后一张图片
  if(index==0){
   $(value).removeClass("selected")
   $(".small li").eq(4).addClass("selected");
   $(".normal img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
   $(".big img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
   return false;
  }
  if (index>0) {
   $(value).removeClass("selected").prev().addClass("selected");
   console.log($(value).prev().children().eq(0).attr("src"));
   $(".normal img").attr("src",$(value).prev().children().eq(0).attr("src"));
   $(".big img").attr("src",$(value).prev().children().eq(0).attr("src"));
  }
  }
 
 })
 
 });
 //点击向右按钮,选中当前显示图片的下一张图片,小图片样式做相应的修改。图片显示区和右侧图片放大区都改为下一张图片
 $(".right").click(function () {
 $(".small li").each(function (index,value) {
  if($(value).attr("class")=="selected"){
  //如果当前显示最后一张图片,则点击向右按钮时显示第一张按钮
  if(index==4){
   $(value).removeClass("selected")
   $(".small li").eq(0).addClass("selected");
   $(".normal img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
   $(".big img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
   return false;
  }
  if (index<4) {
   $(value).removeClass("selected").next().addClass("selected");
   $(".normal img").attr("src",$(value).next().children().eq(0).attr("src"));
   $(".big img").attr("src",$(value).next().children().eq(0).attr("src"));
   return false;
  }
  }
 
 })
 
 });
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 #jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
jquery简易手风琴插件的封装
Oct 13 #jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
jQuery实现二级导航菜单的示例
Sep 30 #jQuery
You might like
十天学会php之第七天
2006/10/09 PHP
PHP 金额数字转换成英文
2010/05/06 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
用于table内容排序
2006/07/21 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python列表解析配合if else的方法
2018/06/23 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
django的autoreload机制实现
2020/06/03 Python
python对一个数向上取整的实例方法
2020/06/18 Python
python对execl 处理操作代码
2020/06/22 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
2014年健康教育实施方案
2014/02/17 职场文书
创优争先心得体会
2014/09/11 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
感恩主题班会教案
2015/08/12 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
工作一年自我鉴定
2019/06/20 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang