生活随笔
收集整理的這篇文章主要介紹了
滑动门效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
滑動門效果
滑動門效果簡言之就是當鼠標放在折疊的圖片上時，圖片顯示全部。本著能用代碼表達的想法堅決不用文字，哈哈，我們一起來看看如何用代碼實現吧！
框架，HTML代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑動門效果</title><link rel="stylesheet" href="styles/reset.css" /><link rel="stylesheet" href="styles/slidingdoors.css" /><script type="text/javascript" src="scripts/slidingdoors.js"></script></head><body><div id="container"> <img src="images/ty1.png" alt="1080p神器" title="1080p神器" />
//圖片路徑要寫對<img src="images/ty2.png" alt="1080p神器" title="1080p神器" /><img src="images/ty3.png" alt="1080p神器" title="1080p神器" /><img src="images/ty4.png" alt="1080p神器" </html>
2.樣式，CSS代碼
這是reset.css.可以直接在網上下載，目的是重置頁面所
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {display: block;
}
body {line-height: 1;
}
ol,
ul {list-style: none;
}
blockquote,
q {quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {content: '';content: none;
}
table {border-collapse:rder-spacing: 0;
}border-collapse:
collspac
}
例體CSS樣式，如下:
3.行為，JS代碼
window.onload=
function(){var box=document.getElementById(
'container');
var imgs=box.getElementsByTagName(
'img');
var imgWidth=imgs[
0].offsetWidth;alert(
"imgWidth");
var exposeWidth=
60;
var boxWidth=imgWidth+(imgs.length-
1)*exposeWidth;box.style.width=boxWidth+
'px';
function setImgsPos(){for(
var i=
1,len=imgs.length;i<len;i++){imgs[i].style.left=imgWidth+exposeWidth*(i-
1)+
'px';}}setImgsPos();
var translate=imgWidth-exposeWidth;
for(
var i=
0,len=imgs.length;i<len;i++){(
function(i){imgs[i].onmouseover=
function(){setImgsPos();
for(
var j=
1;j<=i;j++){imgs[j].style.lft=
parseInt(imgs[j].style.left,
10)-tra`
`
`
`
`sla
'px';}};})(i);}
};
總結
以上是生活随笔為你收集整理的滑动门效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
