爱奇思

学习就是——从糊涂中慢慢走向清醒，然后再从清醒中慢慢走向糊涂，所以说我说它是一个O,只是圆的半径慢慢的扩大罢了！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

学习Jquery(二) Jquery插件

Posted on 2010-05-31 10:15  牛牛博客  阅读(404)  评论(0)  编辑  收藏  举报

学到插件 自己也倒弄出来一个。

效果图如下：

代码如下：

 

<!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>
    <title>无标题页</title>
    <style type="text/css">
        #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;}
    </style>
    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>    
</head>
<body>
<span class="ll" title="123">你好</span>
<a title="123" href="#">四大发送</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" class="ll" href="#">1的爽肤水</a>
<a title="123" href="#">1撒旦法1</a>
<a title="123" href="#">12撒旦法1</a><a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" class="ll" href="#">12331</a>
<div></div>
    <script language="javascript" type="text/javascript">
       $(function(){  
       //插件主题 
         $.fn.extend({
            showTitle:function(){
               $('<div id="conBox"></div>').appendTo('body');
               var d=$("#conBox");
               this.bind({
                mouseover:function(){
                   if(!$("#conBox")){
                      $('<div id="conBox"></div>').appendTo('body');
                   }else{
                      d=$("#conBox");
                   }
                   var of=$(this).offset();
                   var title=$(this).attr("title");
                   //定义位置
                   d.css({top:of.top+$(this).height()+"px",left:$(this).width()/2+of.left+"px"}).text($(this).attr("title"));
                   //显示
                   d.fadeIn();
                },
                mouseout:function(){
                   //鼠标一走隐藏
                   d.fadeOut();
                }
               });
            }
         });
         
         //调用
         $(".ll").showTitle();
       });
    </script>
</body>
</html>