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 MD5加密代码md5.js 纯JS代码写的md5加密代码

    JS MD5加密代码md5.js 纯JS代码写的md5加密代码。 代码打包下载： JS MD5加密代码md5.js 纯JS代码写的md5加密代码 使用方法： 在页面中引用md5.js，使用md5函数来加密字符串。 复制代码 代码如下: script src=md5.js/script script //alert(md5(admin)); doc

  2. 关闭网页时弹出对话框JS代码

    关闭网页时弹出对话框JS代码，当访客要关闭网页时弹出挽留对话框，用户体验上差了一点，但是据统计访客停留率还是挺高的。 代码效果:

  3. JS实现百叶窗效果

    JS实现百叶窗效果，适合做专家介绍，设备技术等介绍效果。效果演示中使用的是纯色图片，将对应的图片替换即可。 引用slider.js文件在底部调用初始化代码script type=text/javascriptslider.init();/script ，演示效果中为方便起见将slider.js中的代码整合到

  4. JS cookie操作函数

    JS cookie操作函数，Cookie增加，读取，删除。 复制代码 代码如下: //获得coolie 的值 function cookie(name) { //得到分割的cookie名值对 var cookieArray = document.cookie.split(; ); var cookie = new Object(); for (var i = 0; i cookieArray.length;

  5. JS禁止复制网站文章代码

    JS禁止复制网站文章代码，可以实现网页上的文本无法复制，在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码： 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond

随机推荐

  1. JS MD5加密代码md5.js 纯JS代码写的md5加密代码

    JS MD5加密代码md5.js 纯JS代码写的md5加密代码。 代码打包下载： JS MD5加密代码md5.js 纯JS代码写的md5加密代码 使用方法： 在页面中引用md5.js，使用md5函数来加密字符串。 复制代码 代码如下: script src=md5.js/script script //alert(md5(admin)); doc

  2. 关闭网页时弹出对话框JS代码

    关闭网页时弹出对话框JS代码，当访客要关闭网页时弹出挽留对话框，用户体验上差了一点，但是据统计访客停留率还是挺高的。 代码效果:

  3. JS实现百叶窗效果

    JS实现百叶窗效果，适合做专家介绍，设备技术等介绍效果。效果演示中使用的是纯色图片，将对应的图片替换即可。 引用slider.js文件在底部调用初始化代码script type=text/javascriptslider.init();/script ，演示效果中为方便起见将slider.js中的代码整合到

  4. JS cookie操作函数

    JS cookie操作函数，Cookie增加，读取，删除。 复制代码 代码如下: //获得coolie 的值 function cookie(name) { //得到分割的cookie名值对 var cookieArray = document.cookie.split(; ); var cookie = new Object(); for (var i = 0; i cookieArray.length;

  5. JS禁止复制网站文章代码

    JS禁止复制网站文章代码，可以实现网页上的文本无法复制，在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码： 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond