刺球网络安全社区

 找回密码
 立即注册

新浪微博登陆

只需一步, 快速开始

QQ登录

只需一步,快速开始

搜索
查看: 981|回复: 1

轻松几步,给你的网站加上“富强、民主、和谐”点击特效

[复制链接]

 成长值: 215630

新浪微博达人勋

  • TA的每日心情
    慵懒
    2019-4-4 01:41
  • 签到天数: 22 天

    [LV.4]偶尔看看III

    1134

    主题

    1716

    帖子

    37万

    积分

    管理员

    技术指数:★★★★★

    Rank: 9Rank: 9Rank: 9

    积分
    376126

    社区QQ达人最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2018-8-27 03:05:14 | 显示全部楼层 |阅读模式
    一、文字动画效果预览
    点击本页面任意位置即可!因为动画效果用的是CSS3 animation,因此,IE9及其以下浏览器无效果。
    二、如何在自己网站上添加类似效果?1. 复制并粘贴下面的内联CSS代码到页面任意位置(<body></body>标签中)
    1. <style>
    2. .text-popup {
    3.     animation: textPopup 1s;
    4.     color: red;
    5.     user-select: none;
    6.     white-space: nowrap;
    7.     position: absolute;
    8.     z-index: 99;
    9. }
    10. @keyframes textPopup {
    11.     0%, 100% {
    12.         opacity: 0;
    13.     }
    14.     5% {
    15.         opacity: 1;
    16.     }
    17.     100% {
    18.         transform: translateY(-50px);   
    19.     }
    20. }
    21. </style>
    复制代码
    2. 复制下面的内联JS代码到页面任意位置(<body></body>标签中)
    1. <script>
    2. var fnTextPopup = function (arr, options) {
    3.     // arr参数是必须的
    4.     if (!arr || !arr.length) {
    5.         return;   
    6.     }
    7.     // 主逻辑
    8.     var index = 0;
    9.     document.documentElement.addEventListener('click', function (event) {
    10.         var x = event.pageX, y = event.pageY;
    11.         var eleText = document.createElement('span');
    12.         eleText.className = 'text-popup';
    13.         this.appendChild(eleText);
    14.         if (arr[index]) {
    15.             eleText.innerHTML = arr[index];
    16.         } else {
    17.             index = 0;
    18.             eleText.innerHTML = arr[0];
    19.         }
    20.         // 动画结束后删除自己
    21.         eleText.addEventListener('animationend', function () {
    22.             eleText.parentNode.removeChild(eleText);
    23.         });
    24.         // 位置
    25.         eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
    26.         eleText.style.top = (y - eleText.clientHeight) + 'px';
    27.         // index递增
    28.         index++;
    29.     });   
    30. };

    31. fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
    32. </script>
    复制代码
    就有效果了!
    当然,你也可以把CSS和JS代码片段分别内嵌到自己的CSS文件和JS文件中。
    三、点击页面出现文字动画效果实现原理
    DOM时间的event对象中有个pageX和pageY可以获取到点击事件发生时候事件发生源相对于页面左上角的水平距离和垂直距离。对于鼠标点击事件,则对应鼠标相对于页面左上角的距离,因此,我们只要把文字内容定位到这个点击位置偏上一点位置就可以了。
    然后,配合CSS3 animation,写一个往上淡出效果就可以了。
    当文字元素插入到页面的时候,动画会自动执行。
    为了防止文字元素不断创建,占用不必要的资源,我们可以借助animationend事件实现动画结束的时候自动删除创建的文字元素。
    1. ele.addEventListener('animationend', function () {
    2.     ele.parentNode.removeChild(ele);
    3. });
    复制代码
    四、语法和参数
    语法如下:
    fnTextPopup(arr);
    其中,arr表示依次要显示的文字内容数组。
    例如,我们希望点击页面显示的不是核心社会主义价值观,而是想为自己喜欢偶像加油,可以这样:
    fnTextPopup(['蔡徐坤我爱你', '范丞丞你最棒', '请pick杨超越', '王菊加油', '吴宣仪你最美']);
    如果想要修改tips文字的颜色,字体等样式效果,修改CSS代码中.text-popup类名对应的CSS属性即可!
    五、结束语
    如果想要加入IE8浏览器,可以按照上面实现逻辑,改成jQuery的语法,然后,动画可以使用jQuery的animate()方法,这里不展示。
    另外,移动端没测试,如果没效果,试试document.documentElement改成document.body。
    本文几乎没有深度,但是,有价值,一些代码刚入门的小朋友就需要这些东西,节约了别人的时间,帮助了别人实现功能,是件有价值的事情,因此,值得花时间记录下来。而且,以后,说不定自己也要用到这个效果,也可以节约自己的时间,一举两得。





    点评

    海!外直播 t.cn/RxmJTrS 禁闻视频 t.cn/RJvO78K 查了下法西斯的定义:“反对民主主义和自由主义,主张建立以超阶级相标榜的集权主义统治,实行全面统制和恐怖镇压;进行由政府全盘计划经济..”觉得赵国反对啥?   发表于 6 天前
    [发帖际遇]: 刺球 捡了钱没交公 球卡 降了 1 . 幸运榜 / 衰神榜
    楼主热帖
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

    本版积分规则

    
     
     
    技术支持
    点击这里给我发消息
    在线客服
    点击这里给我发消息
    点击这里给我发消息
    刺球网安群①:
    刺球网安社区交流群①
    在线时间:
    8:30-21:00
     

    刺球网安 渝公网安备 50011402500080号 ( 渝ICP备15001097号-1 )申请友链|小黑屋| 刺球网络安全社区

    GMT, 2019-6-26 18:12 , Processed in 0.295188 second(s), 42 queries , Gzip On.

    Powered by 刺球网安

    © 2014-2025

    快速回复 返回顶部 返回列表