增加过渡样式 分离

Author: ZWkang

放大镜(over)/index.html

@@ -15,9 +15,7 @@
 		width: 300px;
 		height: 500px;
 		float: left;
-
 	}
-	
 	#main > .mark{
 		position: absolute;
 		width: 50px;
@@ -26,16 +24,20 @@
 		top: 0px;
 		z-index: 10000;
 		background-color: red;
-	         filter: alpha(opacity=0.5);
-	         opacity: 0.5;
+	          filter: alpha(opacity=.5);
+	          opacity: .5;
 	}
 	div[class=bigshow]{
 		float: left;
-		display: none;
+	          filter: alpha(opacity=0);
+	          opacity: 0;
+		position: relative;
+		z-index: -100;
 		background: url('big.jpg')  no-repeat;
 		width: 500px;
 		height: 500px;
 		background-position: 0% 0%;
+		transition:opacity .6s ease-in;
 	}
 
 
@@ -53,66 +55,77 @@
 	<script>
 
 		(function(){
-			var kuai = document.getElementById('main'),
-				mark = document.getElementsByClassName('mark')[0],
-				bigshow = document.getElementsByClassName('bigshow')[0];
-			function getPositionLeft(ele){
-						var actLeft = ele.offsetLeft;
-						var currentLeft = ele.offsetParent;
-						while(currentLeft!==null){
-							actLeft+=currentLeft.offsetLeft;
-							currentLeft = currentLeft.offsetParent;
-						}
-						return actLeft;
-					}
-			function getPositionTop(ele){
-						var actTop = ele.offsetTop;
-						var currentTop = ele.offsetParent;
-						while(currentTop!==null){
-							actTop +=currentTop.offsetTop;
-							currentTop = currentTop.offsetParent;
-						}
-						return actTop;
-			}
-			kuai.addEventListener('mousemove',function(event){
-				bigshow.style.display='block';
-				var pl = getPositionLeft(kuai);
-				var pt = getPositionTop(kuai);
-				var MaxPointX = 300-25;
-				var MaxPointY = 500-25;
 
-				var pointX = event.clientX-pl;
-				var pointY = event.clientY-pt;
-				// console.log(pointX,MaxPointX,pointY,MaxPointY);
-				if(pointX<25){
-					var blockX = 0;
-				}else if(pointX>MaxPointX){
-					var blockX = MaxPointX-25;
-				}else{
-					var blockX = pointX-25;
-				}
-				if(pointY<25){
-					var blockY = 0;
-				}else if(pointY>MaxPointY){
-					console.log('big more');
-					var blockY = MaxPointY-25;
-				}else{
-					var blockY = pointY-25;
+			function photoshow(option){
+				var kuai = option&&option._root||'main',
+					mark = option&&option._mark||'mark',
+					bigshow = option&&option._bigshow||'bigshow'
+				kuai = document.getElementById(kuai),
+				mark = document.getElementsByClassName(mark)[0],
+				bigshow = document.getElementsByClassName(bigshow)[0];
+			
+				function getPositionLeft(ele){
+							var actLeft = ele.offsetLeft;
+							var currentLeft = ele.offsetParent;
+							while(currentLeft!==null){
+								actLeft+=currentLeft.offsetLeft;
+								currentLeft = currentLeft.offsetParent;
+							}
+							return actLeft;
+						}
+				function getPositionTop(ele){
+							var actTop = ele.offsetTop;
+							var currentTop = ele.offsetParent;
+							while(currentTop!==null){
+								actTop +=currentTop.offsetTop;
+								currentTop = currentTop.offsetParent;
+							}
+							return actTop;
 				}
-				var kw = kuai.offsetWidth;
-				var kh = kuai.offsetHeight;
+				kuai.addEventListener('mousemove',function(event){
+					bigshow.style.opacity='1';
+					var pl,pt,MaxPointX,MaxPointY,pointX,pointY,blockX,blockY,km,kh
+					pl = getPositionLeft(kuai);
+					pt = getPositionTop(kuai);
+					MaxPointX = 300-25;
+					MaxPointY = 500-25;
 
+					pointX = event.clientX-pl;
+					pointY = event.clientY-pt;
+					// console.log(pointX,MaxPointX,pointY,MaxPointY);
+					if(pointX<25){
+						blockX = 0;
+					}else if(pointX>MaxPointX){
+						blockX = MaxPointX-25;
+					}else{
+						blockX = pointX-25;
+					}
+					if(pointY<25){
+						blockY = 0;
+					}else if(pointY>MaxPointY){
+						blockY = MaxPointY-25;
+					}else{
+						blockY = pointY-25;
+					}
+					kw = kuai.offsetWidth;
+					kh = kuai.offsetHeight;
 
 
-				bigshow.style.backgroundPosition = (pointX/kw).toFixed(2)*100+'% '+(pointY/kh).toFixed(2)*100+'%';
 
-				mark.style.left=blockX+'px';
-				mark.style.top=blockY+'px';
-			});
-			kuai.addEventListener('mouseout',function(){
-				bigshow.style.display='none';
-			})
+					bigshow.style.backgroundPosition = (pointX/kw).toFixed(2)*100+'% '+(pointY/kh).toFixed(2)*100+'%';
 
+					mark.style.left=blockX+'px';
+					mark.style.top=blockY+'px';
+				});
+				kuai.addEventListener('mouseout',function(){
+					bigshow.style.opacity='0';
+				})
+			}
+			photoshow({
+				_root:'main', //小图id
+				_mark:'mark', //进入小图后遮罩层类名
+				_bigshow:'bigshow' // 大图类名
+			});
 		})();
 
 	</script>