效果：

实现思路

鼠标移入下面商品列表之后，在最上面显示对应的商品
默认情况下，黄色盒子和右侧大盒子是隐藏的
鼠标进入上面商品列表后，小黄盒子显示，右侧大盒子的商品显示
右侧商品的显示，是左侧商品的两倍并且是跟左侧黄色盒子移动距离相反

布局

<!-- 外层最大的盒子 --><div class="bigBox"><!-- 左侧的小盒子 --><div class="leftBox" id="leftBox1"><img src="./images/xie.jpg" alt="" id="xiaoxie"><div class="mark" id="mark1"></div></div><!-- 下面的商品小图标 --><ul class="items"><li class="item"><img src="./images/xiaoxie.jpg" alt=""  class="item-img"></li><li class="item"><img src="./images/xiaoxie1.jpg" alt="" class="item-img"></li><li class="item"><img src="./images/xiaoxie2.jpg" alt="" class="item-img"></li><li class="item"><img src="./images/xiaoxie3.jpg" alt="" class="item-img"></li><li class="item"><img src="./images/xiaoxie4.jpg" alt="" class="item-img"></li></ul><!-- 右侧大盒子 放大图片 --><div class="rightBox" id="rightBox1"><img src="./images/daxie.jpg" alt="" id="daxie"></div></div>

css部分

<style>.bigBox{width: 1100px;margin:0 auto;}/*设置左侧盒子大小*/.leftBox{border:1px solid #000;float: left;position: relative;width: 350px;height: 350px;}.leftBox img{position: absolute;width: 300px;}.mark{width: 250px;height: 250px;position: absolute;z-index:333;background: yellow;opacity: 0.5;/* 设置滤镜 */filter:alpha(opacity=50);/*默认隐藏*/display: none;cursor: move;}.rightBox{position: relative;width: 500px;height: 600px;float: left;border:1px solid #000;overflow: hidden;/*设置右侧盒子默认隐藏*/display: none;margin-left: 10px;}.rightBox #daxie{position: absolute;width: 100%;height: 100%;}.items{position: absolute;width: 360px;height: 80px;top:350px;left: 80px;}.items .item img{width: 60px;height: 60px;}.items .item{float: left;list-style: none;margin-right: 4px;}</style>

JS实现部分

<script>
var item = document.getElementsByClassName("item");
var img = document.getElementsByClassName("item-img");
//创建一个下面商品小图标的数组，
var arr = ["./images/xie.jpg","./images/xie1.jpg","./images/xie2.jpg","./images/xie3.jpg","./images/xie4.jpg","./images/xie5.jpg"];
//右侧大图片的数组
var bigArrImg = ["./images/daxie.jpg","./images/daxie1.jpg"]
//设置左侧盒子的移入显示，移出隐藏事件
leftBox1.onmouseover = function(){mark1.style.display = "block"rightBox1.style.display = "block";
}
leftBox1.onmouseout = function(){mark1.style.display = "none"rightBox1.style.display = "none"
}
for(var i = 0; i < item.length;i++){item[i].index = i;item[i].onmouseover = function(){for(var j = 0; j< item.length;j++){item[j].style.border = "none"}this.style.border = "2px solid red";xiaoxie.setAttribute("src",arr[this.index])daxie.setAttribute("src",arr[this.index])}
}
// mark1.onmousemove = function(e){    ，开始是这样写的，但是会出现，小黄盒子偏离现象
//为左侧盒子设置鼠标移动事件，给小黄盒子设置移动
leftBox1.onmousemove = function(e){var e = e||event;//设置鼠标x和y的最大移动距离var x = e.clientX-leftBox1.offsetLeft-mark1.offsetWidth/2var y = e.clientY-leftBox1.offsetTop-mark1.offsetHeight/2// 设置小黄盒子的最大移动距离var maxW = leftBox1.offsetWidth-mark1.offsetWidth;var maxH = leftBox1.offsetHeight-mark1.offsetHeight;if(x<0){x=0}if(y<0){y=0}if(x>maxW){x=maxW}if(y>maxH){y=maxH}mark1.style.left = x+"px";mark1.style.top = y+"px";// 右侧大盒子的实际移动距离是左侧的两倍，并且是相反的daxie.style.left = -x*2+"px"daxie.style.top = -y*2+"px"
}

总结

最后写完发现，黄色小盒子的在鼠标开始移入，会自动出现在左上角，不会出现在鼠标开始出现的位置

原因：鼠标移动事件应绑定给左侧大盒子，不是小黄盒子，就可以解决这个问题

js实现仿京东商品放大镜和选项卡效果相关推荐

js实现京东购物放大镜和选项卡效果
购物网站点击商品后,都会有一个查看物品图片,并且可以放大仔细观察物品的功能.这个功能看起来复杂,其实实现起来非常简单.下面我们来一起做这个小效果吧! 首先,我们看一下页面的布局: 1.小图片显示区,上 ...
商品浏览时的css,jquery仿京东商品放大浏览页面
jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面css的代码!!! *{ margin: 0 ...
php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享
前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. j ...
HTML京东商品页面代码,jquery仿京东商品页面代码分享
jquery仿京东商品页面京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面的效果!!! 仿京东商品页面css的代码!! ...
android 苹果电脑底部图标滚动效果,JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动 ...
ios 仿京东商品属性选择界面
第一次上传的代码,仿京东的,代码粗糙,欢迎交流 https://github.com/wangting8013/-/tree/wangting8013-WTTJD
JS案例-仿京东放大镜效果
需要实现的效果图如下: ①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分.左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片, ...
仿京东图片放大镜动效
相信大家应该都有在京东上买过东西,那么大家在买东西的时候一定见到过图片放大的特效,就像是这样的效果: 其实这个效果的原理也很简单,就是我们要准备两张尺寸比例一样的图片,一张小图,一张大图,当鼠标移动到 ...
JS实现购物网站商品放大镜效果
一.需求说明 1.鼠标移入图片显示遮罩层和右边的放大镜鼠标移出图片隐藏遮罩层和右边的放大镜 2.鼠标经过下面的图片列表区切换显示的图片 3.鼠标在显示的图片上移动,遮罩层也会跟着移动,并 ...

js实现仿京东商品放大镜和选项卡效果

效果：

实现思路

布局

css部分

JS实现部分

总结

js实现仿京东商品放大镜和选项卡效果相关推荐

最新文章

热门文章