[代码]点击网站空白显示随机两位数效果 - 微夏博客网 - 致力于网络优秀资源的分享、交流!

  • 首页
  • PHP
  • [代码]点击网站空白显示随机两位数效果

[代码]点击网站空白显示随机两位数效果

由 ℡若兮相言 于 2015-11-21 20:25 Saturday 发表,已有1439人观看。


    本文易捷博客网要给大家介绍的是添加随机两位数效果。

    首先来看下效果:



    QQ截图20151121203007.png


    之前易捷博客在其它的网站也看到过,但是一直没能成功,今天又偶然碰到,再次试下成功了。把方法分享给大家。


    1、把JS文件上传到模板目录中的 JS 文件夹中(具体的JS文件会打包在文章最下面)

    2、在 header.php 中添加以下代码


    <!--添加数字效果开始-->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js?from=vxia.net"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js?from=vxia.net"></script>
    <script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/number.js?from=vxia.net"></script>
    <!--添加数字效果结尾-->


    其中 number.js 的代码为


    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"
    });
    //易捷博客网 www.vxia.net
    $("body").append($i);
    $i.animate(
    {"top":y-180,"opacity":0},
    1500,
    function(){$i.remove();}
    );
    e.stopPropagation();
    });
    });


    可以把以上代码,自己另存为 number.js 上传即可。


    3、重新打开网站,刷新后点击空白处即可看到效果。


    简单调用效果:http://www.vxia.net/demo/click.html



    JS文件下载地址:

    百度云盘:http://pan.baidu.com/s/1jGEpLUu 密码:h5j5 

    360云盘:http://yunpan.cn/cLbx3tH8Krkmq  访问密码 d6a1



赞赏
X
赞赏方式:
  • 支付宝
  • 微信

打开支付宝扫一扫

标签: 代码 JS




↓↓↓↓↓你可能在找下面的内容↓↓↓↓↓

特别申明:若无说明,文章均为原创,转载时请注明本文地址,谢谢合作!
本文链接:
评论:
idnc 2015-11-23 08:34 Google Chrome 45.0.2454.101 Windows 8.1
博主多谢了,效果做出来了

idnc 2015-11-22 23:10 Google Chrome 45.0.2454.101 Windows 8.1
博主,请问这个怎么做的,试了一下没有效果,那个header.php的名字是必须这么命名吗 我是单独在一个文件夹里建了个1.php和一个js文件夹  不过没出效果

℡若兮相言 2015-11-22 23:28
@idnc:简单调用效果:http://www.vxia.net/demo/click.html 可通过右键查看源码的方式,进行简单调用源码

发表评论: