基于jQuery仿淘宝产品图片放大镜特效


Posted in Javascript onOctober 19, 2020

在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件)。

放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异。 大家感兴趣的话可以去百度一下。

本文主要是使用非组件方法来做放大镜效果。

每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54  320X320  800X800。

首先看效果:鼠标经过小图时,大图随之切换。

基于jQuery仿淘宝产品图片放大镜特效

首先是html

<div class="infoimg">
 <div class="mainImg" id="largePicDiv">
  <img id="largePic" src="FileUpload/20160120/20160120103334758_w.jpg" alt="" />
  <div class="zoom_pup" id="move"></div>
  <div id="detailPic" class="big_pic">
   <img alt="和朋友们一起想办法(第二辑):全8册" src="FileUpload/20160120/20160120103334758_b.jpg" />
  </div>
 </div>
 <div class="allImg">
   <img src="FileUpload/20160120/20160120103334758_x.jpg" alt="和朋友们一起想办法(第二辑):全8册"/>
   <img src="FileUpload/20160120/20160120103334918_x.jpg" alt="和朋友们一起想办法(第二辑):全8册"/>
   <img src="FileUpload/20160120/20160120103335031_x.jpg" alt="和朋友们一起想办法(第二辑):全8册"/>
   <img src="FileUpload/20160120/20160120103335127_x.jpg" alt="和朋友们一起想办法(第二辑):全8册"/>
   <img src="FileUpload/20160120/20160120103335209_x.jpg" alt="和朋友们一起想办法(第二辑):全8册"/>

 </div>
    
</div>

这里id为move的div是放大镜的手柄 id为detailPic的div是右侧放大镜

 css

.infoimg { float: left; padding: 0 20px 30px 0; position: relative; width: 320px; }

.infoimg img { display: block; height: 320px; width: 320px; }

.allImg { height: 58px; margin: 15px 0 0 10px; overflow: hidden; width: 310px; }

.allImg img { cursor: pointer; float: left; height: 54px; margin-right: 3px; padding: 2px; width: 54px; }

.allImg img.current { border: 1px solid #f1f1f1; padding: 1px; }

.mainImg { position: relative; }

.mainImg .zoom_pup { background: url("../images/zoom_pup.png") repeat 0 0; cursor: move; height: 175px; left: 0px; position: absolute; top: 160px; width: 175px; display: none; }

.big_pic { background-color:#fff; border: 1px solid #f5f5f5; height: 400px; left: 320px; overflow: hidden; position: absolute; text-align: center; top: 0; width: 400px; display: none; }
.big_pic img{ width: 800px; height: 800px;}

JS代码

//切换图片
 $(".allImg img").mouseover(function() {
  $(".allImg img").removeClass("current");
  $(this).addClass("current");
  var src = $(this).attr("src");
  $("#largePic").attr("src", src.replace("_x", "_w"));
  $("#detailPic img").attr("src", src.replace("_x", "_b"));

 });
 
 //放大镜效果
 $("#largePicDiv").bind("mousemove",
  function(e) {
   var ev = e || event;
   var mouseX = ev.pageX;
   var mouseY = ev.pageY;
   var picLeft = $("#largePic").offset().left;
   var picTop = $("#largePic").offset().top;
   var picWidth = $("#largePic").width();
   var picHeight = $("#largePic").height();
   var xLength = mouseX - picLeft;
   var yLength = mouseY - picTop;
   var qWidth = picWidth / 4;
   var lastQWidth = picWidth - picWidth / 4;
   var qHeight = picHeight / 4;
   var lastQHeight = picHeight - picHeight / 4;
   if (xLength < qWidth) {
    $("#move").css("left","0px");
   } else {
    if (xLength > lastQWidth) {
     $("#move").css("left", (lastQWidth - qWidth) + "px");
    } else {
     $("#move").css("left", (xLength - qWidth) + "px");
    }
   }
   if (yLength < qHeight) {
    $("#move").css("top", "0px");
   } else {
    if (yLength > lastQHeight) {
     $("#move").css("top", (lastQHeight - qHeight) + "px");
    } else {
     $("#move").css("top", (yLength - qHeight) + "px");
    }
   }
   $("#detailPic > img").css("left", parseInt($("#move").css("left")) * (-800 / picWidth) + "px").css("top", parseInt($("#move").css("top")) * (-800 / picWidth) + "px").css("position", "absolute");
  });

当然这里最下面一排小图片 还缺少一个功能,就是当图片大于5张的时候可以左右滚动图片,这样可以容纳大于5张的图片。这里项目中使用的图片一般都小于5张,因此这个功能没有,大家可以参考一下当当或京东。

以上就是jQuery实现图片放大镜效果的代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 #Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 #Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 #Javascript
jquery mobile开发常见问题分析
Jan 21 #Javascript
json格式数据的添加,删除及排序方法
Jan 21 #Javascript
jquery及js实现动态加载js文件的方法
Jan 21 #Javascript
js console.log打印对像与数组用法详解
Jan 21 #Javascript
You might like
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python flask 多对多表查询功能
2017/06/25 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
匿名信格式范文
2015/05/27 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
python 实现的截屏工具
2021/05/08 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB