jquery简单提示效果

一般网页中链接和图片都可以用title标签来添加描述信息,当鼠标移到上面的时候,会出现相应的提示。但是样式比较单一,有些时候需要进行一些特定样式表现。下面这段代码就是jquery模拟实现浏览器默认提示的一个效果。
思路解析:在鼠标移到目标元素后,获得title值临时存储,删除title元素,添加tooltip层,将存储的值放到里面。得到页面中鼠标的位置信息,将层定位在相应位置中。移出时将title元素添加回去,删除tooltip层。在鼠标在目标元素上移动时,改变tooltip层的位置信息。

$(document).ready(function(){
  $('.location').hover(function(event){
    // Hover over code
    var titleText = $(this).attr('title');
    $(this)
      .data('tipText', titleText)
      .removeAttr('title');
      
    $('

') .text(titleText) .appendTo('body') .css('top', (event.pageY - 10) + 'px') .css('left', (event.pageX + 20) + 'px') .fadeIn('slow'); }, function() { // Hover out code $(this).attr('title', $(this).data('tipText')); $('.tooltip').remove(); }).mousemove(function(event){ // Mouse move code $('.tooltip') .css('top', (event.pageY - 10) + 'px') .css('left', (event.pageX + 20) + 'px'); }); });

jQuery.data()方法:允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值,并获取这些值。
语法:jQuery.data( element, key, value )
参数:element要关联数据的DOM对象、key存储的数据名、value新数据值

此处mousemove事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象,其event.pageX和event.pageY属性代表页中鼠标的坐标信息。

jquery实现简单“手风琴菜单”效果

实例出自:jQuery Novice to Ninja 2nd Edition 一书,看代码同时也在思考自己写会怎么做,什么是优雅、什么是一看即懂。当然对于不常用的一些知识也是做个复习。html结构部分,较简单。js部分也做了注解。

filter的作用是筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围,用逗号分隔多个表达式。

我的观点是少用jquery插件,虽然插件方便,而且效果更佳。但是一般效果已足以满足需求了,因为网页内容有用与否才是最重要的。

html部分:

Our Celebrities

We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast!

js部分:

$(document).ready(function(){
  $('#celebs ul > li ul') //我们需要隐藏的所有内容,除了的默认项,停止冒泡。
    .click(function(event){
      event.stopPropagation();
    })
    .filter(':not(:first)')
    .hide();
    
  $('#celebs ul > li').click(function(){
    //二级菜单显示着的第一项
    var selfClick = $(this).find('ul:first').is(':visible');
    //如果不存在,找到二级菜单显示的项,进行隐藏。
    if(!selfClick) {
      $(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();
    }
    
    //点击后对当前项进行切换
    $(this)
      .find('ul:first')
      .stop(true, true)
      .slideToggle();
  });
});

jquery下拉菜单及stop方法使用

看jQuery Novice to Ninja 2nd Edition上面的一个下拉菜单例子,实现的简单明了,记录一下。用到stop方法,不太了解,顺便复习了一下,它是用来停止正在进行中的动画。

html部分:


css部分:

#container {
  position: relative;
}

#menu {
  position: absolute;
  top: 0;
  right: 0;
}

#menu, #menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu li {
  float: left;
  background: #FFF;
}

#menu a {
  display: block;
  padding: 5px;
  width: 130px;
}

#menu li ul {
  position: absolute;
  left: -999em;
  width: 140px;
}

#menu li:hover ul, #menu li ul:hover {
  left:auto;
}

javascript部分:

$(document).ready(function(){
  $('#menu li ul').css({
    display: "none",
    left: "auto"
  });
  $('#menu li').hover(function() {
    $(this)
      .find('ul')
      .stop(true, true)
      .slideDown('fast');
  }, function() {
    $(this)
      .find('ul')
      .stop(true,true)
      .fadeOut('fast');
  });
});

提示:定位使用left属性。left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。先使用-999em来隐藏,再使用auto通过浏览器计算左边缘的位置,进入视线。

jquery stop方法:

参数:
stop(stopAll,goToEnd)
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

理解:stopAll为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。
goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果。

工作中遇到过的实际案例:我在项目里做的一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏。如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累”,当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。

解决方法:
在写动画效果的代码前加入stop(true,true),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)

参考:http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html