用js制作淘宝放大镜效果
程序员文章站
2022-06-08 16:33:52
本文实例为大家分享了js制作淘宝放大镜效果的具体代码，供大家参考，具体内容如下
&l...
本文实例为大家分享了js制作淘宝放大镜效果的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100%;
}
#content{
width: auto;
height: auto;
margin-left: 200px;
margin-top: 60px;
}
#content-left{
position: relative;
width: 420px;
height: auto;
float: left;
}
#middle{
border: 1px solid #d2d2d2;
width: 418px;
height: 418px;
}
#small{
width: 420px;
height: auto;
}
#glass{
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
top: 0;
opacity: 0.5;
z-index: 1;
display: none;
}
ul{
width: inherit;
height: 60px;
}
ul li{
display: inline;
height: 60px;
list-style: none;
float: left;
margin: 10px;
}
#content-right{
position: relative;
width: 418px;
height: 418px;
border: 1px solid #ccc;
float: left;
margin-left: 10px;
overflow: hidden;
display: none;
}
#content-right img{
position: absolute;
width: 836px;
height: 836px;
}
</style>
</head>
<body>
<div id="content">
<div id="content-left">
<div id="middle">
<div id="glass"></div>
<img src="img/01.jpg"/>
</div>
<div id="small">
<ul>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
</ul>
</div>
</div>
<div id="content-right">
<img src="img/001.jpg"/>
</div>
</div>
</body>
<script type="text/javascript">
var smallli = document.getelementbyid("small").getelementsbytagname("ul")[0].getelementsbytagname("li");
var middle = document.getelementbyid("middle")
var middleimg = middle.getelementsbytagname("img")[0]
var contentright = document.getelementbyid("content-right");
var bigimg = contentright.getelementsbytagname("img")[0]
var glass = document.getelementbyid("glass");
//获取放大镜大小
var bigimgwidth = getstyle(bigimg,"width");
var bigimgheight = getstyle(bigimg,"height");
var contentrightwidth = getstyle(contentright,"width");
var contentrightheight = getstyle(contentright,"height");
var middlewidth = getstyle(middle,"width");
var middleheight = getstyle(middle,"height");
var glasswidth = contentrightwidth/bigimgwidth*middlewidth;
var glassheight = contentrightheight/bigimgheight*middleheight;
var middleborder = getstyle(middle,"border")
glass.style.width = glasswidth + "px";
glass.style.height = glassheight + "px";
for(var i =0;i<smallli.length;i++){
(function(index){
smallli[i].onmouseover = function(){
middleimg.src = "img/0"+index+".jpg";
bigimg.src = "img/00"+index+".jpg"
}
})((i+1));
}
middle.onmouseover = function(){
contentright.style.display = "block"
glass.style.display = "block"
middle.onmousemove = function(ev){
var evt = ev||event
var x = evt.x - content.offsetleft -glass.offsetwidth/2 + window.scrollx - middleborder
var y = evt.y - content.offsettop - glass.offsetheight/2 + window.scrolly - middleborder
if(x<=middleborder){
x = middleborder;
}
if(x>=middle.offsetwidth-glass.offsetwidth-middleborder){
x = middle.offsetwidth - glass.offsetwidth -middleborder;
}
if(y<=middleborder){
y = middleborder;
}
if(y>=middle.offsetheight-glass.offsetheight-middleborder){
y = middle.offsetheight - glass.offsetheight - middleborder;
}
glass.style.left = x + "px"
glass.style.top = y + "px"
bigimg.style.left = -x*middlewidth/glasswidth + middleborder*2 + "px"
bigimg.style.top = -y*middleheight/glassheight + middleborder*2 + "px"
console.log(x)
console.log(x*middlewidth/glasswidth)
}
middle.onmouseout = function(){
contentright.style.display = "none";
glass.style.display = "none";
}
}
function getstyle(obj,attr){//获取css属性
return (obj.currentstyle)?parseint(obj.currentstyle[attr]):parseint(getcomputedstyle(obj,false)[attr]);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。