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创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
2014/08/16 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
Python3.6正式版新特性预览
2016/12/15 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python实现3D地图可视化
2020/03/25 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
离职保密承诺书
2014/05/28 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
中班教师个人总结
2015/02/05 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android