Original js to achieve magnifying glass effect-JS Tutorial-php.cn

Original js to achieve magnifying glass effect

小云云

Release： 2018-03-29 17:42:35

Original

1141 people have browsed it

This article mainly shares with you the original js to achieve the magnifying glass effect. It is mainly shared with you in the form of code. I hope it can help everyone.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/animate.js" type="text/javascript" charset="utf-8"></script>
		<style>
			*{margin: 0;padding:0}
			.mg{
				height:577px;
				width:352px;
				
				margin-left: 100px;
				margin-top:100px;
			}
			ul{
				height:68px;
				width:348px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left:0;
				top:0;
			}
			li{
				list-style: none;
				float:left;
				border:2px solid white;
			}
			li img{
				height:64px;
				width:50px;
			}
			li:hover{
				border: 2px solid red;
			}
			.mg-1{
				height:450px;
				width: 350px;
				margin-bottom: 10px;
				position:relative;
			}
			.mg-1>img{
				height:450px;
				width:350px;
			}
			.ri{
				height:540px;
				width:540px;
				position: absolute;
				left:372px;
				top:0;
				display: none;
				overflow: hidden;
			}
			.ri>img{
				position: absolute;
				left:0;
				right:0;
			}
			.mask{
				height:200px;
				width:200px;
				background: #FEDE4F;
				opacity:0.5;
				position: absolute;
				left:0;
				top:0;
				display: none;
			}
			.mg-1>p{
				height:30px;
				width: 30px;
				position: absolute;
				bottom:0;
				right:0;
			}
			.mg-2{
				height:68px;
				width:350px;
				margin-bottom:10px;
				position: relative;
			}
			i{
				display: block;
				height:32px;
				width:22px;
				overflow: hidden;
				
			}
			.pre{
				background: url(img/disabled-prev.png) no-repeat;
				position: absolute;
				left:0;
				top:50%;
				margin-top:-16px;
				cursor: pointer;	
			}
			.next{
				background: url(img/disabled-next.png) no-repeat;
				position: absolute;
				right:0;
				top:50%;
				margin-top:-16px;
				cursor: pointer;	
			}
			.mid{
				height:68px;
				width:290px;
				margin:0 auto;
				overflow: hidden;
				position: relative;
			}
		</style>
	</head>
	<body>
		<p class=&#39;mg&#39;>
			<p class=&#39;mg-1&#39;>
				<img class=&#39;imgx&#39; src="img/1a.jpg" alt="" />
				<p class=&#39;mask&#39;></p>
				<p class="ri"><img class=&#39;imgd&#39; src="img/5a601932N76367e55.jpg!cc_800x1026.jpg" alt="" /></p>
				<p><img src="img/sprite-magnify.png" alt="" /></p>
			</p>
			<p class="mg-2">
				<i class=&#39;pre&#39;></i>
				<p class=&#39;mid&#39;>
					<ul class="list">
					   <li><a href="#"> <img src="img/5a601932N76367e55.jpg!cc_50x64.jpg"/></a></li>
					   <li><a href="#"> <img src="img/5a601932N76367e55.jpg!cc_50x64.jpg"/></a></li>
					   <li><a href="#"> <img src="img/5a601934N2b80ec89.jpg!cc_50x64.jpg"/></a></li>
					   <li><a href="#"> <img src="img/5a601934N2b80ec89.jpg!cc_50x64.jpg"/></a></li>
					   <li><a href="#"> <img src="img/59c35a89N2e519554.jpg!cc_50x64.jpg"/></a></li>
					   <li><a href="#"> <img src="img/5a5f011fN971a30f5.jpg!cc_50x64.jpg"/></a></li>
					   
					</ul>
				</p>
				<i class=&#39;next&#39;></i>
			</p>
		</p>
		<script type="text/javascript">
		window.onload=function(){
				var  imgdWidth=350/200*540;
			var imgdHeight=450/200*540;
			var imgx=document.getElementsByClassName(&#39;imgx&#39;)[0];
			var imgd=document.getElementsByClassName(&#39;imgd&#39;)[0];
			imgd.style.width=imgdWidth+&#39;px&#39;;
			imgd.style.height=imgdHeight+&#39;px&#39;;
			var mark=document.getElementsByClassName(&#39;mask&#39;)[0];
			var mg1=document.getElementsByClassName(&#39;mg-1&#39;)[0];
			var mg=document.getElementsByClassName(&#39;mg&#39;)[0];
			var ri=document.getElementsByClassName(&#39;ri&#39;)[0];
			mg1.onmouseenter=function(){
				mark.style.display=&#39;block&#39;;
				ri.style.display=&#39;block&#39;;
				mg1.onmousemove=function(event){
					var event=event||window.event;
					mark.style.left=event.pageX-100-mg.offsetLeft+&#39;px&#39;;
					mark.style.top=event.pageY-100-mg.offsetTop+&#39;px&#39;;
					if((event.pageX-100-mg.offsetLeft)<=0){
						mark.style.left=0;
					}else if((event.pageX-100-mg.offsetLeft)>=150){
						mark.style.left=150+&#39;px&#39;;
					}
					
					if((event.pageY-100-mg.offsetTop<=0)){
						mark.style.top=0;
					}else if((event.pageY-100-mg.offsetTop>=250)){
						mark.style.top=250+&#39;px&#39;;
					}
					imgd.style.left=-parseInt(mark.style.left)*540/200+&#39;px&#39;;
					imgd.style.top=-parseInt(mark.style.top)*540/200+&#39;px&#39;;
					
					
				}
				
			}
			mg1.onmouseleave=function(){
				mark.style.display=&#39;none&#39;;
				ri.style.display=&#39;none&#39;;
			}
			var list=document.getElementsByClassName(&#39;list&#39;)[0];
			var imgs=list.getElementsByTagName(&#39;img&#39;);
			for(let i=0;i<imgs.length;i++){
				imgs[i].onmouseover=function(){
					
					imgx.src=&#39;img/&#39;+(i+1)+&#39;a.jpg&#39;;
				}
			}
			var pre=document.getElementsByClassName(&#39;pre&#39;)[0];
			var next=document.getElementsByClassName(&#39;next&#39;)[0];
			var left=getStyle(list,&#39;left&#39;);
			
		
				pre.onclick=function(){
					animate(list,{left:-60});
				}
			
				
				next.onclick=function(){
					animate(list,{left:0});
	
				}
		}
			
		</script>
	</body>
</html>

Copy after login

Related recommendations:

javascript imitation Taobao product details magnifying glass effect

How to use jquery to create a magnifying glass effect

JavaScript implementation of simple magnifying glass effect code

The above is the detailed content of Original js to achieve magnifying glass effect. For more information, please follow other related articles on the PHP Chinese website!