建站教程

wordpress如何在网页添加鼠标点击飘动文字特效

字号+ 作者:智然 来源:临沂seo 2019-06-16 07:49 我要评论( )

浏览网站时经常能看到一些特殊效果,有跟随鼠标的文字,自动更新的日期等,其实这些效果都是通过在网页中添加html代码实现的。我们利用现成的特效代码添加到自己的网页。今天偶然在网上找到一个关于wordpress的特效代码,分享给大家。 教程开始: 1、打开wor

  

       浏览网站时经常能看到一些特殊效果,有跟随鼠标的文字,自动更新的日期等,其实这些效果都是通过在网页中添加html代码实现的。我们利用现成的特效代码添加到自己的网页。今天偶然在网上找到一个关于wordpress的特效代码,分享给大家。
 
  教程开始:
 
  1、打开wordpress后台。
 
打开wordpress后台
 
  2、打开“外观”下面的“编辑”选中右侧的“主题页脚 (footer.php)”文件。
 
打开“外观”下面的“编辑”选中右侧的“主题页脚 (footer.php)”文件
 
  加入以下代
 
  <script type="text/javascript">
/*富强民主文明和谐*/
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善", "手麻了", "歇会儿");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 9999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
</script>
 
  提醒:
 
  ("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善")文字可以修改为其他的话。
 
  “font-weight”: “bold”(文字样式), “color”: “#ff6651″(文字颜色)根据需要自定义。
 
  教程结束,大家学会了吗?

 

网站内容整理于网络,如有侵权请告知删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 三大主流建站系统哪个更有利于网站

    三大主流建站系统哪个更有利于网站

    2019-06-01 09:58

  • 网站制作技能讲解!

    网站制作技能讲解!

    2019-05-30 14:19

  • wordpress博客路径优化和菜单设置方法

    wordpress博客路径优化和菜单设置方法

    2018-12-13 09:12

  • 最简单的wordpress搬家操作流程

    最简单的wordpress搬家操作流程

    2018-11-24 15:29

网友点评
精彩导读