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效率 一次判断,而不要次次判断
Mar 30 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
canvas实现图像放大镜
Feb 06 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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 SQLite类
2009/05/07 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
json跨域调用python的方法详解
2017/01/11 Python
Python异常处理操作实例详解
2018/05/10 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Internet主要有哪些网络群组成
2015/12/24 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
旅游市场营销方案
2014/03/09 职场文书
决心书标准格式
2014/03/11 职场文书
校园元旦活动总结
2014/07/09 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
党员自评材料范文
2014/12/17 职场文书
毕业设计论文评语
2014/12/31 职场文书
严以律己学习心得体会
2016/01/13 职场文书
Python图片检索之以图搜图
2021/05/31 Python
python中 Flask Web 表单的使用方法
2022/05/20 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技