<!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. Qt: 网络编程之UDP（理论+实例）

    http://blog.csdn.net/rl529014/article/details/52888525

  2. haskell趣学指南笔记1

    网址:http://learnyouahaskell.com/ 中文版:http://learnyouahaskell-zh-tw.csie.org/zh-cn/ready-begin.html 在 ...

  3. 【中国剩余定理】【容斥原理】【快速乘法】【数论】HDU 5768 Lucky7

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5768 题目大意: T组数据,求L~R中满足:1.是7的倍数,2.对n个素数有 %pi!=ai  的数 ...

  4. 跨站脚本（XSS）

    跨站脚本: cross-site scripting或者XSS, 即攻击者向目标Web站点注入HTML标签或者脚本 如果网站没有通过移除任何嵌入的HTML标签来消毒,那么web页面很容易受到跨站脚本攻 ...

  5. ruby迭代起基础

    “循环”会用在程序中的各种地方.而在循环的地方善用“迭代器”,则是熟练进行Ruby程序设计的重要关键. 不过,迭代器确实有比较抽象的地方,语法也有点怪异(尤其是yield的用法),光是依靠文字说明.看 ...

  6. Hdu 1856（离散化+并查集）More is better

    题意:一些人遵循朋友的朋友也是朋友原则,现在找出最大的朋友圈, 因为人的编号比较大,但是输入的数据最多是10w行,所以可得出最多也就20w人,所以可以进行一下离散化处理,这样数据就会毫无压力 //// ...

  7. 安装apache重启的时候，报错端口被占用，错误1

    在cmd中执行以下命令来重新分配. netsh winsock reset. 还不行的话可以重启电脑,再不行就算apache配置文件错误.

  8. VS中批量删除cs代码中的#region和#endregion

    Visual Studio中如何批量删除cs代码中的#region和#endregion,不删除它们中间的代码,只删除这两个标记及标记的注解的方法.Vs中提供了很强大的文本查找与替换功能,简单的替换只 ...

  9. Linux下multipath多路径配置

    一.什么是多路径 普通的电脑主机都是一个硬盘挂接到一个总线上,这里是一对一的关系.而到了有光纤组成的SAN环境,或者由iSCSI组成的IPSAN环境,由于主机和存 储通过了光纤交换机或者多块网卡及IP ...

  10. Environment Configuration Files

    Environment Configuration Files When a user logs in, an environment is created for that user automat ...