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 相关文章推荐
javascript 学习之旅 (2)
Feb 05 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
js中this对象用法分析
Jan 05 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
js实现漫天星星效果
2017/01/19 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Python实现备份文件实例
2014/09/16 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python如何修改装饰器中参数
2018/03/20 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
保卫科工作岗位职责
2014/03/01 职场文书
行政管理专业求职信
2014/07/06 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
工作感言一句话
2015/08/01 职场文书
董事长秘书工作总结
2015/08/14 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书