zoukankan      html  css  js  c++  java
  • js鼠标滑动图片显示隐藏效果

    <!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;}
                /*属性:值; 300px; 像素 */
                #News{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:#726168;}
                #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="images/1.jpg" class="xs"/>
                </li>
    
                <li><p><span><a href="#">[男装频道]</a></span>
                        <a href="#">穿出Street Fashion</a></p>
                        <img src="images/2.jpg"/>
                </li>
    
                <li><p><span><a href="#">[时装频道]</a></span>
                        <a href="#">2014秋冬巴黎时装周</a></p>
                        <img src="images/3.jpg"/>
                </li>
    
                <li>
                    <p>
                        <span><a href="#">[时装频道]</a></span>
                        <a href="#">2014秋冬米兰时装周</a>
                    </p>
                        <img src="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=0;i<oLi.length;i++){
            oLi[i].index=i;
            oLi[i].onmouseover=function(){
                for(var i=0;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>
    人如代码,规矩灵活;代码如诗,字句精伦。
  • 相关阅读:
    css基础--Display(显示) and Visibility(可见性)and position (定位)
    css3基础--Margin(外边距)&&padding(外边距)
    前端求职-js
    前端求职-html&css
    css基础3--box module&Border
    css基础-font&link&list属性
    值得学习的PHP
    c++构造函数浅析
    变量定义原则
    函数
  • 原文地址:https://www.cnblogs.com/xinlinux/p/3964944.html
Copyright © 2011-2022 走看看