jQuery 学习笔记之十三

IE6下jQuery实现下拉菜单

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30885111

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moyiqun/archive/2013/06/06/3121185.html

本文介绍如何使用jQuery解决Internet Explorer 6不支持:hover伪类的问题，通过代码实现下拉菜单效果，并展示了如何利用jQuery处理动画效果，如菜单的滑入滑出等。

在IE7中firefox浏览器上可以使用伪劣:hover来显示导航效果，但是IE6并不支持除超链接外的元素使用这个伪类。在IE六下 hover css 无法运行
#navigation ul li:hover ul{
 background-color:#88c366;
 position:absolute;
 widht:100px;
 display:block;
}
为<li>元素添加hover事件，jQuery代码如下:
$(function(){
  $("#navigation ul li:has(ul)").hover(function(){            //鼠标移动过来,向下滑动显示菜单
     $(this).children("ul").stop(true,true).slideDown(400); 
  },function(){
     $(this).children("ul").stop(true,true).slideUp("fast");  //收起菜单
  });
})
 
 
 
展开关闭
$(function(){
  $(".module_up_down").toggle(function(){ 
    var $self = $(this);
    $self.prev().slideToggle(600,function(){
      $("img",$self).att("scr","images/up.gif");
    })
  },function(){ 
   var $slef=$(this);
   $self.prev().slideToggle(600,function(){
      $("img",$self).attr("src","images/down.gif");
   });
  })
})
 
//设置定时器
var scrollTimer= setInterval(function(){
 scrollNews(x);
},3000);
 
//当光标滑过内容时，动画需要停止；当光标滑出后，动画由继续
$(".scrollNews").hover(function(){ 
   clearInterval(scrollTimer);
},function(){
     scrollTimer= setInterval(function(){
      scrollNews(x);
    },3000);
});
 
//设置定时器
var scrollTime=setInterval(function(){
   scrollTimes(x);
 },3000);
 
 
 function scrollNews(obj){
   var $self = obj.find("ul:first");
   var lineHeight = $self.find("li:first").height();//获取行高
   $self.animate({"marginTop":-lineHeight+"px"},600,function(){ //设置滚动
      $self.css({marginTop:0}).find("li:first").appendTo($self); //重新设置marginTop ，把第一个值添加到最后。
   });
 }
 
 //合并代码
 $(function()){
   var $this = $(".scrollNews");
   $this.hover(function(){
     clearInterval(scrollTimer);
   },function(){ 
      scrollTimer= setInterval(function(){
        scrollNews($this);
      },3000);
   });
   //设置定时器
   var scrollTimer = setInterval(function(){ 
      scrollNews($this);
   },3000);
 }
 
 
 $(function(){
    var $this = $(".scrollNews");
    $this.hover(function(){ 
     clearInterval(scrollTimer);
    },function(){ 
      scrollTimer= setInterval(function(){
        scrollNews($this);
      },3000);
    });
    var scrollTimer = setInterval(function(){ 
      scrollNews($this);
    },3000);
 });
  
 function scrollNews(obj){
   var $self = obj.find("ul:first");
   var lineHeight = $self.find("li:first").height;//获取行高
   $self.animate({"marginTop":-lineHeight+"px"},600,function(){
     $self.css({marginTop:0}).find("li:first").appendTo($self);
   })
 }
 
 //与hover事件的第2个函数中继续执行动画的代码完全相同，那么能否让它们合并？能否直接触发hover事件的第2个函数?
 hover() 方法得含义是鼠标滑入滑出，它对应着2个事件，即mouseenter和mouseleave，因此可以通过trigger("mouseleave")函数来触发hover事件的第2个函数
 
   $(function(){
     var $this = $(".scrollNews");
     var scrollTimer;
     $this.hover(function(){
        clearInterval(scrollTimer);
     },function(){
       setInterval(function(){
        scrollNews($this);
       },3000)
     }).trigger("mouseleave");
   });
 
   //当用户进入页面后，就会触发hover事件的第2个函数，从而使内容滚动起来，与前面的效果相同，但代码简化了很多，同时scrollTimer提前显示声明
    避免scrollTimer作为一个全局变量而造成代码冲突。