简易电商宝贝放大镜效果--jQuery
生活随笔
收集整理的這篇文章主要介紹了
简易电商宝贝放大镜效果--jQuery
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html><html>
<head lang="en"> <meta charset="UTF-8"> <title>放大鏡</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style> * { margin: 0; padding: 0;}
body { padding: 200px 400px;}
div.small, div.big { width: 250px; height: 250px; position: relative; display: inline-block; top: 0; overflow: hidden; border: 1px solid #333;} div.big>img{ position: absolute; left:0; top:0;} div.glass { width: 125px; height: 125px; background: rgba(117, 117, 117, 0.4); position: absolute; left: 0; top: 0; border:2px solid rgba(255,255,255,0.5);} </style></head>
<body> <div class="small"> <div class="glass"></div> <img src="./Small.jpg" alt=""> </div> <div class="big"> <img src="./Big.jpg" alt=""> </div></body><script> $('.glass').mousedown(function (e) { let mouseX = e.pageX; //獲取鼠標下落位置 let mouseY = e.pageY; let oldleft = $('.glass').position().left; //獲取放大鏡坐標 let oldtop = $('.glass').position().top; $(window).mousemove(function (e) { // 移動放大鏡 let mouseMoveX = e.pageX - mouseX //左右移動距離 let mouseMoveY = e.pageY - mouseY //上下移動距離 // 改變鏡片位置 let newLeft = mouseMoveX + oldleft; let newtop = mouseMoveY + oldtop // 規定鏡片界限 let smallW = $('.small').width() //獲取小盒子寬度 let smallH = $('.small').height() //獲取小盒子寬度 let glassW = $('.glass').width() //獲取鏡片的寬度 let glassH = $('.glass').height() //獲取鏡片的高度 let bigW = $('.big').width() //獲取大盒子寬度 let bigH = $('.big').width() //獲取大盒子高度 if (newLeft <= 0) { newLeft = 0} if (newLeft >= smallW - glassW) { newLeft = smallW - glassW} if (newtop <= 0) { newtop = 0} if (newtop >= smallH - glassH) { newtop = smallH - glassH} //改變玻璃位置 $('.glass').css({ left: newLeft, top: newtop,}) //大小圖聯動 let biliW = newLeft/glassW let biliH = newtop/glassH $('div.big>img').css({ left:-bigW*biliW, top:-bigH*biliH}) return false}) $(window).mouseup(function (e) { $(window).off() return false}) return false})</script>
</html>
<head lang="en"> <meta charset="UTF-8"> <title>放大鏡</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style> * { margin: 0; padding: 0;}
body { padding: 200px 400px;}
div.small, div.big { width: 250px; height: 250px; position: relative; display: inline-block; top: 0; overflow: hidden; border: 1px solid #333;} div.big>img{ position: absolute; left:0; top:0;} div.glass { width: 125px; height: 125px; background: rgba(117, 117, 117, 0.4); position: absolute; left: 0; top: 0; border:2px solid rgba(255,255,255,0.5);} </style></head>
<body> <div class="small"> <div class="glass"></div> <img src="./Small.jpg" alt=""> </div> <div class="big"> <img src="./Big.jpg" alt=""> </div></body><script> $('.glass').mousedown(function (e) { let mouseX = e.pageX; //獲取鼠標下落位置 let mouseY = e.pageY; let oldleft = $('.glass').position().left; //獲取放大鏡坐標 let oldtop = $('.glass').position().top; $(window).mousemove(function (e) { // 移動放大鏡 let mouseMoveX = e.pageX - mouseX //左右移動距離 let mouseMoveY = e.pageY - mouseY //上下移動距離 // 改變鏡片位置 let newLeft = mouseMoveX + oldleft; let newtop = mouseMoveY + oldtop // 規定鏡片界限 let smallW = $('.small').width() //獲取小盒子寬度 let smallH = $('.small').height() //獲取小盒子寬度 let glassW = $('.glass').width() //獲取鏡片的寬度 let glassH = $('.glass').height() //獲取鏡片的高度 let bigW = $('.big').width() //獲取大盒子寬度 let bigH = $('.big').width() //獲取大盒子高度 if (newLeft <= 0) { newLeft = 0} if (newLeft >= smallW - glassW) { newLeft = smallW - glassW} if (newtop <= 0) { newtop = 0} if (newtop >= smallH - glassH) { newtop = smallH - glassH} //改變玻璃位置 $('.glass').css({ left: newLeft, top: newtop,}) //大小圖聯動 let biliW = newLeft/glassW let biliH = newtop/glassH $('div.big>img').css({ left:-bigW*biliW, top:-bigH*biliH}) return false}) $(window).mouseup(function (e) { $(window).off() return false}) return false})</script>
</html>
總結
以上是生活随笔為你收集整理的简易电商宝贝放大镜效果--jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Part2-Chapter8-预测乐高玩
- 下一篇： winhex 16.6