博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery 实现的一个 随机云标签网页背景
阅读量:6342 次
发布时间:2019-06-22

本文共 1225 字,大约阅读时间需要 4 分钟。

hot3.png

 几年前给自己的博客写的装X用的。。。哈哈哈。。。

$(function(){    $('body').append('
'); var _bg = $("._bg"); //背景 var _font_size = 300; //最大字体 var _fade = 0.5; //内容透明度 var _color = ''; //内容颜色 留空则随机 //设置背景高度 _bg.height($(window).height()); //$('body').height(),$(window).height(),500 //给背景添加内容 在这里自定义内容 var _content = 'ABVTDFGWSQ'; _bg.html(_content); _bg.children().each(function(){ //随机背景内容的 大小 位置 旋转 $(this).css({ 'position':'absolute', '-webkit-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)", '-moz-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)", '-ms-transform':"rotate("+Math.ceil(Math.random()*360)+"deg)", 'font-size':Math.ceil(Math.random()*_font_size)+'px', 'top':Math.ceil(Math.random()*_bg.height())+'px', 'left':Math.ceil(Math.random()*_bg.width())+'px' }); if(_color){ $(this).css('color',_color); }else{ $(this).css('color','#'+Math.ceil(Math.random()*1000000)); } $(this).fadeTo(0,Math.random()); }); //设置整体透明度 _bg.fadeTo(0,_fade);});

 

由于使用了css3的旋转属性 ,一些低版本浏览器可能效果不太一样。。。

记得加载jquery包。。。

转载于:https://my.oschina.net/u/2399303/blog/795700

你可能感兴趣的文章
量化交易之启航
查看>>
TX Text Control文字处理教程(3)打印操作
查看>>
CENTOS 7 如何修改IP地址为静态!
查看>>
MyCat分片算法学习(纯转)
查看>>
IO Foundation 3 -文件解析器 FileParser
查看>>
linux学习经验之谈
查看>>
mysqld_multi实现多主一从复制
查看>>
中介模式
查看>>
JS中将变量转为字符串
查看>>
servlet笔记
查看>>
JVM(五)垃圾回收器的前世今生
查看>>
CentOS 7 下安装 Nginx
查看>>
Spring Boot 自动配置之@EnableAutoConfiguration
查看>>
为了学习go我从0开始用beego写了一个简单个人博客(2)登陆管理
查看>>
职业女性:学会减压救自己!
查看>>
OSChina 周一乱弹 —— 这个需求很简单!
查看>>
OSChina 周一乱弹 —— 我当你是朋友,你却……
查看>>
[Android官方API阅读]___<Device Compatibility>
查看>>
如何写出好的产品需求文档(PRD)?
查看>>
Flex Chart
查看>>