JS点击页面出现赞效果

模板网 2014-11-17

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;

相关文章

  1. QQ添加好友代码

    QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a

  2. 离线宝中提取的验证电话号码的函数

    从百度离线宝中提取的验证电话号码的函数,只检查输入的内容是否是11位或12为数字,不是非常完美,但是代码中还是有值得学习的地方。 函数:phone(e){} 参数:e //要验证的号码 返回值:正确返回true,错误弹出提示框并返回false。 效果图:

  3. JS判断手机端跳转代码

    JS判断手机端跳转代码 复制代码 代码如下: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(Trident) -1, //IE内核 Opera: u.indexOf(Opera) -1, //ope

  4. JS判断手机访问跳转到手机站使用百度uaredirect.js

    使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代

  5. 最新获取网站访客QQ接口代码-20141015

    分析某网站得到的一枚获取访客QQ的接口,原理和以前的一样jsonp 不废话,直接上代码,不懂的直接百度,这种技术应该早就烂大街了。 详细接口及利用代码: 复制代码 代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(

随机推荐

  1. QQ添加好友代码

    QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a

  2. 离线宝中提取的验证电话号码的函数

    从百度离线宝中提取的验证电话号码的函数,只检查输入的内容是否是11位或12为数字,不是非常完美,但是代码中还是有值得学习的地方。 函数:phone(e){} 参数:e //要验证的号码 返回值:正确返回true,错误弹出提示框并返回false。 效果图:

  3. JS判断手机端跳转代码

    JS判断手机端跳转代码 复制代码 代码如下: var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(Trident) -1, //IE内核 Opera: u.indexOf(Opera) -1, //ope

  4. JS判断手机访问跳转到手机站使用百度uaredirect.js

    使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代

  5. 最新获取网站访客QQ接口代码-20141015

    分析某网站得到的一枚获取访客QQ的接口,原理和以前的一样jsonp 不废话,直接上代码,不懂的直接百度,这种技术应该早就烂大街了。 详细接口及利用代码: 复制代码 代码如下: script type=text/javascript function getQQ(data){ if(data.uin != 0){ alert(