zoukankan      html  css  js  c++  java
  • 放大镜效果

    用原生js,实现放大镜效果

    css

    	<style>
    		*{
    			margin:0;
    			padding:0;
    		}
    		#box{
    			350px;
    			height:350px;
    			border:1px solid #000;
    			margin:100px;
    			position:relative;
    		}
    		#big{
    			400px;
    			height:400px;
    			border:1px solid #000;
    			position:absolute;
    			top : 0;
    			left : 360px;
    			overflow:hidden;
    			display:none;
    		}
    		#mask{
    			175px;
    			height:175px;
    			background:pink;
    			opacity:0.3;
    			position:absolute;
    			top:0;
    			left:0;
    			cursor:move;
    			display:none
    		}
    		#small{
    			position:relative;
    		}
    		#bigImg{
    			position:absolute;
    			left:0;
    			top:0;
    		}
    	</style>
    

      html

    <div id="box">
    	<div id="small">
    		<img src="images/iphone.jpg" alt="" id="smallImg"/>
    		<div id="mask"></div>
    	</div>
    	<div id="big">
    		<img src="images/iphone_big.jpg" alt="" id="bigImg"/>
    	</div>
    </div>
    

      js

    <script>
    	var small = document.getElementById("small");
    	var smallImg = document.getElementById("smallImg");
    	var mask = document.getElementById("mask");
    	var big = document.getElementById("big");
    	var bigImg = document.getElementById("bigImg");
    	var box = document.getElementById("box");
    	small.onmouseover = function(){
    		mask.style.display = "block";
    		big.style.display = "block";
    	}
    	small.onmouseout = function(){
    		mask.style.display = "none";
    		big.style.display = "none";
    	}
    	small.onmousemove = function(e){
    		var e = e || event;
    		var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2 ;
    		var y = e.pageY - box.offsetTop - mask.offsetHeight / 2 ;	
    		var maxL = box.offsetWidth - mask.offsetWidth;
    		var maxT = box.offsetHeight - mask.offsetHeight;
    		x = x < 0 ? 0 : x > maxL ? maxL : x;
    		y = y < 0 ? 0 : y > maxT ? maxT : y;
    		mask.style.left = x + "px";
    		mask.style.top = y + "px";
    		
    		var bigL = x * (bigImg.offsetWidth - big.offsetWidth) / (box.offsetWidth - mask.offsetWidth);
    		var bigT = y * (bigImg.offsetHeight - big.offsetHeight) / (box.offsetHeight - mask.offsetHeight);
    		bigImg.style.left = - bigL + "px";
    		bigImg.style.top = - bigT + "px";
    	}
    </script>
    

      

  • 相关阅读:
    Python3 日期与时间戳相互转换
    PHP 二维数组排序保持键名不变
    C# Command命令(行为型模式)+队列 实现事务,带异步命令重试机制和生命周期
    领域驱动系列五模型驱动设计的构造块
    领域驱动系列四之模型驱动
    领域驱动系列三
    领域驱动系列二策略模式的应用
    领域驱动系列一基本概念介绍
    Redis学习系列七分布式锁
    Redis学习系列六ZSet(有序列表)及Redis数据结构的过期
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11906889.html
Copyright © 2011-2022 走看看