生活随笔
收集整理的這篇文章主要介紹了
滑动门效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
滑動(dòng)門效果
滑動(dòng)門效果簡(jiǎn)言之就是當(dāng)鼠標(biāo)放在折疊的圖片上時(shí)，圖片顯示全部。本著能用代碼表達(dá)的想法堅(jiān)決不用文字，哈哈，我們一起來看看如何用代碼實(shí)現(xiàn)吧！
框架，HTML代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑動(dòng)門效果</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神器" />
//圖片路徑要寫對(duì)<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.可以直接在網(wǎng)上下載，目的是重置頁(yè)面所
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);}
};
總結(jié)
以上是生活随笔為你收集整理的滑动门效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
