文档章节

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

dubox
 dubox
发布于 2016/11/28 21:13
字数 262
阅读 32
收藏 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
博文 89
码字总数 24327
作品 0
西安
程序员
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

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

易达
2012/08/04
0
0
程序猿必备的10款web前端动画插件十三

  1.jQuery圆形旋转切换菜单 带菜单项描述   jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款...

爱码农
08/30
0
0
6大理由让你喜欢上jQuery

jQuery是一个用来简化HTML客户端开发的JS(JavaScrip)库,它支持HTML DOM处理,同时还融合了部分HTML和CSS。许多网站建设公司已经加入了jQuery的阵营,你的公司也该加入了。 下面就来看看j...

justjavac
2012/08/07
0
3
7个神奇的jQuery 3D插件

7个神奇的jquery 3D插件,让你可以实现一些媲美Flash的动画特效。 1. Flip HTML content in 3D 用jQuery实现的3D翻转效果,支持html内容的翻转。 2. Agile Carousel 3D效果的jQuery跑马灯特效...

晨曦之光
2012/03/09
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1

没有更多内容

加载失败,请刷新页面

加载更多

职场老人谈:Linux学习分享

随着Linux系统慢慢渗透到生活的方方面面,对Linux的基本操作就越来越必要了。 我是一位软件测试工程师,初次接触Linux主要是因为需要配置Linux服务器。因为Linux系统是一套开源的操作系统,安...

linux-tao
31分钟前
1
0
Oracle chr() ascii()

函数简介 实用函数 chr() 和 ascii() chr() 函数将ASCII码转换为字符: ASCII码 –> 字符; ascii() 函数将字符转换为ASCII码: 字符 –> ASCII码; 在 Oracle 中 chr() 函数和 ascii() 是一对...

taadis
33分钟前
2
0
职场老人谈:Linux学习分享

随着Linux系统慢慢渗透到生活的方方面面,对Linux的基本操作就越来越必要了。 我是一位软件测试工程师,初次接触Linux主要是因为需要配置Linux服务器。因为Linux系统是一套开源的操作系统,安...

linuxprobe16
42分钟前
1
0
Confluence 6 Windows 中以服务方式自动重启的原因

针对长时间使用的 Confluence,我们推荐你配置 Confluence 自动随操作系统重启而启动。针对一些 Windows 的服务器,这意味着需要让 Confluence 以服务的方式运行。 有下面 2 种方式来以服务的...

honeymose
今天
4
0
day93-20180920-英语流利阅读-待学习

时尚之觞:外表光鲜靓丽,其实穷得要命 Lala 2018-09-20 1.今日导读 讲到时尚界,我们脑海里浮现的可能都是模特和设计师光鲜靓丽、从容潇洒的模样。可是,最近在法国出版的一本书却颠覆了我们...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部