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>
    

      

  • 相关阅读:
    blocksit.js插件瀑布流
    防止点浏览器返回按钮,返回上一页的JS方法
    jquery 换肤功能
    HTML5获取地理位置
    百度api定位
    网站如何做到完全不需要使用jQuery
    让网页变成灰色代码
    利用html标签限制搜索引擎对网站的抓取收录
    高清ICON SVG解决方案
    加载动画
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11906889.html
Copyright © 2011-2022 走看看