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. JS判断手机访问函数

    函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse

  2. input输入框默认文本点击清空,无输入显示效果

    网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。 本例中还添加了在不同情况下文本框中的文本颜色不同的

  3. Bcastr3.0详细使用教程

    Bcastr 3.0 beta flash 通用的图片浏览器 bcastr3.0 beta 是一款通用的图片浏览器 可以用于各种新闻系统或者blog系统 .可以读取xml设置播放列表,自定义xml地址 .可以将图片地址直接写网页中直接,不需要xml .自动适应图片大小 .循环播放,自定义自动播放时间

  4. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图:

  5. JS判断手机号码座机号码函数

    JS判断手机号码座机号码函数,可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu

随机推荐

  1. JS判断手机访问函数

    函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse

  2. input输入框默认文本点击清空,无输入显示效果

    网页上用到表单的地方经常会用到这样的效果,输入框中默认的情况下会有一段引导性的文字,当用户点击输入框的时候默认的文字会被情况,当输入框失去焦点并且用户没用输入内容的时候,再次显示默认文本。 本例中还添加了在不同情况下文本框中的文本颜色不同的

  3. Bcastr3.0详细使用教程

    Bcastr 3.0 beta flash 通用的图片浏览器 bcastr3.0 beta 是一款通用的图片浏览器 可以用于各种新闻系统或者blog系统 .可以读取xml设置播放列表,自定义xml地址 .可以将图片地址直接写网页中直接,不需要xml .自动适应图片大小 .循环播放,自定义自动播放时间

  4. 不错的医院页面挂号下拉效果

    不错的医院页面挂号下拉效果,仅供参考。 效果截图:

  5. JS判断手机号码座机号码函数

    JS判断手机号码座机号码函数,可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu