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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP的引用详解
2015/02/22 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
发现的以前不知道的函数
2006/09/19 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
简单实现python数独游戏
2018/03/30 Python
python的继承知识点总结
2018/12/10 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
解决python 上传图片限制格式问题
2019/10/30 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
技术人员面试提纲
2013/11/28 职场文书
爱心捐书活动总结
2014/07/05 职场文书
国情备忘录观后感
2015/06/04 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书