<!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. Delphi应用程序的调试（十）调试器选项（在IDE中不要使用异常）

    可在两个级别上设置调试选项:工程级和环境级.在前面的讲解中讲解了工程级调试选项,通过主菜单[Project | Options…]打开如下对话框: 可在Debugger Options对话框中设置全局 ...

  2. Sublime一些设置

    很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直在搜索,无果. ...

  3. 【搬运】一分钟快速入门OpenStack

      一.它是什么,能干什么   想认识一个事物,必须先弄明白它是什么,能干什么.   首先说一下,openstack是一个搭建云平台的一个解决方案,说他不是个软件,但是我觉得说是一个软件,能够让初学者 ...

  4. 铁通、长宽网络支付时“签名失败”问题分析及解决方案　　[88222001]验证签名异常:FAIL[20131101100002-142]

    原文地址:http://bbs.tenpay.com/forum.php?mod=viewthread&tid=13723&highlight=%CC%FA%CD%A8 如果你的是铁通 ...

  5. O - Steady Cow Assignment - POJ 3189（多重匹配+枚举）

    题意:有N头奶牛,M个牛棚,每个牛棚都有一个容量,并且每个牛对牛棚都有一个好感度,现在重新分配牛棚,并且使好感觉最大的和最小的差值最小. 分析:好感度貌似不多,看起来可以枚举一下的样子,先试一下把 注 ...

  6. XSLT学习

    XSL 语言 XSL(eXtensible Stylesheet Language)是可扩展样式表语言,是一种用于以可读格式呈现 XML(标准通用标记语言的子集)数据的语言. XSL与xml CSS ...

  7. linux下安装mysql-community后起不来

    wget http://repo.mysql.com/mysql-community-release-el6-5.noarch.rpmrpm -ivh http://repo.mysql.com/my ...

  8. maven下载jta失败，自己本地安装jta库

    mvn install:install-file -Dfile=./jta-1_0_1B-classes.zip -DgroupId=javax.transaction -DartifactId=jt ...

  9. Java并发编程：ThreadLocal

    Java并发编程:深入剖析ThreadLocal   Java并发编程:深入剖析ThreadLocal 想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用 ...

  10. redis: 6379端口下set值时出现 CLUSTERDOWN The cluster is down

    1.使用./redis-trib.rb check 192.168.242.134:6379检查出现图中的错误 2.在redis安装目录的bin下执行下列命令去cluster meet 另一个端口为7 ...