jquery动态更换设置背景图的方法


Posted in Javascript onMarch 25, 2014

有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的。并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥。

下面就如何实现背景更换给出一种解决方法:

如何实现

很简单,下面是 JQuery 代码:

function doChangeBkg()
{
 var bkgUrl=$("#inputBkgUrl").val();
 var repeateMode=$("#inputRepeatMode").val();
 var s="<style type='text/css' > body{ background-repeat : "+repeateMode+"; background-image:url(\""+bkgUrl+"\"); } </style>";
 $("#outputDiv").html(s);
}

原生JavaScript代码:

function doChangeBkg()
{
 var bkgUrl=$("#inputBkgUrl").val();
 var repeateMode=$("#inputRepeatMode").val();
 var s="<style type='text/css' > body{ background-repeat : "+repeateMode+"; background-image:url(\""+bkgUrl+"\"); } </style>";
 $("#outputDiv").html(s);
}

前端代码:

<div> 
背景图片URL:<input type="text" size="60" id="inputBkgUrl" /> <br />
背景图片重复方式: <select id="inputRepeatMode"><option value="repeat" selected="selected">repeat</option><option value="no-repeat">no-repeat</option><option value="repeat-x">repeat-x</option><option value="repeat-y">repeat-y</option></select> 
<input type="button" onclick="doChangeBkg()" value="确定更换" /> 
</div> 
<div id="outputDiv"></div>
Javascript 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 #Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 #Javascript
jquery的each方法使用示例分享
Mar 25 #Javascript
提取jquery的ready()方法单独使用示例
Mar 25 #Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
You might like
制作美丽的拉花
2021/03/03 冲泡冲煮
php模板函数 正则实现代码
2012/10/15 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python监控nginx端口和进程状态
2019/09/06 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Python 高效编程技巧分享
2020/09/10 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
五四青年节的活动方案
2014/08/20 职场文书
小学生运动会报道稿
2014/09/12 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书