用js制作淘宝放大镜效果
更新时间：2020年10月28日 11:30:42 作者：万花果子
这篇文章主要为大家详细介绍了js制作淘宝放大镜效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js简单实现点击左右运动的方法,实例分析了javascript实现左右运动的相关要点与技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
本文是脚本之家小编日常整理些关于js兼容性问题，及IE与Firefox等常用浏览器的兼容性分析，对js浏览器兼容性相关知识感兴趣的朋友一起学习吧2016-03-03
Javascript也是面向对象的语言，但它是一种基于原型Prototype的语言，而不是基于类的语言。接下来通过本文给大家介绍Javascript中的Prototype到底是啥的相关知识，感兴趣的朋友参考下2016-02-02
这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了javascript 解决浏览器不支持的问题的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了JavaScript类型系统之布尔Boolean类型详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
下面小编就为大家带来一篇WebStorm ES6 语法支持设置&babel使用及自动编译(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JS数组转字符串实现方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了微信小程序如何播放腾讯视频的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论