1 /**
2 * jquery tips 提示插件 jquery.tips.js v0.1beta
3 *
4 * 使用方法
5 * $(selector).tips({   //selector 为jquery选择器
6 *  msg:'your messages!',    //你的提示消息  必填
7 *  side:1,  //提示窗显示位置  1，2，3，4 分别代表 上右下左 默认为1（上） 可选
8 *  color:'#FFF', //提示文字色 默认为白色 可选
9 *  bg:'#F00',//提示窗背景色 默认为红色 可选
10 *  time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
11 *  x:0,//横向偏移  正数向右偏移 负数向左偏移 默认为0 可选
12 *  y:0,//纵向偏移  正数向下偏移 负数向上偏移 默认为0 可选
13 * })
14 *$("#dname").tips({
15                 side:3,
16               msg:'输入属性名',
17                  bg:'#AE81FF',
18                  time:2
19             });
20 *
21 */
22 (function ($) {
23     $.fn.tips = function(options){
24         var defaults = {
25             side:1,
26             msg:'',
27             color:'#FFF',
28             bg:'#F00',
29             time:2,
30             x:0,
31             y:0
32         }
33         var options = $.extend(defaults, options);
34         if (!options.msg||isNaN(options.side)) {
35         throw new Error('params error');
36     }
37     if(!$('#jquery_tips_style').length){
38         var style='<style id="jquery_tips_style" type="text/css">';
39         style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
40         style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
41         style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
42         style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
43         style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
44         style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
45         style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
46         style+='</style>';
47         $(document.body).append(style);
48     }
49         this.each(function(){
50             var element=$(this);
51             var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
52             options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
53             var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
54             var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
55             tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
56             tips.find('.jq_tips_info').css({
57                 color:options.color,
58                 backgroundColor:options.bg
59             });
60             switch(options.side){
61                 case 1:
62                     tips.css({
63                         top:element_top-tips.outerHeight()+options.x,
64                         left:element_left-10+options.y
65                     });
66                     break;
67                 case 2:
68                     tips.css({
69                         top:element_top-20+options.x,
70                         left:element_left+element_width+options.y
71                     });
72                     break;
73                 case 3:
74                     tips.css({
75                         top:element_top+element_height+options.x,
76                         left:element_left-10+options.y
77                     });
78                     break;
79                 case 4:
80                     tips.css({
81                         top:element_top-20+options.x,
82                         left:element_left-tips.outerWidth()+options.y
83                     });
84                     break;
85                 default:
86             }
87             var closeTime;
88             tips.fadeIn('fast').click(function(){
89                 clearTimeout(closeTime);
90                 tips.fadeOut('fast',function(){
91                     tips.remove();
92                 })
93             })
94             if(options.time){
95                 closeTime=setTimeout(function(){
96                     tips.click();
97                 },options.time*1000);
98                 tips.hover(function(){
99                     clearTimeout(closeTime);
100                 },function(){
101                     closeTime=setTimeout(function(){
102                         tips.click();
103                     },options.time*1000);
104                 })
105             }
106         });
107         return this;
108     };
109 })(jQuery);

案例二：

1 (function($){
2     $.fn.shadow = function(opts){
3         //定义的默认的参数
4         var defaults = {
5             copies: 5,
6             opacity:0.1,
7             //回调函数
8  copyOffset:function(index){
9                 return{x:index,y:index};
10             }
11         };
12         //将opts的内容合并到default中。
13         var options = $.extend(defaults,opts);
14         return this.each(function(){
15             var $originalElement  = $(this);
16             //设置参数对象
17             for(var i=0;i<options.copies;i++)
18             {
19                 var offset = options.copyOffset(i);
20                 $originalElement
21                 .clone()
22                 .css({
23                     position:'absolute',
24                     left:$originalElement.offset().left + offset.x,
25                     top:$originalElement.offset().top + offset.y,
26                     margin:0,
27                     zIndex:-1,
28                     //设置参数对象
29                     opacity:options.opacity
30                 })
31                 .appendTo('body');
32             }
33         });
34     };
35 })(jQuery);
36 $(document).ready(function(){
37     $('h1').shadow({
38         copies:5,
39         copyOffset:function(index){
40         return {x:-index,y:-2 * index};
41         }
42     });
43 });