页面点击显示隐藏元素延时跳转

原创 2018年04月17日 15:53:08
<div id="mainer-list">
    <ul>
        <li>
            <span>
                <a href="http://localhost/index.php?ie=2-340-265-1">
                    <img src="http://localhost/images/image/201804/20180413104415_41467.png" border="0">
                </a>
            </span>
            <div class="hover-opacity">
                <a href="" target="_blank">
                    <div class="hover-inner">
                        <h4>测试</h4>
                        <span>&gt;</span>
                        <h6>副标题</h6>
                        <h5>2018-04-13</h5>
                    </div>
                </a>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(function(){
        $("#mainer-list ul li span a").click(function(e){
            e.preventDefault();
            aHref=$(this).attr("href");
            $(this).parents().children('.hover-opacity').show().parents().siblings().children('.hover-opacity').hide();
            setTimeout(function(){
               location.href=aHref;
            },3000)
        })
    })
</script>
/*Less写入*/
#mainer-list{
  width: 96%;
  margin: 0 auto;
  ul{
    li{
      width: 100%;
      margin: 18px auto;
      position: relative;
      span{
        display: block;
        width: 90%;
        height: 40%;
        margin: 0 auto;
        a{
          display: block;
          img{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
      .hover-opacity{
        display: none;
        width: 90%;
        height: 100%;
        position: absolute;
        top:0;
        left:5%;
        margin: 0 auto;
        a{
          display: block;
          width: 100%;
          height: 100%;
          background: #FEFEFE;
          margin: 0 auto;
          text-align:left;
          text-indent:42px;
          color: #2C2C2C;
          .hover-inner{
            width: 100%;
            h4,h5,h6{
              font-weight:500;
              color: #3a3a3a;
              line-height: 20px;
            }
            h4{
              font-size:14px;
              color: #3a3a3a;
              font-weight:500;
              padding-top:30px;
            }
            .h4{
              font-size:14px;
            }
            span{
              display: block;
              width: 100%;
              height: auto;
              color: #999;
            }
          }
        }
      }
    }
  }
}

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haonav/article/details/79975932

【吴刚】网页元素设计WUI零基础入门视频教程

本套教程循序渐进,深入浅出,全篇干货,系统化的通过网页元素、网页元素的应用、网页元素的用户交互使用规范,以及相关的技术实现方法等各方面内容。
  • 2018年03月23日 12:52

Android--延迟页面跳转实现方法

方法一: new Handler(new Handler.Callback() { //处理接收到的消息的方法 @Override ...
  • chaoyu168
  • chaoyu168
  • 2016-07-29 15:10:14
  • 5360

Android 实现延迟跳转的几种方法

Android 实现延迟跳转的几种方法
  • u011183394
  • u011183394
  • 2015-07-05 10:15:22
  • 977

jQuery实现元素交替显示隐藏

两种方法使用jQuery实现某个元素的隐藏与显示的交替进行
  • qq_29695701
  • qq_29695701
  • 2017-06-22 19:33:52
  • 493

1秒后跳转页面(延时setTimeout)

下面的代码将在1000毫秒后执行双引号中的函数,跳转页面。Code: "javascript">      setTimeout("location.href=http://www.bai...
  • shy_snow
  • shy_snow
  • 2010-07-12 14:56:00
  • 8710

微信小程序 —— 动态决定页面元素显示或隐藏的技巧

在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法1.先在元素的class中 class=’{{show?’tru...
  • Wu_shuxuan
  • Wu_shuxuan
  • 2017-10-13 13:39:00
  • 2406

网页中经常见到的,点击菜单栏,跳转到执行元素的位置

/** * 点击滑动制定位置 * @param scrolldom 点击的制定元素 * @param scrollTime 滑动的时间 */ ...
  • u013415353
  • u013415353
  • 2016-05-16 15:21:02
  • 1130

jquery锚点跳转+自动显示隐藏回到顶端代码

jquery锚点跳转+自动显示隐藏回到顶端代码
  • bzxcl
  • bzxcl
  • 2016-06-03 10:14:18
  • 984

记录angular遍历的元素隐藏显示修改

html> lang="en"> charset="UTF-8"> Title src="js/angular/angular.min.js" type="text/java...
  • qq_38395165
  • qq_38395165
  • 2017-11-02 15:33:11
  • 273

mui 控制页面标签显示隐藏 调回上一页重新加载数据

设置元素显示与隐藏:.mui-visibility默认为设置元素可见,.mui-hidden默认为设置元素隐藏。 //设置加载样式隐藏 document.getElementById('...
  • yangsitong1314
  • yangsitong1314
  • 2017-11-28 15:37:52
  • 602
收藏助手
不良信息举报
您举报文章:页面点击显示隐藏元素延时跳转
举报原因:
原因补充:

(最多只允许输入30个字)