欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 图片效果 > jquery仿腾讯视频鼠标滑过图片滑动动画特效

jquery仿腾讯视频鼠标滑过图片滑动动画特效

jquery仿腾讯视频鼠标滑过图片滑动动画特效

关键词:滑动,鼠标滑过,动画,兼容ie8,jquery滑动门,滑动动画,图片效果,jquery动画,仿腾讯

描述:这是一款使用jquery来模仿腾讯视频鼠标滑过图片滑动动画的特效。该特效使用jquery的animate动画函数来实现,可以在鼠标滑过指定的图片时,使对应的隐藏图片滑动展开,效果非常炫酷。

简要教程

这是一款使用jquery来模仿腾讯视频鼠标滑过图片滑动动画的特效。该特效使用jquery的animate动画函数来实现,可以在鼠标滑过指定的图片时,使对应的隐藏图片滑动展开,效果非常炫酷。

使用方法

在页面底部,<body>标签结束之前,引入jquery文件。

<script src="path/to/js/jquery.min.js"></script>
                
HTML结构

该图片滑动动画特效的基本HTML结构如下:

<div class="wamp">
      <div class="box_w">
          <dl>
              <!--缩略图-->
              <dt><a><img src="img/1.jpg"/></a></dt>
              <!--隐藏的大图-->
              <dd><a><img src="img/6.jpg"/></a></dd>
            </dl>
            <dl>
              <dt><a><img src="img/2.jpg"/></a></dt>
              <dd><a><img src="img/7.jpg"/></a></dd>
            </dl>
            <dl>
              <dt><a><img src="img/3.jpg"/></a></dt>
              <dd><a><img src="img/9.jpg"/></a></dd>
            </dl>
            <dl>
              <dt><a><img src="img/4.jpg"/></a></dt>
              <dd><a><img src="img/8.jpg"/></a></dd>
            </dl>
      </div>
</div>            
                
CSS样式

为该特效添加下面的CSS样式:

*{ margin:0px; padding:0px;}
.wamp{ width:1000px; margin:50px auto; display:block; background:#fff; height:600px; 
             position:relative; overflow:hidden;}
.box_w{ width:1000px;white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;}
.box_w dl{ width:250px;white-space:nowrap;font-size:0px; overflow:hidden; 
                 display:inline-block; cursor:pointer;}
.box_w dt{ width:250px; height:105px;display:inline-block; }
.box_w dd{ width:744px; height:95px;display:inline-block; margin-top:10px;}
.box_w dd img{ width:100%; height:95px; display:inline-block;}
.box_w a{ display:inline-block;}
                
JavaScript

在页面DOM元素加载完毕之后,使用下面的方法来为容器绑定鼠标进入和离开事件,使鼠标进入时相应图片可以展开,离开时又收缩回去。

$(function(){
  $(".box_w dl").mouseover(function(){
    var aa=$(this).index();
    var aac=-aa*250
    $(this).parent(".box_w").stop().animate({left:aac},600)
    $(this).stop().animate({width:"1000px"},600).siblings("dl").stop().animate({width:"250px"},600);
  })
  $(".box_w dl").mouseout(function(){
    $(this).parent(".box_w").stop().animate({left:"0px"},600)
    $(this).stop().animate({width:"250px"},600)
  })
})                  
                

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_tupian/22.html

 在线演示  免费下载
编号:201611200000000022
大小:0.27MB
上传时间:2016-11-24 16:34
素材由用户"lxc20110209"上传分享。

标签

最新推荐素材

与jquery仿腾讯视频鼠标滑过图片滑动动画特效相关的素材

.