有意思的鼠标特效

 1<script type="text/javascript">
 2//定义获取词语下标
 3var a_idx = 0;
 4jQuery(document).ready(function($) {
 5    //点击body时触发事件
 6    $("body").click(function(e) {
 7    //需要显示的词语
 8    var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");
 9    //设置词语给span标签
10    var $i = $("<span/>").text(a[a_idx]);
11    //下标等于原来下标+1  余 词语总数
12    a_idx = (a_idx + 1)% a.length;
13    //获取鼠标指针的位置，分别相对于文档的左和右边缘。
14    //获取x和y的指针坐标
15    var x = e.pageX, y = e.pageY;
16    //在鼠标的指针的位置给$i定义的span标签添加css样式
17    $i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
18        "top" : y - 25,
19        "left" : x,
20        "position" : "absolute",
21        "font-weight" : "bold",
22        "color" : "#ff6651"
23        });
24    //在body添加这个标签
25    $("body").append($i);
26        //animate() 方法执行 CSS 属性集的自定义动画。
27        //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
28        //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
29        $i.animate({
30        //将原来的位置向上移动180
31            "top" : y - 180,
32                "opacity" : 0
33         //1500动画的速度
34        }, 1500, function() {
35        //时间到了自动删除
36            $i.remove();
37        });
38    });
39});
40</script>

 1<script type="text/javascript"> 
 2/* 鼠标特效 */
 3var a_idx = 0; 
 4jQuery(document).ready(function($) { 
 5    $("body").click(function(e) { 
 6        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
 7		var b = new Array("red","aqua","yellow","green","pink","maroon","orange");
 8        var $i = $("<span/>").text(a[a_idx]); 
 9        a_idx = (a_idx + 1) % a.length; 
10		b_idx = (a_idx+1)%7;/* 七中颜色变色 */
11        var x = e.pageX, 
12        y = e.pageY; 
13        $i.css({ 
14            "z-index": 9999, 
15            "top": y - 25, 
16            "left": x, 
17            "position": "absolute", 
18            "font-weight": "bold", 
19            "color": b[b_idx]
20        }); 
21        $("body").append($i); 
22        $i.animate({ 
23            "top": y - 180, 
24            "opacity": 0 
25        }, 
26        1500, 
27        function() { 
28            $i.remove(); 
29        }); 
30    }); 
31}); 
32</script>

 1<script>  
 2    jQuery(document).ready(function($) {  
 3    var _click_count=0;  
 4    $("body").bind("click",function(e){
 5        var n=Math.round(Math.random()*100)+1;//生成100以内的随机数
 6          if(n == 0) res= '0';
 7          var res = '';  
 8          while(n != 0) {
 9              res = n % 2 + res
10              n = parseInt(n / 2)
11          }//将n转化为二进制数res
12        var $i=$("<b>").text("+"+(res));
13        var x=e.pageX,y=e.pageY;//鼠标点击的坐标
14        $i.css({  
15            "z-index":99999,  
16            "top":y-15,  
17            "left":x,  
18            "position":"absolute",  
19            "color":"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
20            //"#2299DD"  //固定颜色
21            });  
22            $("body").append($i);  
23            $i.animate({
24                "top":y-180,
25                "opacity":0
26                },  
27                1500,  
28                function(){$i.remove();}  
29            );  
30            e.stopPropagation();  
31        });  
32    });  
33</script>