jQuery实现图片滑动效果

2024-09-27 20:16:50

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

如图所示：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

jquery实现滑动图片自己测试的例子

最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度. 下面是我自己测试的例子: 复制代码代码如下: //html代码 <div class = "content"> <ul class = "list"> <li class =
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一

以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.从这篇文章开始到接下来的几篇文章我们将向大家分享40多种非常有用,又有创意的jQuery图片滑动插件,及其演示和下载地址.你可以按你网页风格找到合适的jQuery图片滑动插件,然后点击演示链接查看具体效果,然后下载此jQuery滑动插件.希望你能在这40个jQuery
JQuery实现简单的图片滑动切换特效

JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0
jquery animate图片模向滑动示例代码

这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就会从当前的值渐变到指定的值.如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认
jQuery实现图片与文字描述左右滑动自动切换的方法

本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法.分享给大家供大家参考.具体如下: 这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效.一边飞出一边变淡的效果非常漂亮,带小按钮. 效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition
jQuery插件Slider Revolution实现响应动画滑动图片切换效果

这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果...总之你想到的效果它都做到了,它的名字叫Slider Revolution. HTML Slider Revolution是一款基于jQuery的插件,使用它时需要先载入jQuery库文件,以及Slider Revolution依赖的css和js文件. <script src="js/jque
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受Web designer欢迎.所以很多网页设计师结合jQuery的强大功能制作出了许多成熟的图片滑动插件,我们可以很简单地直接将这些图片滑动插件嵌入到网页中,很容易就得到了即酷又实用的jQuery图片滑动效果.在这是jQuery滑动切换插件系列的第二篇,我们将向大家分享40多种非常有用,又有创意的jQ
jQuery点击后一组图片左右滑动的实现代码

复制代码代码如下: $(function () { var page = 1;//初始化page变量 var i = 2;//每版放两组图片 var $pictureShow = $(".pictures4"); var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 var pa
jQuery实现图片滑动效果

思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数. 如图所示: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 1000px; m
jQuery实现图片走马灯效果的原理分析

本文实例分析了jQuery实现图片走马灯效果的原理.分享给大家供大家参考,具体如下: 这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;&qu
javascript图片滑动效果实现

本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href
jQuery实现图片切换效果

本文实例为大家分享了jQuery实现图片切换效果的具体代码,供大家参考,具体内容如下动画:点击左右按钮实现图片切换 jQuery方法:animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果: <!DOCTYPE html> <html lang="en"> <head>
jquery实现图片放大镜效果

本文实例为大家分享了jquery实现图片放大镜效果的具体代码,供大家参考,具体内容如下首先是HTML <div id="box"> <div id="big"> <div> <img src="./img/可达鸭.jpg" alt=""> </div> <div id="fd"></div> </div> &l
jQuery实现图片跟随效果

本文实例为大家分享了jQuery实现图片跟随效果的具体代码,供大家参考,具体内容如下实现效果要实现的功能: * 鼠标进来,显示大图片: * 鼠标出去,隐藏大图片: * 鼠标在大图片里边动,大图片跟着动. 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title he
Android实现探探图片滑动效果

之前一段时间,在朋友的推荐下,玩了探探这一款软件,初玩的时候,就发现,这款软件与一般的社交软件如陌陌之类的大相径庭,让我耳目一新,特别是探探里关于图片滑动操作让人觉得非常新鲜.所以在下通过网上之前的前辈的经历加上自己的理解,也来涉涉水.下面是网上找的探探的原界面当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果的原理肯定和 ListView /RecyclerView 类似,涉及到 Item View 的回收和重用,否则早就因为大量的 Item View
基于javascript实现图片滑动效果

今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进. ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap--panel使用了绝对定位,就将translate平移改为了left.改动后,各个浏览器运行的效果不错. 具体代码如下 html代码(没写注释) <div class="container">
Vue实现类似Spring官网图片滑动效果方法

先来看一下Spring官网首页的一个图片滑动显示效果可以看到, 随着鼠标的滑动,绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示. 显示这样的效果其实很简单,利用固定定位保证两张图片在同一位置下, 我们可以将灰色图片当做背景层图片,然后根据获取到的实时X轴坐标, 动态改变绿色图片的宽度, 隐藏超出X轴坐标的部分, 就可以达到这样的效果, 简单来说, 这效果就是动态改变上层图片的宽度. 实现效果: 我这边选择了两张同样大小的KDA卡莎的图片, 将金色图作为背景图,暗黑图作为左侧图, 用了Vue的
jquery实现图片滚动效果的简单实例

复制代码代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery 图片自动无缝滚动</title>

jQuery实现图片滑动效果

相关推荐

随机推荐