<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡效果</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
.box {
width: 350px;
height: 350px;
position: relative;
border:1px solid #ccc;
margin: 100px;
}
.productImg-smallBox {
position: relative;
}
.productImg-bigBox {
width: 450px;
height: 450px;
border:1px solid #ccc;
overflow: hidden;
position: absolute;
top: 0;
left: 360px;
display: none;
}
.big{
position: absolute;
top: 0;
left: 0;
}
.mask {
width: 80px;
height: 80px;
position: absolute;
top:0;
left:0;
background-color: rgba(255,0,255,.4);
cursor: move;
transition: opacity 1s;
opacity: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="productImg-smallBox">
<img src="images/001.jpg" class="small">
<div class="mask"></div>
</div>
<div class="productImg-bigBox">
<img src="images/0001.jpg" class="big">
</div>
</div>
<script>
window.onload = function(){
var smallBox = document.querySelector(".productImg-smallBox");
var bigBox = document.querySelector(".productImg-bigBox");
var bigImg = document.querySelector(".big");
var mask = document.querySelector(".mask");
smallBox.onmouseenter = function(){
mask.style.opacity = 1;
bigBox.style.display = "block";
}
smallBox.onmouseleave = function(){
mask.style.opacity = 0;
bigBox.style.display = "none";
}
var x = 0, y = 0;
smallBox.onmousemove = function(event){
var e = event || window.event;
x = e.clientX - this.offsetParent.offsetLeft - mask.offsetWidth / 2;
y = e.clientY - this.offsetParent.offsetTop - mask.offsetHeight / 2;
if(x <= 0){
x = 0
}
else if(x > smallBox.offsetWidth - mask.offsetWidth){
x = smallBox.offsetWidth - mask.offsetWidth;
}
if(y <= 0){
y = 0
}
else if(y > smallBox.offsetHeight - mask.offsetHeight){
y = smallBox.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y + "px";
bigImg.style.left = -x * smallBox.offsetWidth / bigBox.offsetWidth + "px";
bigImg.style.top = -y * smallBox.offsetHeight / bigBox.offsetHeight + "px";
}
}
</script>
</body>
</html>商品放大鏡效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,