<!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. 【HDOJ】1134 Game of Connections

    Catlan数. /* 1134 */ import java.util.Scanner; import java.math.BigInteger; /* Catalan: (1) h(n) = h( ...

  2. GCC依赖库顺序问题

    今天在把linux下做的ipmsg移植到windows过程中,因为包含了一个开源库SimpleSocket,而这个库又引用了winsock2,没太注意就写下了下面的makefile: g++ -o t ...

  3. [Design Pattern] Adapter Pattern 简单案例

    Adapter Pattern, 即适配器模式,用于连接两个不兼容的接口,属于结构类的设计模式. 或者叫做,转换器模式. 下面是一个转换器模式简单案例. 假设已有 AudioPlayer 专门播放 m ...

  4. mysql启动停止,一台服务器跑 多个mysql数据库

    一.以非特权用户运行MySQL服务器在讨论如何启动MySQL服务器之前,让我们考虑一下应该以什么用户身份运行MySQL服务器.服务器可以手动或自动启动.如果你手动启动它, 服务器以你登录Unix(Li ...

  5. oracle-TNS是什么？

    oracle 的 TNS 是什么的缩写?Transparent Network Substrate(透明网络底层,即无论底层的网络层用什么协议对于上层的应用层都是透明的,也即上层的应用层不用关心底层的 ...

  6. Sublime Text 2.0.2 注册码

    Sublime Text 2.0.2 注册码 直接输入注册码就可以了----- BEGIN LICENSE -----Andrew WeberSingle User LicenseEA7E-85560 ...

  7. Ubuntu Server安全Webserver搭建流程

    之前整过CentOS.整了Ubuntu才发现,Ubuntu简单多了--不知道性能相比又怎样. 以Ubtuntu 14.04为例.记录一下搭建流程. 一.SSHserver 第一件事当然是ssh,默认安 ...

  8. [转] 浅谈 C++ 中的 new/delete 和 new[]/delete[]

    转:http://www.cnblogs.com/hazir/p/new_and_delete.html 在 C++ 中,你也许经常使用 new 和 delete 来动态申请和释放内存,但你可曾想过以 ...

  9. 《photoshop cc 新功能 生成图像资源》智能切图逆天啦！

    作为一个前端工程师切图这个步骤是必不可少的,方式多种多样,有和切图工具的,也有是把要切的图层元素或者组直接新建保存成文件的,现在photoshop cc2015,可以让你轻松切图,摆脱繁琐的切图步骤. ...

  10. 在winform程序中实现按照不同的角色或用户展现不同的页面

    SqlConnection cn = new SqlConnection();             cn.ConnectionString = "Data Source=192.168. ...