zoukankan      html  css  js  c++  java
  • 通过css鼠标事件简单实现京东放大镜效果

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="referrer" content="no-referrer">
    		<title></title>
    		<style type="text/css">
    			.zoom{
    				 800px;
    				height: 250px;
    				display: flex;
    				margin: 0 auto;
    			}
    			.left{
    				 400px;
    				height: 250px;
    				background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
    				background-size: 400px 250px;
    				position: relative;
    			}
    			.shade{
    				display: none;
    				 200px;
    				height: 125px;
    				background-color: rgba(255,255,0,.5);
    				position: absolute;
    			}
    			.right{
    				display: none;
    				 400px;
    				height: 250px;
    				background-image:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F57bbdd4add0f3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625667572&t=ee98422ddcd780a23692e18f809a3aaa");
    				background-size: 800px 500px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<!-- 放大镜 -->
    		<div class="zoom">
    			<div class="left">
    				<div class="shade"></div>
    			</div>
    			<div class="right"></div>
    		</div>
    		
    		<script type="text/javascript">
    			var zoom = document.querySelector(".zoom");
    			var left = document.querySelector(".left");
    			var right = document.querySelector(".right");
    			var shade = document.querySelector(".shade");
    			
    			
    			/* 鼠标移入遮罩显示 */
    			left.onmouseenter = function(){
    				shade.style.display = "block";
    				right.style.display = "block"
    			}
    			/* 鼠标移出遮罩影藏 */
    			left.onmouseleave =function(){
    				shade.style.display = "none"
    				right.style.display = "none"
    			}
    			
    			/* 监听鼠标在left上的移动 */
    			left.onmousemove = function(event){
    				// console.log(event)
    				var x = event.pageX - 100 - zoom.offsetLeft;
    				var y = event.pageY - 62.5 - zoom.offsetTop;
    				if (x < 0) {
    					x = 0;
    				} 
    				if(x > 200){
    					x = 200
    				}
    				if(y<0){
    					y=0;
    				}
    				if(y>125){
    					y=125;
    				}
    				shade.style.left = x + "px";
    				shade.style.top = y + "px";
    				
    				right.style.backgroundPositionX = -2*x + "px";
    				right.style.backgroundPositionY = -2*y + "px";
    			}
    			
    		</script>
    	</body>
    	
    </html>
    
    
  • 相关阅读:
    Elasticsearch学习之SearchRequestBuilder的query类型
    Elasticsearch学习之SearchRequestBuilder常用方法说明
    Elasticsearch学习之head插件安装
    SpringBoot学习之Helloworld
    Http Header里的Content-Type
    柯里化
    VoltDB
    Docker
    PHP框架
    转载: 让我们聊聊Erlang的nif中资源的安全释放
  • 原文地址:https://www.cnblogs.com/uzi666/p/14861036.html
Copyright © 2011-2022 走看看