sublime里js代码高亮用什么插件啊
sublime里js代码高亮用什么插件啊
4 回答
<!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>
*{
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;
}
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();
// }
// }
};举报
0/150
提交
取消
