滑动门效果

最新推荐文章于 2021-03-31 14:33:15 发布

刘小筛

最新推荐文章于 2021-03-31 14:33:15 发布

阅读量906

点赞数

分类专栏： Javascript 文章标签： html

本文链接：https://blog.csdn.net/LHJBK/article/details/52438198

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

滑动门效果

滑动门效果简言之就是当鼠标放在折叠的图片上时，图片显示全部。本着能用代码表达的想法坚决不用文字，哈哈，我们一起来看看如何用代码实现吧！

框架，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;
}
/* HTML5 display-role reset for older browsers */
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');
    //获取图片的list集合
    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++){
        //使用立即调用那个的函数表达式，为了获得不同的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);

     }
};