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 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
微信小程序实现animation动画
Jan 26 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 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
Zerg建筑一览
2020/03/14 星际争霸
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
python3中数组逆序输出方法
2020/12/01 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
大学生个人求职信范文
2013/09/21 职场文书
最新的大学生找工作自我评价
2013/09/29 职场文书
银行演讲稿范文
2014/01/03 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
租赁意向书范本
2014/04/01 职场文书
股权转让协议书
2014/04/12 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
中秋节祝酒词
2015/08/12 职场文书