现在的位置: 首页 > 综合 > 正文

jQuery 学习笔记之十三

2012年09月07日 ⁄ 综合 ⁄ 共 2736字 ⁄ 字号 评论关闭
在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作为一个全局变量而造成代码冲突。

抱歉!评论已关闭.