经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
博客园添加背景音乐,背景效果!
来源:cnblogs  作者:郭楷丰  时间:2019/7/3 8:42:41  对本文有异议

博客园添加背景音乐,背景效果

申请博客园JS权限

  • 申请话术 实例

  1. 尊敬的博客园管理员:
  2. 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢!
  • 开通以后就可以使用js代码进行装饰了
  • 流程图

添加网易云背景音乐

  • 单曲添加

  • 打开网易云登录账户,搜索自己喜欢的歌曲

  • 复制代码到博客园

  • 看看效果

  • 添加歌单为背景音乐

  • 创建歌单

  • 把喜欢的音乐添加到歌单

  • 拷贝代码到博客园

点击鼠标点击样式

  • 鼠标点击效果代码 (?喜欢就关注一下吧? 里边的文字可以根据自己需要进行修改)
  1. <script type="text/javascript">
  2. var a_idx = 0;
  3. jQuery(document).ready(function($) {
  4. $("body").click(function(e) {
  5. var a = new Array("?喜欢就关注一下吧?","?不是点这里哦?","?快去点赞?","?在文章最下面哦?","?快去推荐一下吧?","?感谢观看?","?");
  6. var $i = $("<span></span>").text(a[a_idx]);
  7. a_idx = (a_idx + 1) % a.length;
  8. var x = e.pageX,
  9. y = e.pageY;
  10. $i.css({
  11. "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
  12. "top": y - 20,
  13. "left": x,
  14. "position": "absolute",
  15. "font-weight": "bold",
  16. "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
  17. });
  18. $("body").append($i);
  19. $i.animate({
  20. "top": y - 180,
  21. "opacity": 0
  22. },
  23. 1500,
  24. function() {
  25. $i.remove();
  26. });
  27. });
  28. });
  29. </script>
  • 其他点击效果

二次元看板娘

  • 效果

雪花效果

  • 效果

  • 代码 调整后添加到博客园装饰的页面即可
  1. <script type="text/javascript">
  2. window.onload = function () {
  3. var minSize = 15; //最小字体
  4. var maxSize = 30;//最大字体
  5. var newOne = 600; //生成雪花间隔
  6. var flakColor = "#1bd3ff"; //雪花颜色
  7. var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("?");//定义一个雪花
  8. var dhight = $(window).height(); //定义视图高度
  9. var dw =$(window).width()-80; //定义视图宽度
  10. setInterval(function(){
  11. var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
  12. var startLeft = Math.random()*dw; //雪花生成是随机的left值
  13. var startOpacity = 0.7+Math.random()*0.3; //随机透明度
  14. var endTop= dhight-100; //雪花停止top的位置
  15. var endLeft= Math.random()*dw; //雪花停止的left位置
  16. var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同
  17. flak.clone().appendTo($("body")).css({
  18. "left":startLeft ,
  19. "opacity":startOpacity,
  20. "font-size":sizeflak,
  21. "color":flakColor
  22. }).animate({
  23. "top":endTop,
  24. "left":endLeft,
  25. "apacity":0.1
  26. },durationfull,function(){
  27. $(this).remove()
  28. });
  29. },newOne);
  30. }
  31. </script>

原文链接:http://www.cnblogs.com/guokaifeng/p/11121939.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号