上一篇讲了些基础的东西.没有实质的内容,也许根本找不到你想要的办法,说白了就是扯淡.如果那些你都很明白,那我们可以继续了
关于clone
也许你也看到上一篇的实例了,clone的只是点击的本身的内容,而我们希望的却是克隆的另一个内容.怎么办?由此我们引出了一个新的东西,attr(name).
取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined .
Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned
看完解释,你是否释然了呢,没有?继续一个实例.我们修改一下上一篇提到的第二个例子.改动的地方比较多,注意比较,文档中含有中文,所以建议保存成UTF-8
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script language="javascript"> $().ready(function(){ $('.myclass a').click(function(){ $($(this).attr("href")).clone().insertAfter('.h')});}); </script> <style type="text/css"> </style> </head> <body> <p id="test">这段文字将会被克隆!</p> <br/> <p class="myclass"><a href="#test">test clone </a> (点击克隆上面那段文字)</p> <p class="h">clone to here</p> </body> </html> |
好了,我们看到点击链接的时候,段落id为test的文字被克隆了.目的达到.
接下来,我直接把我的悬浮显示留言的代码贴上,你就不难理解.用到的东西其实非常少,不是吗?看代码:
1 2 3 4 5 6 7 8 9 | //match and add class var A=/^#comment-/; var B=/^@/; if($('#thecomments .info .content p a').text().match(B) && $('#thecomments .info .content p a').attr('href').match(A)){ $('#thecomments .info .content p').addClass('cool'); }; //clone $('.cool a').hover(function(){ $($(this).attr("href")).clone().hide().attr("id","").insertAfter($(this).parents("li")).addClass('tip').show('normal');},function(){$(".tip").fadeOut("normal",function(){$(this).remove()})}); |
这下你明白,我为什么要写两篇,并举例子了吗?这个是循序渐进的,clone的代码一行写完了,我解释一下,用$选择那个我们指定好的链接,hover即鼠标移到它上面的时候执行下面的动作.
看看hover的解释:
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
Simulates hovering (moving the mouse on, and off, an object). This is a custom method which provides an ‘in’ to a frequent task.
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to ‘hover’, and not move out (a common error in using a mouseout event handler).
另外,对于parents
parents ([expr])
取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）.可以通过一个可选的表达式进行筛选.
hide show fadeOut控制出现和消失的,我还是建议你去看看文档去.也许你会得到更加满意的答案,也许,你还会创建更加有趣的效果.试试吧.有更好玩的记得和我们分享哦.
好了,到此为止,我们的克隆任务算是完成了,如果你还遇到了一些困难,去查查文档试试.不行到这里留言,我们一起讨论.
克隆完成,我们还需要它能跟着鼠标那就更加帅了.如何实现呢?这个我问过Shawn,我给了我看两篇官方的文档,终于我解决了这个.你也可以看看这篇文档.说明很好,还有实例.
好了,我贴出我的完整代码:
1 2 3 4 5 6 7 8 9 | //match add class var A=/^#comment-/; var B=/^@/; if($('#thecomments .info .content p a').text().match(B) && $('#thecomments .info .content p a').attr('href').match(A)){ $('#thecomments .info .content p').addClass('cool'); }; //clone $('.cool a').hover(function(){ $($(this).attr("href")).clone().hide().attr("id","").insertAfter($(this).parents("li")).addClass('tip').show('normal');},function(){$(".tip").fadeOut("normal",function(){$(this).remove()})}).mousemove(function(e){$(".tip").css({left:(e.clientX+5),top:(e.pageY+8)})}); |
即,在后面加了个mousemove.
另外是对于css的处理(也许你有更好的):
我的代码是:
1 2 3 4 5 6 7 8 9 10 11 12 | .tip{ position:absolute; z-index:999; border:1px solid #000000; background-color:#ffffff; padding:5px 5px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; width:606px; } |
说明: position:absolute;是关键,它让你复制的那块’浮’出来. -moz-border只是为了能在firefox浏览器上面有圆角的效果.width是为了解决在IE6下面宽度显示不正常而增加的.
后记:
我的实现方法,也可以说是我的学习的过程,当然中途我还看了其他的东西,走了些弯路,就不说了.快要考试,我学习也开始忙了,没有多少时间细细研究这个,权当是个人爱好.
这个所谓的’教程’也许写得很糟糕,也许你还一头雾水,不要急,慢慢来.你可以留言我们一起讨论.
最后感谢Shawn.他那里还有好多好玩的,不过这个学期没有时间研究了.
声明:本站遵循署名-非商业性使用-相同方式共享3.0共享协议. 转载请注明转自 PhilNa ™
感觉这种方式不错！就是有点不太懂~~
@kerby
很不错的提议…不过这段时间没有空弄了.