当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="path/to/js/jquery.min.js"></script>
```
#####  HTML结构
该图片滑动动画特效的基本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样式：

```html
*{ 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元素加载完毕之后，使用下面的方法来为容器绑定鼠标进入和离开事件，使鼠标进入时相应图片可以展开，离开时又收缩回去。

```html
$(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)
  })
})    
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果