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对象和DOM对象使用说明
Jun 25 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
Javascript高级技巧分享
Feb 25 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
json数据格式常见操作示例
Jun 13 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
浅谈super-vuex使用体验
2018/06/25 Javascript
vue生命周期实例小结
2018/08/15 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python中随机函数random用法实例
2015/04/30 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
py-charm延长试用期限实例
2019/12/22 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
深圳-东方伟业笔试部分
2015/02/11 面试题
巾帼建功标兵事迹材料
2014/05/11 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python