文档章节

jquery 实现的一个 随机云标签网页背景

dubox
 dubox
发布于 2016/11/28 21:13
字数 262
阅读 33
收藏 1

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

$(function(){

    $('body').append('

<div class="_bg" style="position:absolute;top:0;left:0;width:100%;height: 100%;overflow:hidden;z-index:-1;"></div>

');

    var _bg = $("._bg");    //背景
    var _font_size = 300;   //最大字体
    var _fade = 0.5;        //内容透明度
    var _color = '';        //内容颜色 留空则随机
    //设置背景高度
    _bg.height($(window).height()); //$('body').height(),$(window).height(),500
    //给背景添加内容 在这里自定义内容
    var _content = '<i>A</i><i >B</i><i >V</i><i >T</i><i >D</i><i >F</i><i >G</i><i >W</i><i >S</i><i >Q</i>';
    _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包。。。

© 著作权归作者所有

共有 人打赏支持
dubox
粉丝 3
博文 96
码字总数 27792
作品 0
西安
程序员
私信 提问
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11
为开发者们准备的 10 款超棒的 jQuery 视频插件

跟之前介绍的 2013 年 12 月最好的 35+个 jQuery 插件 不同,这篇文章是给开发者们准备的关于视频播放方面的 10 款最好的 jQuery 视频插件。这 10 款插件各有各的特色,能很方便的在网页上嵌...

oschina
2014/01/17
20.7K
13
分享随机推荐的10个不错的jQuery插件

jQuery做为一个非常流行的javascript框架已经被众多的开发人员所采用用来构建丰富并且具有震撼力的界面动画和特效,这里我们随机的选择了10个插件和大家分享如何使用,希望大家喜欢! 1. Aga...

gbin1
2011/07/25
1K
1
10 款提高开发效率的 jQuery/CSS3 组件

前端开发是一项十分繁琐而又耗体力的工作,如何更有效率的开发我们的应用,很多人会选择适当地使用一些jQuery插件。今天就要给大家分享10款可以提高开发效率的jQuery/CSS3组件。部分插件可以...

yykj
2013/10/29
539
2

没有更多内容

加载失败,请刷新页面

加载更多

python机器学习及实践学习笔记1-如何打开ipynb后缀文件

python机器学习及实践学习笔记1-如何打开ipynb后缀文件 2017年02月22日 14:58:08 hustzhoutian 阅读数:45365更多 个人分类: 深度学习 需要安装ipython notebook,如果你已经安装Anaconda软...

linjin200
15分钟前
2
0
关于在vim中的查找和替换

1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车。 Vim会跳转到第一个匹配。按下n查找下一个,按下N查找上一个。 Vim查找支持正则表达式,例如/vim$匹配行尾的"...

休辞醉倒
19分钟前
1
0
in_array的坑

PHP in_array的坑 ps: 应该是弱类型语言的坑 php文档 顾名思义,in_array就是查找一个值是否在数组里面。 问题 事故现场 一个sql注入的测试代码如下: $type = $_GET['type'];$types = [2,3,...

o0无忧亦无怖
20分钟前
18
1
Yarn(包管理器) 的基本用法

Yarn是一个快速、可靠、安全的依赖管理工具,是npm的代替品。 Yarn对你的代码来说是一个包管理工具,你可以通过它使用全世界开发者的代码,或者分享自己的代码。 安装Yarn: 操作系统不同,安...

帝子兮
21分钟前
1
0
阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

一、八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储。持续8年的投入,历经8年双...

阿里云官方博客
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部