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 对象、函数和继承
Jul 07 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP中的表达式简述
2016/05/29 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
PHP实现倒计时功能
2020/11/16 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js数组操作学习总结
2013/11/04 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
js表单验证实例讲解
2016/03/31 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
js数组去重的方法总结
2019/01/18 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python实现简单学生信息管理系统
2020/04/09 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
产品委托授权书范本
2014/09/16 职场文书
高三复习计划
2015/01/19 职场文书
党支部对转正的意见
2015/06/02 职场文书
孙振耀退休感言
2015/08/01 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers