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 相关文章推荐
JavaScript 学习笔记(四)
Dec 31 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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 curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
Javascript 入门基础学习
2010/03/10 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
js控制input输入字符解析
2013/12/27 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python中方法链的使用方法
2016/02/23 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
汇科协同Java笔试题
2012/03/31 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
报关简历自我评价怎么写
2013/09/19 职场文书
同事打架检讨书
2014/02/04 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
详解Python requests模块
2021/06/21 Python
MySQL索引是啥?不懂就问
2021/07/21 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技