jQuery实现图片滑动效果


Posted in Javascript onMarch 08, 2017

思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数。

如图所示:

jQuery实现图片滑动效果

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      width: 1000px;
      margin: 0 auto;
    }
    li{
      cursor: pointer;
      border: 1px solid #fff;
      display: inline-block;
      width: 198px;
      height: 250px;
      float: left;
      overflow: hidden;
      background-color: #f7f7f7;
      position: relative;
    }
    li .fade{
      font-family: "微软雅黑";
      display: none;
      width: 320px;
      height: 270px;
      background: #090;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 19;
    }
    li .img1{
      width: 110px;
      height: 110px;
      text-align: center;
      position: absolute;
      top: 22px;
      right: 41px;
      z-index: 99;
    }
    li .img2{
      width: 110px;
      height: 110px;
      text-align: center;
      position: absolute;
      top: 22px;
      left: -110px;
      z-index: 99;
    }
    li .txt1{
      width: 198px;
      height: 100px;
      color: #999999;
      position: absolute;
      top: 145px;
      left: 0px;
      z-index: 99;
      text-align: center;
    }
    li .txt2{
      width: 198px;
      height: 100px;
      color: #a9cf4f;
      position: absolute;
      top: 145px;
      right: -240px;
      z-index: 99;
      text-align: center;
    }
  </style>
  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="main">
  <ul>
    <li>
      <div class="fade"></div>
      <div class="img1"><img src="img/1.png"></div>
      <div class="img2"><img src="img/1-1.png"></div>
      <div class="txt1">啦啦啦啦啦</div>
      <div class="txt2">是是是是是</div>
    </li>
    <li>
      <div class="fade"></div>
      <div class="img1"><img src="img/2.png"></div>
      <div class="img2"><img src="img/2-2.png"></div>
      <div class="txt1">啦啦啦啦啦</div>
      <div class="txt2">是是是是是</div>
    </li>
    <li>
      <div class="fade"></div>
      <div class="img1"><img src="img/1.png"></div>
      <div class="img2"><img src="img/1-1.png"></div>
      <div class="txt1">啦啦啦啦啦</div>
      <div class="txt2">是是是是是</div>
    </li>
    <li>
      <div class="fade"></div>
      <div class="img1"><img src="img/2.png"></div>
      <div class="img2"><img src="img/2-2.png"></div>
      <div class="txt1">啦啦啦啦啦</div>
      <div class="txt2">是是是是是</div>
    </li>
  </ul>
</div>
<script>
  $(function(){
    $("ul li").hover(function(){
      $(this).children().stop(false,true);
      $(this).find(".fade").fadeIn("slow");
      $(this).find(".img1").animate({right:-110},400);
      $(this).find(".img2").animate({left:41},400);
      $(this).find(".txt1").animate({left:240},400);
      $(this).find(".txt2").animate({right:0},400);
    },function(){
      $(this).children().stop(false,true);
      $(this).find(".fade").fadeOut("slow");
      $(this).find(".img1").animate({right:41},400);
      $(this).find(".img2").animate({left:-110},400);
      $(this).find(".txt1").animate({left:0},400);
      $(this).find(".txt2").animate({right:-240},400);
    })
  })
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 #Javascript
JS实现根据密码长度显示安全条功能
Mar 08 #Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
You might like
PHP文件注释标记及规范小结
2012/04/01 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python中List的sort方法指南
2014/09/01 Python
深入理解python中的select模块
2017/04/23 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python WSGI的深入理解
2018/08/01 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python实现图像的垂直投影示例
2020/01/17 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
开会迟到检讨书
2014/01/08 职场文书
西式结婚主持词
2014/03/14 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
TS 类型收窄教程示例详解
2022/09/23 Javascript