jsでtaobao虫眼鏡の効果を作ります。
この文章の実例は皆さんに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>