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 相关文章推荐
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
python实现同一局域网下传输图片
2020/03/20 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
C语言笔试题回忆
2015/04/02 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
《乌塔》教学反思
2014/02/17 职场文书
数学检讨书1000字
2014/02/24 职场文书
促销活动总结
2014/04/28 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
十佳家长事迹材料
2014/08/26 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
python自动化测试之Selenium详解
2022/03/13 Python