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 使用手册(五)
Sep 23 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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如何得到当前页和上一页的地址?
2006/11/27 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
JavaScript中import用法总结
2019/01/20 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python使用爬虫猜密码
2016/02/19 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python基于openpyxl生成excel文件
2020/12/23 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
开办饭店创业计划书
2013/12/28 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
寄语学生的话
2014/04/10 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
前台岗位职责范本
2015/04/16 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
深入浅析React中diff算法
2021/05/19 Javascript