Jquery刷新页面背景图片随机变换的实现方法


Posted in Javascript onMarch 15, 2013

使用方法:下载jquery-1.9.1.js,然后设置CSS,图片文件放在images/new_feed/目录下,图片命名格式为bg_x.jpg,修改随机数产生范围

一、CSS代码

<style>
 body{
                padding:0;
                background-attachment: fixed;
                background-clip: border-box;
                background-color: #666666;
                background-origin: padding-box;
                background-position: center top;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                background-image:url("");}
</style>

二、Jquery代码

<script type="text/javascript">
     $(document).ready(function(){
         var random_bg=Math.floor(Math.random()*6+1);
         var bg='url(images/new_feed/bg_'+random_bg+'.jpg)';
         $("body").css("background-image",bg);
});
</script>
Javascript 相关文章推荐
jQuery 无刷新分页实例代码
Nov 12 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 #Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
You might like
傻瓜化配置PHP环境――Appserv
2006/12/13 PHP
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
javascript之Partial Application学习
2013/01/10 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python中return的返回和执行实例
2019/12/24 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
学校对教师的评语
2014/04/28 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
大雁塔英文导游词
2015/02/10 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL