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 pagination插件实现无刷新分页代码
Oct 13 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
JS中Iframe之间传值的方法
2013/03/11 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python图书管理系统
2020/04/05 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python画环形图的方法
2020/03/25 Python
jupyter 导入csv文件方式
2020/04/21 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python中return不返回值的问题解析
2020/07/22 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
前台文员岗位职责及工作流程
2013/11/19 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
保护水资源的标语
2014/06/17 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Python中time标准库的使用教程
2022/04/13 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python