使用JQuery 写出放大镜的效果

本文主要是介绍使用JQuery 写出放大镜的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一般的电商平台中都有放大图片的放大镜

以下是示例代码

以下是css代码

* {margin: 0;padding: 0;}.glass {width: 480px;position: relative;margin: 100px auto;}.mark {width: 100px;height: 100px;background: rgba(255, 255, 255, 0.6);position: absolute;top: 0;left: 0;display: none;}.bigImage,.bigImage img {width: 480px;height: 270px;}.bigImage {position: relative;}.bigImage img {position: absolute;display: none;}.smImage {width: 480px;margin-top: 20px;}.smImage img {width: 140px;margin: 0 8px;opacity: 0.6;}.glassView {width: 200px;height: 200px;position: absolute;right: -200px;top: 0;overflow: hidden;display: none;}.glassView img {width: 960px;height: 540px;position: absolute;top: 0;left: 0;display: none;}

以下是html代码

 <div class="glass"><!-- 放大镜图片 --><div class="glassView"><img src="./img/1.jpg" alt="" /><img src="./img/2.jpg" alt="" /><img src="./img/3.jpg" alt="" /></div><!-- 大图 --><div class="bigImage"><img src="./img/1.jpg" alt="" /><img src="./img/2.jpg" alt="" /><img src="./img/3.jpg" alt="" /><!-- 放大镜标记 --><div class="mark"></div></div><!-- 缩略图 --><div class="smImage"><img src="./img/1.jpg" alt="" /><img src="./img/2.jpg" alt="" /><img src="./img/3.jpg" alt="" /></div></div>

以下是js 代码

// 1. js初始化效果// 1.1 第一个tab img 透明度为1var x = 0;$(".smImage>img:eq" + "(" + x + ")").css({ opacity: 1 });// 1.2 第一张大图片显示$(".bigImage>img:eq" + "(" + x + ")").css({ display: "block" });// 2. 分析交互效果// 2.1 tab切换$(".smImage>img").on("mouseenter", function(e) {// 2.2 上一个tab切换透明度变成0.6   上一张图片隐藏$(".smImage>img:eq" + "(" + x + ")").css({ opacity: 0.6 });$(".bigImage>img:eq" + "(" + x + ")").css({ display: "none" });// 2.3 当前移入元素透明度为1  显示当前元素x = $(this).index(); // 获取当前显示元素的索引$(".smImage>img:eq" + "(" + x + ")").css({ opacity: 1 });$(".bigImage>img:eq" + "(" + x + ")").css({ display: "block" });});// 3 显示，隐藏mark$(".bigImage").on("mouseenter", function() {$(".mark").css({ display: "block" });// 显示隐藏放大镜$(".glassView").css({ display: "block" });$(".glassView>img:eq" + "(" + x + ")").css({ display: "block" });});$(".bigImage").on("mouseleave", function() {$(".mark").css({ display: "none" });$('.glassView>img:eq' + "(" + x + ")").css({ display: 'none' })});// 让mark 与 鼠标 的位置 保持一致// 3.1 确定鼠标移动范围：大图片，给大图片绑定鼠标移动事件$(".bigImage").on("mousemove", function(e) {// 处理移动业务// 3.2 让mark 随着岁表移动而移动// 获取鼠标的位置，求mark  移动的位移// console.log(e.pageX); // 鼠标距离页面左边的位置// console.log($(this).offset().left) // 元素距离页面左边的距离var X = e.pageX - $(this).offset().left - 50; // 鼠标在元素上的位置(相对元素)var Y = e.pageY - $(this).offset().top - 50; // 鼠标在元素上的位置(相对元素)if (X < 0) {X = 0;}if (X > 380) {X = 380;}if (Y < 0) {Y = 0;}if (Y > 170) {Y = 170;}$(".mark").css({left: X,top: Y});$(".glassView>img:eq(" + x + ")").css({left: -X * 2 + "px",top: -Y * 2 + "px"});});