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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 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
PHP初学入门
2006/11/19 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python模块之time模块(实例讲解)
2017/09/13 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
教师年终个人自我评价
2013/10/04 职场文书
数控专业应届生求职信
2013/11/27 职场文书
商务主管岗位职责
2013/12/08 职场文书
社会实践心得体会
2014/01/03 职场文书
招标授权委托书样本
2014/09/23 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
硕士学位论文评语
2014/12/31 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
Nginx配置根据url参数重定向
2022/04/11 Servers