jQuery如何实现图片滑动效果

来源：动视网责编：小OO 时间：2020-11-27 20:05:07

jQuery如何实现图片滑动效果

思路：当鼠标进入元素时，触发hover中的第一个函数，离开时触发hover中的第二个函数。如图所示。代码如下：<；，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)；}，function(){ $(this).children().stop(false。

推荐度：

点击下载本文 文档为doc格式

导读思路：当鼠标进入元素时，触发hover中的第一个函数，离开时触发hover中的第二个函数。如图所示。代码如下：<；，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)；}，function(){ $(this).children().stop(false。

图片滑动在很多地方都需要，本文主要介绍了jQuery实现图片滑动效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。

思路：当鼠标进入元素时，触发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>
<p class="main">
 <ul>
 <li>
 <p class="fade"></p>
 <p class="img1"><img src="img/1.png"></p>
 <p class="img2"><img src="img/1-1.png"></p>
 <p class="txt1">啦啦啦啦啦</p>
 <p class="txt2">是是是是是</p>
 </li>
 <li>
 <p class="fade"></p>
 <p class="img1"><img src="img/2.png"></p>
 <p class="img2"><img src="img/2-2.png"></p>
 <p class="txt1">啦啦啦啦啦</p>
 <p class="txt2">是是是是是</p>
 </li>
 <li>
 <p class="fade"></p>
 <p class="img1"><img src="img/1.png"></p>
 <p class="img2"><img src="img/1-1.png"></p>
 <p class="txt1">啦啦啦啦啦</p>
 <p class="txt2">是是是是是</p>
 </li>
 <li>
 <p class="fade"></p>
 <p class="img1"><img src="img/2.png"></p>
 <p class="img2"><img src="img/2-2.png"></p>
 <p class="txt1">啦啦啦啦啦</p>
 <p class="txt2">是是是是是</p>
 </li>
 </ul>
</p>
<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如何实现图片滑动效果

推荐度：

点击下载本文 文档为doc格式

标签：设置图片特效

热门焦点

jQuery如何实现图片滑动效果

jQuery如何实现图片滑动效果

jQuery如何实现图片滑动效果

最新推荐

猜你喜欢

热门推荐