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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
video.js使用改变ui过程
Mar 05 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
JS setTimeout与setInterval的区别
Apr 20 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
js function定义函数使用心得
2010/04/15 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
JS的数组迭代方法
2015/02/05 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
一分钟理解js闭包
2016/05/04 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
javascript对HTML字符转义与反转义
2018/12/13 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
npm qs模块使用详解
2020/02/07 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python正则表达式的使用
2017/06/12 Python
Python @property装饰器原理解析
2020/01/22 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
C面试题
2015/10/08 面试题
请解释流与文件有什么不同
2016/07/29 面试题
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
心灵点滴观后感
2015/06/02 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
详解JS ES6编码规范
2021/05/07 Javascript
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js