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. 从腾讯网提取的判断手机端访问跳转代码

    从腾讯网提取的判断手机端访问跳转代码,使用了一个正则表达式来判断浏览器的navigator.userAgent标志,来确认访问终端,从而做出相应的操作。 代码简单,注释详细,容易理解。 复制代码 代码如下: script type=text/javascript if(/Android|Windows Phone|w

  2. JS网页标题滚动效果实现代码

    JS网页标题滚动效果实现代码,标题不间断自右向左滚动。 代码简单容易理解,加快或减慢滚动速度只需修改setInterval函数的时间参数即可,本效果默认时间间隔是400毫秒。

  3. 最新获取访客QQ接口—20140915

    最新获取访客QQ接口,分析某网站代码得到的最新获取访客QQ的接口,接口地址: http://x.pet.qq.com/vip_platform?cmd=entercallback=aaa 复制代码 代码如下: script window.www120mubancom = scriptfunction aaa(obj){parent.qq(obj);}\/scriptscript src=htt

  4. JS闪屏代码,闪瞎你的眼睛

    JS恶搞代码,页面底色在黑与白之间快速切换,产生闪烁效果。JS闪屏代码,闪瞎你的眼睛。

  5. 使用新浪获取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

随机推荐

  1. 从腾讯网提取的判断手机端访问跳转代码

    从腾讯网提取的判断手机端访问跳转代码,使用了一个正则表达式来判断浏览器的navigator.userAgent标志,来确认访问终端,从而做出相应的操作。 代码简单,注释详细,容易理解。 复制代码 代码如下: script type=text/javascript if(/Android|Windows Phone|w

  2. JS网页标题滚动效果实现代码

    JS网页标题滚动效果实现代码,标题不间断自右向左滚动。 代码简单容易理解,加快或减慢滚动速度只需修改setInterval函数的时间参数即可,本效果默认时间间隔是400毫秒。

  3. 最新获取访客QQ接口—20140915

    最新获取访客QQ接口,分析某网站代码得到的最新获取访客QQ的接口,接口地址: http://x.pet.qq.com/vip_platform?cmd=entercallback=aaa 复制代码 代码如下: script window.www120mubancom = scriptfunction aaa(obj){parent.qq(obj);}\/scriptscript src=htt

  4. JS闪屏代码,闪瞎你的眼睛

    JS恶搞代码,页面底色在黑与白之间快速切换,产生闪烁效果。JS闪屏代码,闪瞎你的眼睛。

  5. 使用新浪获取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