基于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 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
javascript表单验证大全
Aug 12 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
Vue SSR 组件加载问题
May 02 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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时间不正确的解决方法
2008/04/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
详解Vue之事件处理
2020/07/10 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
python中字符串的操作方法大全
2018/06/03 Python
pytorch 数据集图片显示方法
2018/07/26 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
python中常见错误及解决方法
2020/06/21 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
网吧收银员岗位职责
2013/12/14 职场文书
《值日生》教学反思
2014/02/17 职场文书
公开服务承诺制度
2014/03/26 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS