首页 / JQUERY / jQuery实现首页图片淡入淡出效果的方法

jQuery实现首页图片淡入淡出效果的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery实现首页图片淡入淡出效果的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11631字，纯文字阅读大概需要17分钟。

内容图文

本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下：

这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml

效果图如下所示：

jQuery实现首页图片淡入淡出效果的方法 - 文章图片

需求：

1. 绿色区域要求在图片上方，半透明显示

2. 当鼠标移动到红色区域，切换相应的图片

3. 首页的三张大图轮转

HTML：

<div id="carousel"> 
 <div id="carouselimg" class="content_top"> 
  <div id="imgcontainer" class="slide_panel"> 
   <a target="_blank" href="http://www.baidu.com" mce_href="http://www.baidu.com"><img src="images/brandshop/band_lx_717x280.gif" mce_src="images/brandshop/band_lx_717x280.gif"/></a> 
   <a target="_blank" href="http://www.google.com" mce_href="http://www.google.com"><img src="images/brandshop/band_agz_717x280.gif" mce_src="images/brandshop/band_agz_717x280.gif"/></a> 
   <a target="_blank" href="http://www.dangdang.com" mce_href="http://www.dangdang.com"><img src="images/brandshop/band_qb_717x280.gif" mce_src="images/brandshop/band_qb_717x280.gif"/></a> 
  </div> 
</div>
<div id="carouseltitle"> 
  <ul> 
   <li> 
    <a href="#" mce_href="#">联想 <span>lenovo</span></a> 
   </li> 
   <li> 
    <a href="#" mce_href="#">爱国者 <span>aigo</span></a> 
   </li> 
   <li> 
    <a href="#" mce_href="#">倩碧 <span>CLINIQUE</span></a>
   </li> 
  </ul> 
</div>

CSS：

<mce:style type="text/css"><!-- 
 *{ 
  padding:0; 
  margin:0; 
 } 
 #carousel{ 
  border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;
  position:relative;/*DO NOT delete this line*/ 
 } 
 #carousel ul{ 
  list-style:none; 
 } 
 #carousel #carouselimg{ 
  position:relative;/*fix ie7 overflow bug*/ 
  overflow:hidden; 
 } 
 #carousel #carouselimg #imgcontainer{ 
  position:absolute; 
  left:0px; 
  top:0px; 
 } 
 #carousel #carouselimg img{ 
  float:left;/*fix ie6 auto-margin bug*/ 
  border:0; 
  /*display:none;*/ 
 } 
 #carousel #carouseltitle{ 
  position:absolute; 
  bottom:0px; 
 } 
 #carousel #carouseltitle ul{ 
 } 
 #carousel #carouseltitle li{ 
  width:239px; 
  height:30px; 
  line-height:30px; 
  font-size:14px; 
  text-align:center; 
  background:#000; 
  color:#FFF; 
  float:left; 
  cursor:pointer; 
  opacity:.6; 
  filter:alpha(opacity=60); 
 } 
 #carousel #carouseltitle .active{ 
  background:#cfaf73; 
  color:#FFF; 
  opacity:.9; 
  filter:alpha(opacity=90); 
 } 
 #carousel #carouseltitle .active a{ 
  color:#000; 
 } 
 #carousel #carouseltitle li a{ 
   text-decoration:none; 
   color:#fff; 
 } 
 #carousel #carouseltitle li a span{ 
  font-family:Arial; 
 } 
--></mce:style><style type="text/css" mce_bogus="1"> *{ 
  padding:0; 
  margin:0; 
 } 
 #carousel{ 
  border-color:#DFDFDF;border-style:solid;border-width:0 1px 1px;
  position:relative;/*DO NOT delete this line*/ 
 } 
 #carousel ul{ 
  list-style:none; 
 } 
 #carousel #carouselimg{ 
  position:relative;/*fix ie7 overflow bug*/ 
  overflow:hidden; 
 } 
 #carousel #carouselimg #imgcontainer{ 
  position:absolute; 
  left:0px; 
  top:0px; 
 } 
 #carousel #carouselimg img{ 
  float:left;/*fix ie6 auto-margin bug*/ 
  border:0; 
  /*display:none;*/ 
 } 
 #carousel #carouseltitle{ 
  position:absolute; 
  bottom:0px; 
 } 
 #carousel #carouseltitle ul{ 
 } 
 #carousel #carouseltitle li{ 
  width:239px; 
  height:30px; 
  line-height:30px; 
  font-size:14px; 
  text-align:center; 
  background:#000; 
  color:#FFF; 
  float:left; 
  cursor:pointer; 
  opacity:.6; 
  filter:alpha(opacity=60); 
 } 
 #carousel #carouseltitle .active{ 
  background:#cfaf73; 
  color:#FFF; 
  opacity:.9; 
  filter:alpha(opacity=90); 
 } 
 #carousel #carouseltitle .active a{ 
  color:#000; 
 } 
 #carousel #carouseltitle li a{ 
   text-decoration:none; 
   color:#fff; 
 } 
 #carousel #carouseltitle li a span{ 
  font-family:Arial; 
 } 
</style>

引入River Zhang 的fr.carousel.js

FR={ 
 Version:'1.0.0', 
 Author:'River Zhang(zhang_hechuan@hotmail.com)', 
 Lisence:'MIT Lisence' 
}; 
FR.Util={ 
 //Replace document.getElementById. 
 $:function(id){ 
 return document.getElementById(id); 
 }, 
 //Replace getElementsByTagName. 
 $$:function(node, tag){ 
 return node.getElementsByTagName(tag); 
 }, 
 creat:function(node,name){ 
 var element=document.createElement(name); 
 node.appendChild(element); 
 return element; 
 }, 
 //Event Binding functions. 
 addEvent:function(eventType,eventFunc,eventObj){ 
 eventObj = eventObj || document; 
 if(window.attachEvent)eventObj.attachEvent("on"+eventType,eventFunc); 
 if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false); 
 }, 
 setOpacity:function(obj, value) { 
 if (document.all) obj.style.filter = "alpha(opacity=" + value + ")"; 
 else obj.style.opacity = value / 100; 
 }, 
 setPosition:function(obj, x, y){ 
 var curx=parseInt(obj.style.left); 
 var cury=parseInt(obj.style.top); 
 if(isNaN(curx)) curx=cury=0; 
 var newx=curx+x; 
 var newy=cury+y; 
 obj.style.left=newx+'px'; 
 obj.style.top=newy+'px'; 
 } 
}; 
FR.Carousel={ 
 version:'1.1', 
 mode:1, 
 steps:20, 
 period:25, 
 width:300, 
 height:200, 
 bgColor:'#000000', 
 autoSwitch:true, 
 delay:5000, 
 _semaphore:0,/* DO NOT try to modify this value */ 
 start:function(args){ 
 if(typeof(args)!='undefined'){ 
  FR.Carousel.mode=args.mode||FR.Carousel.mode; 
  FR.Carousel.steps=args.steps||FR.Carousel.steps; 
  FR.Carousel.period=args.period||FR.Carousel.period; 
  FR.Carousel.width=args.width||FR.Carousel.width; 
  FR.Carousel.height=args.height||FR.Carousel.height; 
  FR.Carousel.bgColor=args.bgColor||FR.Carousel.bgColor; 
  FR.Carousel.autoSwitch=args.autoSwitch||FR.Carousel.autoSwitch; 
  FR.Carousel.delay=args.delay||FR.Carousel.delay; 
 } 
 FR.Util.addEvent("load",FR.Carousel.run,window); 
 }, 
 run:function(){ 
 FR.Carousel.initialCSS(); 
 FR.Carousel.counter='frimg0'; 
 var carouselimg=FR.Util.$('carouselimg'); 
 var img=FR.Util.$$(carouselimg, 'img'); 
 for(var i=0;i!=img.length;++i){ 
  img[i].id='frimg'+i; 
  if(FR.Carousel.mode==4 || FR.Carousel.mode==5) continue; 
  img[i].style.position="absolute"; 
  img[i].style.left="0 px"; 
  img[i].style.top="0 px"; 
  FR.Util.setOpacity(img[i], 0); 
 } 
 if(FR.Carousel.mode!=4) FR.Util.setOpacity(img[0], 100); 
 if(FR.Carousel.mode==1) bindFunction=function(name){FR.Carousel.fade(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==2) bindFunction=function(name){FR.Carousel.flash(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==3) bindFunction=function(name){FR.Carousel.fadeIntoColor(FR.Util.$(name), FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==4) bindFunction=function(name){FR.Carousel.scroll(name, FR.Carousel.steps, FR.Carousel.period);}; 
 else if(FR.Carousel.mode==5) bindFunction=function(name){FR.Carousel.crawl(name, FR.Carousel.steps, FR.Carousel.period);}; 
 var carouseltitle=FR.Util.$('carouseltitle'); 
 var li=FR.Util.$$(carouseltitle, 'li'); 
 li[0].className='#carousel #carouseltitle active'; 
 FR.Carousel.autoCarousel(img.length); 
 for(var i=0;i!=li.length;++i){ 
  (function(){ 
  var name='frimg'+i; 
  li[i].onmouseover=function(){ 
   clearInterval(FR.Carousel.s); 
   if(!FR.Carousel._semaphore){ 
   li[FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]].className=''; 
   this.className='#carousel #carouseltitle active'; 
   bindFunction(name); 
   } 
  }; 
  li[i].onmouseout=function(){ 
   FR.Carousel.autoCarousel(img.length); 
  } 
  })(); 
 } 
 }, 
 autoCarousel:function(length){ 
 if(FR.Carousel.autoSwitch){ 
  FR.Carousel.s=setInterval(function(){ 
  var carouseltitle=FR.Util.$('carouseltitle'); 
  var li=FR.Util.$$(carouseltitle, 'li'); 
  li[FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]].className=''; 
  var next=(parseInt(FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])+1)%length; 
  li[next].className='#carousel #carouseltitle active'; 
  name='frimg'+next; 
  bindFunction(name); 
  },FR.Carousel.delay); 
 } 
 }, 
 initialCSS:function(){ 
 var carouselimg=FR.Util.$('carouselimg'); 
 var carousel=FR.Util.$('carousel'); 
 carouselimg.style.width=FR.Carousel.width+"px"; 
 carouselimg.style.height=FR.Carousel.height+"px"; 
 carousel.style.width=FR.Carousel.width+"px"; 
 carousel.style.height=FR.Carousel.height+"px"; 
 if(FR.Carousel.mode==5){ 
  var imgcontainer=FR.Util.$('imgcontainer'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  var size=img.length*FR.Carousel.width; 
  imgcontainer.style.width=size+"px"; 
 } 
 }, 
 fade:function(obj, steps, speed) { 
 FR.Carousel._semaphore=1; 
 var value1=0; 
 var value2=100; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  if(i!=FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]) 
  FR.Util.setOpacity(img[i], 0); 
  } 
  temp=FR.Carousel.counter; 
  FR.Carousel.counter=obj.id; 
  tempobj=FR.Util.$(temp); 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1<=100){ 
   FR.Util.setOpacity(obj,value1); 
   FR.Util.setOpacity(tempobj,value2); 
   value1+=increment; 
   value2-=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 }else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 flash:function(obj, steps, speed) { 
 FR.Carousel._semaphore=1; 
 var value1=0; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  FR.Util.setOpacity(img[i], 0); 
  } 
  FR.Carousel.counter=obj.id; 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1<=100){ 
   FR.Util.setOpacity(obj,value1); 
   value1+=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 }else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 fadeIntoColor:function(obj, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var value1=100; 
 var value2=0; 
 if(obj.id!=FR.Carousel.counter){ 
  var carouselimg=FR.Util.$('carouselimg'); 
  carouselimg.style.backgroundColor=FR.Carousel.bgColor; 
  var img=FR.Util.$$(carouselimg, 'img'); 
  for(var i=0;i!=img.length;++i){ 
  if(i!=FR.Carousel.counter.split('')[FR.Carousel.counter.length-1]) 
  FR.Util.setOpacity(img[i], 0); 
  } 
  temp=FR.Carousel.counter; 
  FR.Carousel.counter=obj.id; 
  tempobj=FR.Util.$(temp); 
  var increment=100/steps; 
  FR.Carousel.i=setInterval(function(){ 
  if(value1>=0){ 
   FR.Util.setOpacity(tempobj,value1); 
   value1-=increment; 
  } 
  else if(value1<0 && value2<=100){ 
   FR.Util.setOpacity(obj,value2); 
   value2+=increment; 
  } else { 
   clearInterval(FR.Carousel.i); 
   FR.Carousel._semaphore=0; 
  } 
  },speed); 
 } else { 
  FR.Carousel._semaphore=0; 
  return; 
 } 
 }, 
 scroll:function(curno, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var ic=FR.Util.$('imgcontainer'); 
 var count=(curno.split('')[curno.length-1]-FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])*FR.Carousel.height; 
 FR.Carousel.counter=curno; 
 var value1=0; 
 var increment=count/steps; 
 FR.Carousel.i=setInterval(function(){ 
  if(Math.abs(value1)<Math.abs(count)){ 
  if(count>0){ 
   FR.Util.setPosition(ic,0,-increment); 
   value1-=increment; 
  } 
  else{ 
   FR.Util.setPosition(ic,0,-increment); 
   value1+=increment; 
  } 
  } else { 
  clearInterval(FR.Carousel.i); 
  FR.Carousel._semaphore=0; 
  } 
 },speed); 
 }, 
 crawl:function(curno, steps, speed){ 
 FR.Carousel._semaphore=1; 
 var ic=FR.Util.$('imgcontainer'); 
 var count=(curno.split('')[curno.length-1]-FR.Carousel.counter.split('')[FR.Carousel.counter.length-1])*FR.Carousel.width; 
 FR.Carousel.counter=curno; 
 var value1=0; 
 var increment=count/steps; 
 FR.Carousel.i=setInterval(function(){ 
  if(Math.abs(value1)<Math.abs(count)){ 
  if(count>0){ 
   FR.Util.setPosition(ic,-increment,0); 
   value1-=increment; 
  } 
  else{ 
   FR.Util.setPosition(ic,-increment,0); 
   value1+=increment; 
  } 
  } else { 
  clearInterval(FR.Carousel.i); 
  FR.Carousel._semaphore=0; 
  } 
 },speed); 
 } 
};

可以实现图片的轮转效果，但是点击图片后，每次链接跳转都是最后一张图的a href

查看fr.carousel.js ，原来，它实现的思路是将三张图一张叠在一张上边，使用setInterval() ,将一张图的opacity 值置为1，其余两张为0。但是，这将导致你点击图片后，每次的链接都是最上边的那张图(即最后倩碧那一张)。

解决方法：

设置轮转图的 z-index，当图片显示的时候，其父节点<a> 的z-index 比其它元素高。

jQuery实现：

// 判断img轮转，实现a跳转 
setInterval(function(){ 
 $("#imgcontainer a").each(function(i){ 
  var img = $(this).children("img"); 
  var op = img.css("opacity"); 
  if(op>0){ 
   img.css("z-index","100"); 
   $(this).css("z-index","100"); 
  }else{ 
   img.css("z-index","0"); 
   $(this).css("z-index","0"); 
  } 
 }) 
},100);

希望本文所述对大家的jQuery程序设计有所帮助。

内容总结

以上是互联网集市为您收集整理的jQuery实现首页图片淡入淡出效果的方法全部内容，希望文章能够帮你解决jQuery实现首页图片淡入淡出效果的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/357570.html

来源：【匿名】

【上一篇】jQuery获取页面元素绝对与相对位置的方法【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jQuery实现首页图片淡入淡出效果的方法】教程文章相关的互联网学习教程文章

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画【代码】

