仿淘宝商品查看 鼠标悬停,图片局部放大
2019-01-18 17:57
211 查看
HTML代码
<div class="box" id="box"> <div id="smallBox" class="small "> <img src="http://www.jq22.com/demo/jQueryMagnifier201702271056/images/2.png" width="350"> <div id="mask" class="mask"></div> </div> <div id="bigBox" class="big"> <img src="http://www.jq22.com/demo/jQueryMagnifier201702271056/images/2.png" alt="" id="bigPic"> </div> </div>
css代码`
* { margin:0; padding:0; } .box { width:350px; height:262px; margin:10px; border:1px solid #ccc; position:relative; } .big { width:400px; height:400px; position:absolute; top:0; left:360px; border:1px solid #ccc; overflow:hidden; display:none; } .mask { width:175px; height:175px; background:rgba(255,255,0,0.4); position:absolute; top:0; left:0; cursor:move; display:none; } .small { position:relative; } .box img { vertical-align:top; } #bigBox img { position:absolute; }
js代码
var smallBox = document.getElementById('smallBox'); var mask = document.getElementById('mask'); var bigBox = document.getElementById('bigBox'); var box = document.getElementById('box') var bigPic = document.getElementById('bigPic') //鼠标经过小盒子,显示大盒子 smallBox.onmouseover = function() { bigBox.style.display = "block"; mask.style.display = "block"; } smallBox.onmouseout = function() { bigBox.style.display = "none"; mask.style.display = "none"; } smallBox.onmousemove = function(event) { //遮罩跟随鼠标 var event = event || widow.event; var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; //计算mask的位置 // var boxX = ; // var boxY = ; var targetX = pageX - box.offsetLeft - mask.offsetWidth / 2; var targetY = pageY - box.offsetLeft - mask.offsetHeight / 2; //限制mask移动范围 if (targetX < 0) { targetX = 0; } // if(targetX > 175){ // targetX = 175; // } if (targetY < 0) { targetY = 0; } // if(targetY > 175){ // targetY = 175; // } if (targetX > smallBox.offsetWidth - mask.offsetWidth) { targetX = smallBox.offsetWidth - mask.offsetWidth; } if (targetY > smallBox.offsetHeight - mask.offsetHeight) { targetY = smallBox.offsetHeight - mask.offsetHeight; } //console.log(smallBox.offsetWidth-mask.offsetWidth); // console.log(mask.offsetWidth); //console.log(targetX); mask.style.left = targetX + "px"; mask.style.top = targetY + "px"; //按照比例移动大图 var bigToMove = bigPic.offsetWidth - bigBox.offsetWidth; var maskToMove = smallBox.offsetWidth - mask.offsetWidth; var rate = bigToMove / maskToMove; bigPic.style.left = -rate * targetX + "px"; bigPic.style.top = -rate * targetY + "px"; }
相关文章推荐
- jquery---仿淘宝商品图片局部放大
- 仿淘宝商品图片放大镜效果(鼠标移动上去会出现放大的图片,并且可以移动)
- js放大镜效果。类似于淘宝产品内页多图展示代码,鼠标移到图片上有放大效果,方便查看产品细节,此代码适合网店产品展示,
- 鼠标悬停商品图片,图片放大,并且可拖动
- 查看商品图片,鼠标悬浮图片放大js实现
- 代码: 仿淘宝商品详情页左上,图片鼠标浮上去,图片部分区域放大 (页面布局:图片列表)
- 仿淘宝鼠标移动商品图片放大效果
- JS鼠标悬停经过图片由中心点逐渐放大效果
- jQuery当鼠标悬停时放大图片的效果实例
- 鼠标悬停放大图片 - 漂亮
- CSS实现鼠标悬停经过图片由中心点逐渐放大效果
- jquery鼠标悬停图片放大滑动显示标题
- 鼠标悬停图片放大
- css实现鼠标悬停图片放大显示
- jQuery鼠标悬停图片放大显示
- jquery鼠标悬停时的放大图片的图片提示效果
- HTML5 心形图片墙 鼠标悬停放大图片
- 图片鼠标悬停放大
- 鼠标悬停图片放大
- css鼠标悬停 图片放大