【NB考核】春节灯笼挂件Html+Css实现+点击页面出现文字

网站搭建   © 文章版权由 admin 解释，禁止匿名转载

图文

  • 评论数

    49

  • 浏览数

    10300

  • 收藏数

    0

发布文章 回复

#楼主# 2021-2-3

马上春节了呢，各位凯粉们有没有想过在自己博客挂个灯笼呢？？？[玫瑰]

这是html的代码:





节











春









js的代码在5楼和7楼

图二中下面划横线的代码是弹出的文字[玫瑰]

第一次点击弹出 唱
第二次点击弹出 跳
第三次点击弹出 Rap
第四次点击弹出 篮球
第五次点击弹出 Music
第六次点击弹出 666
第七次点击弹出 唱
第八次……
以此类推


源码（HTML + CSS）:
链接:
本帖含有隐藏内容，请您 回复 后查看

密码:点赞




效果图（图一）

阅读全文
11
举报
沙发
此账号已注销 2021-2-3
一楼自古归楼主[玫瑰]

举报 0

板凳
此账号已注销 2021-2-3
有人吗？[疑问]

举报 0

地板
此账号已注销 2021-2-3
如何让它点击后出现文字呢？

举报 0

4楼
此账号已注销 2021-2-3
先定义class

举报 0

5楼
此账号已注销 2021-2-3
[玫瑰]如图:

举报 0

6楼
此账号已注销 2021-2-3
然后，再创建公共js在需要的页面引入js链接

举报 0

7楼
此账号已注销 2021-2-3
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("唱", "跳", "Rap", "篮球", "Music", "666");
var $i = $("").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"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();
});
});
});

举报 0

8楼
此账号已注销 2021-2-3
完结撒花[玫瑰][玫瑰][玫瑰]

举报 0

9楼
归零玖泗 2021-2-3
听说9楼有凯币

举报 0

10楼
此账号已注销 2021-2-3
可怜兮兮[玫瑰]

举报 0

1 2 3 4 5 下一页

评论
登录后才可发表内容
此账号已注销

  • 主题

    863

  • 帖子

    39585

  • 关注者

    0

TA的新帖
凯特网 Archiver 手机版 小黑屋
Copyright © 2019 凯特网.   Powered by HYBBS 2.3.4  

Runtime:0.0469s Mem:2040Kb