用jquery实现淘宝放大镜以及图片切换
2024-05-10 07:57:27
放大镜
1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.53. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，
html部分：
这里需要使用2长一定比例的图片，在页面中按比例设置2个div中来存放这2长图片，并在小图片的div中按照一定的比例设一个用来放大的区域
<div class="nav"><div id="box"><img src="./imgs/0_big.jpg" alt=""><div id="show"></div></div><div id='image'><img src="./imgs/0_big.jpg" alt=""></div></div><div><li><img src="./imgs/0_big.jpg" alt=""></li><li><img src="./imgs/1_big.jpg" alt=""></li><li><img src="./imgs/2_big.jpg" alt=""></li><li><img src="./imgs/3_big.jpg" alt=""></li><li><img src="./imgs/4_big.jpg" alt=""></li></div>
主要的CSS样式：溢出隐藏overflow:hidden，隐藏图层display:none，定位position
用的主要事件：鼠标移动事件mousemove()和鼠标hover()
#box {width: 600px;height: 600px;border: 1px solid black;position: relative;}#box img{width:600px;height:600px;}#image {width: 500px;height: 500px;border: 1px solid black;overflow: hidden;position: relative;}li {list-style: none;float: left;border: 2px solid black;}li img{width: 100px;height: 100px;margin: 8.3px;}#show {width: 200px;height: 200px;background: rgba(0, 0, 0, 0.5);position: absolute;top:0;}.nav {height: 600px;width: 910px;display: flex;justify-content: space-between;}#image img{position: absolute;width:1300px;height:1300px;}
jquery部分代码
最后，实现大图片对应的移动，这里要注意，大图片的一定是与放大区域移动的方向相反的
$('div li img').click(function () {$('#box img').attr('src',this.src)$('#image img').attr('src',$('#box img')[0].src)})var box = $('#box')var image = $('#image')var btn = $('#show')var flge = false$('#show').mousedown(function () {flge = true$('#box').mousemove(function (e) {if(flge){var moveX = e.pageX - 50;var moveY = e.pageY - 50;var maxX = e.pageX;var maxY = e.pageY;if (moveX < 0) {moveX = 0;}if (moveY < 0) {moveY = 0;}if (moveX > 400) {moveX = 400;}if (moveY > 400) {moveY = 400;} $('#show').css('left', moveX)$('#show').css('top', moveY)$('#image img').css('left',(-moveX)*2)$('#image img').css('top',(-moveY)*2)} })})$('#show').mouseup(function () {flge = false})
最后上全部代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" nav="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" nav="ie=edge"><title>Document</title><script src="./jquery-3.4.1.js"></script><style>#box {width: 600px;height: 600px;border: 1px solid black;position: relative;}#box img{width:600px;height:600px;}#image {width: 500px;height: 500px;border: 1px solid black;overflow: hidden;position: relative;}li {list-style: none;float: left;border: 2px solid black;}li img{width: 100px;height: 100px;margin: 8.3px;}#show {width: 200px;height: 200px;background: rgba(0, 0, 0, 0.5);position: absolute;top:0;}.nav {height: 600px;width: 910px;display: flex;justify-content: space-between;}#image img{position: absolute;width:1300px;height:1300px;}</style>
</head><body><div class="nav"><div id="box"><img src="./imgs/0_big.jpg" alt=""><div id="show"></div></div><div id='image'><img src="./imgs/0_big.jpg" alt=""></div></div><div><li><img src="./imgs/0_big.jpg" alt=""></li><li><img src="./imgs/1_big.jpg" alt=""></li><li><img src="./imgs/2_big.jpg" alt=""></li><li><img src="./imgs/3_big.jpg" alt=""></li><li><img src="./imgs/4_big.jpg" alt=""></li></div><script>$('div li img').click(function () {$('#box img').attr('src',this.src)$('#image img').attr('src',$('#box img')[0].src)})var box = $('#box')var image = $('#image')var btn = $('#show')var flge = false$('#show').mousedown(function () {flge = true$('#box').mousemove(function (e) {if(flge){var moveX = e.pageX - 50;var moveY = e.pageY - 50;var maxX = e.pageX;var maxY = e.pageY;if (moveX < 0) {moveX = 0;}if (moveY < 0) {moveY = 0;}if (moveX > 400) {moveX = 400;}if (moveY > 400) {moveY = 400;} $('#show').css('left', moveX)$('#show').css('top', moveY)$('#image img').css('left',(-moveX)*2)$('#image img').css('top',(-moveY)*2)} })})$('#show').mouseup(function () {flge = false})</script>
</body></html>用jquery实现淘宝放大镜以及图片切换相关推荐
- jquery: JS淘宝网产品图片局部放大代码
实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能 一.前言 二.图示淘宝商品放大镜效果 三.需要掌握的知识点 四.放大镜实现原理 五.放大镜代码及注释 六.放大镜最终成果 七.放大镜源码 八.总结 一.前言 今天翻阅文件夹看到了之前写 ...
- vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件 使用的话就是直接引入 import picZoom from 'vue- ...
- CDN工作原理及淘宝双十一图片访问实战
淘宝的图片访问,有98%的流量都走了CDN缓存.只有2%会回源到源站,节省了大量的服务器资源. 但是,如果在用户访问高峰期,图片内容大批量发生变化,大量用户的访问就会穿透cdn,对源站造成巨大的压力. ...
- 微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码 效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
- jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
- 一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- App瘦身最佳实践(分析了微信、淘宝、微博图片文件的放法)
本文会不定期更新,推荐watch下项目.如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request. 本文的示例代码主要是基于作者的经验来编写的,若你有其他 ...
- 淘宝系App图片为什么在北京电信网络加载这么慢?
欢迎访问我的个人网站:https://coderyuan.com 文章目录 先讲讲怎么回事 不能抓包 初步判断是DNS或IPv6问题(其实不是) 反馈 被逼无奈,只好搞逆向 利用LayoutInspe ...
最新文章
- SQLServer------插入数据时出现IDENTITY_INSERT错误
- 单摆运动属于什么现象_在学习高中物理中有什么好的经验可以分享？
- 股票自动交易python下单接口_用 Python 写了个简单的股票量化交易框架
- Asp.net SignalR 实现服务端消息推送到Web端
- Java知多少（4）J2SE、J2EE、J2ME的区别
- 七骑士android版上线时间,腾讯独代韩手游《七骑士》今日全面公测
- matlab 数据降维和重构_核主成分分析（Kernel PCA, KPCA）的MATLAB 实现
- XML和JSON两种数据交换格式的比较
- 十招搞定 MySQL 大规模数据库的性能和伸缩性优化
- php类的举例,用类来代替递归方法，用php举例_php _ 搞代码
- [导入]16:50论坛终于恢复了
- 入门系列之在Ubuntu上使用Netdata设置实时性能监控
- CMR（IF=50.129）重磅综述|肠-脑轴新疗法：肠道菌群如何影响人类神经系统疾病
- 叮铃铃~： 一个前端铃声/提示音组件
- 【推荐】git commit 规范和如何在 commit 里使用 emoji
- centos7下载安装postgresql 12详细过程
- BRISQUE UCIQE UIQM
- python3.5变化（String）
- 基于L2Dwidget动态漫画人物js特效
- win7中能对窗口的排列方法是_win7系统窗口智能排列的操作方法