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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
javascript string字符串优化问题
2011/07/31 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中http请求方法库汇总
2016/01/06 Python
django中send_mail功能实现详解
2018/02/06 Python
python实现推箱子游戏
2020/03/25 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
加强干部作风建设整改方案
2014/10/24 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android