js鼠标滑动图片显示隐藏效果

时间：2023-05-01 09:18:08
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

    <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码-->

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

        <!--当前页面的三要素-->

        <title>js滑动图片显示和隐藏效果</title>

        <meta name="Keywords" content="js滑动,图片显示">

        <meta name="description" content="描述">

        <!--css 内部样式 , js-->

        <style type="text/css">

            *{margin:0px; padding:0px;}

            /*属性:值; width:300px; 像素 */

            #News{width:300px; height:305px;border:1px solid #ddd;

            margin:50px auto;}

            /*list-style-type:none; 去掉前面的圆点*/

            #News ul li{list-style-type:none;padding:0px 10px 0px 10px;}

            #News ul li a{color:#2d2d2d; font-family:"微软雅黑";font-size:14px; text-decoration:none;/*去掉下划线*/}

            #News ul li a:hover{color:#eb1c24;text-decoration:underline;}

            #News ul li span a{color:#;}

            #News ul li span a:hover{color:#eb1c24;}

            #News ul li p{line-height:30px;}

            #News ul li img{display:none;/*隐藏图片*/}

            #News ul li img.xs{display:block;/*显示第一图片*/}

            #News ul li.bg{background:url("images/bg.png"); padding-bottom:15px;}

            #News ul li span.hover a{color:#eb1c24;}

        </style>

    </head>

    <body>

<!--div盒子模型，宽度，高度 放内容-->

    <div id="News">

        <ul>

            <li class="bg">

                <p><span class="hover"><a href="#">[时装频道]</a></span>

                   <a href="#">2014秋冬巴黎时装周</a></p>

                    <img src="data:images/1.jpg" class="xs"/>

            </li>

            <li><p><span><a href="#">[男装频道]</a></span>

                    <a href="#">穿出Street Fashion</a></p>

                    <img src="data:images/2.jpg"/>

            </li>

            <li><p><span><a href="#">[时装频道]</a></span>

                    <a href="#">2014秋冬巴黎时装周</a></p>

                    <img src="data:images/3.jpg"/>

            </li>

            <li>

                <p>

                    <span><a href="#">[时装频道]</a></span>

                    <a href="#">2014秋冬米兰时装周</a>

                </p>

                    <img src="data:images/4.jpg"/>

            </li>

        </ul>

    </div>

    <!-- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> -->

<script type="text/javascript">

window.onload=function(){

    var oNews = document.getElementById('News');

    var oLi = oNews.getElementsByTagName('li');

    var oimg = document.getElementsByTagName('img');

    var ospan = document.getElementsByTagName('span');

    for(var i=;i<oLi.length;i++){

        oLi[i].index=i;

        oLi[i].onmouseover=function(){

            for(var i=;i<oLi.length;i++){

                oLi[i].className='';

                oimg[i].style.display='none';

                ospan[i].className='';

            }

            this.className='bg';

            if(this.className='bg'){

                ospan[this.index].className='hover';

                oimg[this.index].style.display='block';

            }

        }

    }

}

</script>

    </body>

</html>

相关文章