1/**2 * 【JQ基础动画】3 * show() 显示4 * hide() 隐藏5 * toggle() 切换6 * 默认无动画，如果要产生动画7 * 在括号内，添加毫秒数，可产生动画和控制动画的快慢8 *9 * 《滑动动画》 10 * slideDown() 滑动显示(下) 11 * slideUp() 滑动隐藏(上) 12 * sli...

【jQuery】使用JQ来编写面板的淡入淡出效果【图】

本文与上一篇的《【jQuery】使用JQ来编写最主要的淡入淡出效果》（点击打开链接）为姊妹篇。但上一篇仅仅是对文本的基本控制，本篇则是对面板元素进行控制。尽管功能上很类似，可是所用到的控制函数是不同的，因此有必要进行说明。实现了点击一个面板来控制还有一个面板。而且对显示与隐藏速度进行了控制。一、基本目标网页中有两个面板一个button，点击上面板，则可以使以下在显示/隐藏之间来回切换。点击下方的三个button。可以分...

jQuery-4.动画篇---淡入淡出效果【代码】

jQuery中淡出动画fadeOut让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果所谓"淡出"隐藏的，元素是隐藏状态不对作任...

jQuery，您可以实现元素的淡入淡出效果。【代码】

fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 用于淡入已隐藏的元素$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000); });jQuery fadeOut() 方法用于淡出可见元素。$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000); });fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换$("button").click...

jQuery 淡入淡出【代码】

jQuery fadeToggle() 方法 jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle(1000) 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle(如上：毫秒为单位) 会向元素添加淡出效果。原文：https://www.cnblogs.com/alives/p/13266723.html

jQuery 效果 - 淡入淡出：实现元素的淡入淡出效果

jQuery 效果 - 淡入淡出实例jQuery fadeIn() 演示 jQuery fadeIn() 方法。jQuery fadeOut() 演示 jQuery fadeOut() 方法。jQuery fadeToggle() 演示 jQuery fadeToggle() 方法。jQuery fadeTo() 演示 jQuery fadeTo() 方法。jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素。语法...

jQuery实现IE6的淡入淡出提示功能效果实例【图】

本文主要和大家介绍jQuery实现可兼容IE6的淡入淡出效果告警提示功能,结合具体实例形式分析了jQuery弹出警告提示功能的具体实现步骤与相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。其实我觉得告警提示的话，直接用一个Alert就最好的。开门见山，直接让用户明白你当前系统的意思，关键是Alert这东西就是再破的浏览器都必须兼容，不然你它丫的做毛浏览器啊？但是，在现在越来越觉得Alert不美观，而且开始有“弹窗挺吓人”的...

jquery实现经典的淡入淡出选项卡效果代码_jquery【图】

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下：这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下：经典选项卡.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}...

jQuery实现的淡入淡出二级菜单效果代码_jquery【图】

本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码。分享给大家供大家参考。具体如下：这是一款加入了jQuery的菜单，一个看似平凡菜单突然有味道、有生机起来，这里将jQuery1.3.2引用进来，让弹出的二级菜单具备淡入淡出的效果，虽然就效果本身来说并不起眼，但比起无任何效果的菜单，从体验上来说，已经强了很多倍。运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-code...

jQuery代码实现图片墙自动+手动淡入淡出切换效果【图】

相关阅读： Jquery代码实现图片轮播效果（一）在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果，非常漂亮，实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果，一起学习吧！先给大家展示效果图，如果大家觉得还不错，请参考具体实现代码。添加一个div（class=container），设置宽度和高度，这里设置了宽800px，高450px。添加居中的定位。在div里面添加一个ul(class="img...

jquery淡入淡出效果简单实例

本文实例讲述了jquery淡入淡出效果实现方法。分享给大家供大家参考，具体如下：之前理解有一些误区，以为淡入淡出是删除该元素，其实只是把该元素隐藏起来和显示出来罢了。具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> <head><mce:script typ...

jquery插件tooltipv顶部淡入淡出效果使用示例【图】

内部使用代码如下:<head> <title></title> <link href="base.css" rel="stylesheet" type="text/css" /> <link href="jquery.tooltip.less" rel="stylesheet/less" type="text/css"> <script src="less-1.4.2.min.js" type="text/javascript"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.tooltip.js" type="...

jQeury淡入淡出需要注意的问题_jquery【图】

前两天看到橡树小屋朋友发表的《JQuery 实现图片轮播效果》，比较有趣，发现他是使用fadeIn和fadeOut实现图片淡入淡出轮换的。当时曾担心他的例子中如果连续多次点击，所产生的动画会不会有延时。但我连续点击了几下，没看到明显的延时，就没再多想。　　众所周知，jQuery所产生的动画效果默认会进入列队的。假如：点击一下，产生动画3秒钟。然后我快速的连点3次。那么要等到9秒钟，所有动画才能结束。animate是自定义动画，可以很...

jquery实现通用版鼠标经过淡入淡出效果

代码如下:<a class="jq_btn" href="#"><div></div></a> //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(); }); 原理很简单 a标签背景设置正常状态 div背景设置鼠标hover的背景只要给元素加上代码如下:class="jq_btn" 都自动有效果

jQuery 淡入淡出、展开收缩菜单实现代码【图】

效果图:运行以后，刷新下即可。jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;} $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 ...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jQuery实现首页图片淡入淡出效果的方法

jQuery实现首页图片淡入淡出效果的方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【jQuery实现首页图片淡入淡出效果的方法】教程文章相关的互联网学习教程文章

JQuery--基础动画、滑动动画、淡入淡出动画、自定义动画【代码】

【jQuery】使用JQ来编写面板的淡入淡出效果【图】

jQuery-4.动画篇---淡入淡出效果【代码】

jQuery，您可以实现元素的淡入淡出效果。【代码】

jQuery 淡入淡出【代码】

jQuery 效果 - 淡入淡出：实现元素的淡入淡出效果

jQuery实现IE6的淡入淡出提示功能效果实例【图】

jquery实现经典的淡入淡出选项卡效果代码_jquery【图】

jQuery实现的淡入淡出二级菜单效果代码_jquery【图】

jQuery代码实现图片墙自动+手动淡入淡出切换效果【图】

jquery淡入淡出效果简单实例

jquery插件tooltipv顶部淡入淡出效果使用示例【图】

jQeury淡入淡出需要注意的问题_jquery【图】

jquery实现通用版鼠标经过淡入淡出效果

jQuery 淡入淡出、展开收缩菜单实现代码【图】

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程