<!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>

js鼠标滑动图片显示隐藏效果的更多相关文章

  1. 完整说明使用SpringBoot+js实现滑动图片验证

    常见的网站验证方式有手机短信验证,图片字符验证,滑块验证,滑块图片验证．本文主要讲解的是滑块图片验证的实现流程．包括后台和前端的实现． 实现效果 使用的API java.awt.image.Buffe ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  4. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  6. Dynamics CRM 365 不用按钮工具，直接用js脚本控制按钮的显示隐藏

    Dynamics CRM 365 不用按钮工具,直接用js脚本控制按钮的显示隐藏: try { // 转备案按钮 let transferSpecialRequestButton = parent.p ...

  7. js控制TR的显示隐藏

    在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓 下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:r ...

  8. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

  9. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

随机推荐

  1. org.quartz.utils.UpdateChecker Checking for available updated version of Quartz..

    <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</ ...

  2. Graph Search图谱搜索

    来自百度百科的解释: Graph Search为2013年1月16日,Facebook首席执行官马克·扎克伯格(Mark Zuckerberg)在门罗帕克公司总部召开的新闻发布会上宣布推出社交搜索工具 ...

  3. 【转】（DT系列四）驱动加载中, 如何取得device tree中的属性

    原文网址:http://www.cnblogs.com/biglucky/p/4057488.html 本文以At91rm9200平台为例,从源码实现的角度来分析驱动加载时,Device tree的属 ...

  4. 在Visual Studio中使用AStyle

    最近在做一个C++项目,我们使用了一个叫做AStyle的插件来做代码格式化. 下载方式1:通过Visual Studio下载 启动Visual Studio,以下简称VS: 英文版VS:VS主菜单 & ...

  5. bzoj1503 [NOI2004]郁闷的出纳员（名次树+懒惰标记）

    1503: [NOI2004]郁闷的出纳员 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 8705  Solved: 3027[Submit][Statu ...

  6. Objective-C中变量采用@property的各个属性值的含义

    我们在OC中定义变量,可以自己来定义变量的setter方法来设置变量值,用getter方法来获取变量值.但是当变量数量增多时,还采用手动添加setter/getter方法来操作变量,就会使得程序代码量 ...

  7. hdu 1292分组（dp）

    考虑一支队伍分组的数目,如果这支队伍有n个人,就有n种情况分别是一个组,两个组.... i个人分成j组有两种方式,一种是i-1个人分成j-1组之后,第i个人独立分成一组,另一种情况是i-1个人分成j组 ...

  8. [置顶] 【Git入门之九】解决冲突

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12309531 1.多人协作冲突 如果多人同时修改了同一个文件,那会出现什么样 ...

  9. Effective C++ 第二版 40)分层 41)继承和模板 42)私有继承

    条款40 通过分层来体现"有一个"或"用...来实现" 使某个类的对象成为另一个类的数据成员, 实现将一个类构筑在另一个类之上, 这个过程称为 分层Layeri ...

  10. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...