JS点击页面出现赞效果

JS点击页面出现赞效果，点击页面任何地方出现随机的数字向上漂浮效果，挺炫的一种效果。

完整代码：

		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

		<script>

		jQuery(document).ready(function($) {

		    $("html,body").click(function(e) {

		        var n = Math.round(Math.random() * 100); //随机数

		        var $i = $("<b/>").text("+" + n); //添加到页面的元素

		        var x = e.pageX,

		        y = e.pageY; //鼠标点击的位置

		        $i.css({

		            "z-index": 99999,

		            "top": y - 20,

		            "left": x,

		            "position": "absolute",

		            "color": "#E94F06"

		        });

		        $("body").append($i);

		        $i.animate({

		            "top": y - 180,

		            "opacity": 0

		        },

		        1500,

		        function() {

		            $i.remove();

		        });

		        e.stopPropagation();

		    });

		});

		</script>

效果截图：

&lt;title&gt;JS点击页面出现赞效果&lt;/title&gt;
&lt;script src=&quot;http://libs.baidu.com/jquery/1.9.0/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
jQuery(document).ready(function($) {
    $(&quot;html,body&quot;).click(function(e) {
        var n = Math.round(Math.random() * 100); //随机数
        var $i = $(&quot;&lt;b/&gt;&quot;).text(&quot;+&quot; + n); //添加到页面的元素
        var x = e.pageX,
        y = e.pageY; //鼠标点击的位置
        $i.css({
            &quot;z-index&quot;: 99999,
            &quot;top&quot;: y - 20,
            &quot;left&quot;: x,
            &quot;position&quot;: &quot;absolute&quot;,
            &quot;color&quot;: &quot;#E94F06&quot;
        });
        $(&quot;body&quot;).append($i);
        $i.animate({
            &quot;top&quot;: y - 180,
            &quot;opacity&quot;: 0
        },
        1500,
        function() {
            $i.remove();
        });
        e.stopPropagation();
    });
});
&lt;/script&gt;
&lt;p&gt;请用鼠标左键点击页面查看效果&lt;/p&gt;

随机推荐

最新获取网站访客QQ接口代码-20141015
分析某网站得到的一枚获取访客QQ的接口，原理和以前的一样jsonp 不废话，直接上代码，不懂的直接百度，这种技术应该早就烂大街了。详细接口及利用代码：复制代码代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(
使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
JS手机端跳转代码
JS手机端跳转代码，通过判断浏览器版本来判断是手机端还是PC端，然后可以做相应的操作。能够判断IE内核，opera内核，苹果、谷歌内核，火狐内核，是否为移动终端，android终端或者uc浏览器，是否为iPhone或者QQHD浏览器，是否iPad，是否web应该程序，没有头
JS闪屏代码,闪瞎你的眼睛
JS恶搞代码，页面底色在黑与白之间快速切换，产生闪烁效果。JS闪屏代码,闪瞎你的眼睛。
离线宝中提取的验证电话号码的函数
从百度离线宝中提取的验证电话号码的函数，只检查输入的内容是否是11位或12为数字，不是非常完美，但是代码中还是有值得学习的地方。函数:phone(e){} 参数:e //要验证的号码返回值:正确返回true，错误弹出提示框并返回false。效果图:

JS点击页面出现赞效果

相关文章

随机推荐