js实现淘宝放大镜效果

    记得很久以前，小编就准备写个放大镜，但是种种原因导致，一直没有完成这个愿望，下面，让我们一起来实现这个常见的功能吧。不懂的同学，可能认为这很难细实现，觉得它很博大精深的样子，其实真了解他了，你会发现原来这么简单，下面废话不多说，让我们一起来实现它吧。首先当然是html布局和css样式：![效果图](https://img-blog.csdn.net/20160825213024936)我们将整个布局分三个部分，第一部分为主题的小图片，将他放在整个布局的左上角；第二部分是下边的图片列表，直接跟在小图片的下边；最后一部分是放大镜显示部分，将其定位到小图片的右边。然后就是利用js添加基本事件（包括鼠标的移入移出等）详细的内用见如下代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>ul{list-style: none;padding: 0;}.zoom-box{width: 452px;position: relative;}.small-box{position: relative;border: 1px solid #ccc;}.small-box img{width: 100%;height: 100%;}.small-box .square{position: absolute;left: 0;top: 0;background: yellow;opacity: 0.5;/*display: none;*/}.small-box .mask{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.img-list ul::after{clear: both;content: '';display: table;}.img-list ul li{float: left;margin: 0 10px;padding: 6px;}.img-list img{border: 2px solid transparent;}.img-list img.active{border: 2px solid red;}.big-box{position: absolute;top: 0;left: 100%;margin-left: 2px;border: 1px solid #cccccc;width: 500px;height: 500px;overflow: hidden;display: none;}.big-box img{position: absolute;top: 0;left: 0;}</style>
</head>
<body><!-- 布局--><div class="zoom-box"><!-- 容器--><div class="small-box"><!-- 小图片容器--><img src="../img/magnifier/m1.jpg" alt=""/><div class="square"></div><!-- 鼠标选中框--><div class="mask"></div><!-- 鼠标悬浮位置--></div><div class="img-list"><!-- 图片列表--><ul><li><img class="active" src="../img/magnifier/s1.jpg" alt="" data-small="../img/magnifier/m1.jpg"data-big="../img/magnifier/b1.jpg"/></li><li><img src="../img/magnifier/s2.jpg" alt="" data-small="../img/magnifier/m2.jpg"data-big="../img/magnifier/b2.jpg"/></li><li><img src="../img/magnifier/s3.jpg" alt="" data-small="../img/magnifier/m3.jpg"data-big="../img/magnifier/b3.jpg"/></li><li><img src="../img/magnifier/s4.jpg" alt="" data-small="../img/magnifier/m4.jpg"data-big="../img/magnifier/b4.jpg"/></li><li><img src="../img/magnifier/s5.jpg" alt="" data-small="../img/magnifier/m5.jpg"data-big="../img/magnifier/b5.jpg"/></li></ul></div><div class="big-box"><!-- 放大镜--><img src="../img/magnifier/b1.jpg" alt=""/></div></div><script>//获取要操作的元素var smallbox = $('.small-box .mask');var smallimg = $('.small-box img');var square = $('.square');var bigbox = $('.big-box');var bigimg = $('.big-box img');var imgs = $all('.img-list img');//鼠标经过图片列表显示被选中，实现图片切换for(var i = 0; i < imgs.length; i++){imgs[i].onmouseover = function(){for(var j = 0; j < imgs.length; j++){imgs[j].className = '';}this.className = 'active';//改变对应的图片链接smallimg.src = this.getAttribute('data-small');bigimg.src = this.getAttribute('data-big');};}//鼠标移入放大器显示并设置选中框的大小smallbox.onmouseover = function(){square.style.display = 'block';bigbox.style.display = 'block';//位置w/smallimg.w = bigbox.w/bigimg.wsquare.style.width = bigbox.offsetWidth * smallimg.offsetWidth/bigimg.offsetWidth + 'px';square.style.height = bigbox.offsetHeight * smallimg.offsetHeight/bigimg.offsetHeight + 'px';};//鼠标移出放大器隐藏smallbox.onmouseout = function(){square.style.display = 'none';bigbox.style.display = 'none';};//放大器移动//获取鼠标的位置smallbox.onmousemove = function(ev){var oEvent = ev || event;var x = oEvent.offsetX - square.offsetWidth/2;var y = oEvent.offsetY - square.offsetHeight/2;if(x < 0){x = 0;}if(x > smallbox.offsetWidth - square.offsetWidth){x = smallbox.offsetWidth - square.offsetWidth;}if(y < 0){y = 0;}if(y > smallbox.offsetHeight - square.offsetHeight){y = smallbox.offsetHeight - square.offsetHeight;}//给选中框定位square.style.left = x + 'px';square.style.top = y + 'px';//给放大器定位  x/? = smallimg.w/bigimg.wbigimg.style.top = -y * bigimg.offsetWidth/smallimg.offsetWidth + 'px';bigimg.style.left = -x * bigimg.offsetHeight/smallimg.offsetHeight + 'px';};//通过名称查找某个元素function $(name){return document.querySelector(name);}//通过名称查找相同的一组数据function $all(name){return document.querySelectorAll(name);}</script>
</body>
</html>

到这里这个放大镜效果就完成了，有兴趣的同学抓紧试试去吧=_=

js实现淘宝放大镜效果相关推荐

如何用源生js做出淘宝放大镜效果？
如何用源生js写出淘宝的放大镜效果~? 1,先写出静态界面,分别是两个div,一个div放小图片,另一个div放大图片.(当然这两张图片是一样的,只是大小不一样.) 2.大的那张图片要用backgro ...
原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
原生javaScript实现淘宝放大镜效果
大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础, ...
js 实现淘宝放大镜功能
先来看看效果: 写放大镜之前我们先来了解一下定位:通常子绝父相 (父元素相对定位,子元素绝对定位) 元素的定位方式:1.static 静态定位,所有元素,不添加任何定位方式时的默认状态2.relati ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能演示地址下载地址
vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
三级联动：js实现淘宝地址更改
三级联动:js实现淘宝地址更改在淘宝购物的时候,我们经常会遇到收获地址的选择,当省份发生改变时,城市,乡镇会随之发生改变. 这个三级联动的效果我们可以通过js来实现. 在写这个案例时,博主将地址 ...
JS仿淘宝网顶部的导航菜单
代码简介: JS仿淘宝网顶部的导航菜单.整合了购物车,收藏夹,搜索,搜索,网站导航等功能的导航. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

js实现淘宝放大镜效果

js实现淘宝放大镜效果相关推荐

最新文章

热门文章