sublime里js代码高亮用什么插件啊

个回答

拉格朗日之都

2016-03-13 16:03:42

以上是案例完整的代码，加了css3动画，鼠标离开时可以恢复到原始位置(注释部分)。

0

拉格朗日之都: 2016-03-13 16:02:32

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑动门特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<img src="images/door1.png" alt="door1" title="door1">
<img src="images/door2.png" alt="door2" title="door2">
<img src="images/door3.png" alt="door3" title="door3">
<img src="images/door4.png" alt="door4" title="door4">
</div>
</body>
<script src="js/script.js"></script>
</html>

拉格朗日之都: 2016-03-13 16:02:04


*{
	margin:0;
	padding:0;
}
#container{
	position:relative;
	height: 477px;
	margin:20px auto;
	border-bottom:1px solid #d9d9d9;
	border-right:1px solid #d9d9d9;
	overflow: hidden;
}

#container img{
	position: absolute;
	left:0;
	display:block;
	border-right: 1px solid #d9d9d9;
	transition: all 0.5s;
}
#container img:nth-child(1){
	border-left: 1px solid #d9d9d9;
}

拉格朗日之都: 2016-03-13 16:01:25

window.onload = function(){
	//获取盒子对象
	var box = document.getElementById('container');
	//获取图片对象
	var imgs = box.getElementsByTagName('img');

	var imgWidth = imgs[0].offsetWidth; //单张图片的宽度
	var exposeWidth = 160;				//隐藏门露出宽度
	var boxWidth = imgWidth+exposeWidth*(imgs.length-1);	//图片盒子宽度
	box.style.width = boxWidth+'px';	

	//设置每道门的初始位置
	function setImgsPos(){
		for(var i=1;i<imgs.length;i++){
			imgs[i].style.left = imgWidth + exposeWidth*(i-1)+'px';
		}
	}	
	setImgsPos();

	// 计算每张图片移动的距离
	var translate = imgWidth - exposeWidth;	
	//为每道门绑定事件
	for(var i=0;i<imgs.length;i++){		
		(function(i){
			imgs[i].onmouseover = function() {
				setImgsPos();
				//打开门
				for (var j = 1;j<=i;j++) {
					imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';	//10代表十进制
				}
			};

		})(i);
	}

	//鼠标移出后复位
	// for(var i=0;i<imgs.length;i++){		
	// 	imgs[i].onmouseleave = function(){
	// 		setImgsPos();
	// 	}
	// }
};