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中URL编码函数代码
Jan 11 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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/12/05 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python避免死锁方法实例分析
2015/06/04 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python实现logistic分类算法代码
2020/02/28 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
机关道德讲堂实施方案
2014/03/15 职场文书
科研课题实施方案
2014/03/18 职场文书
商场主管竞聘书
2014/03/31 职场文书
学习礼仪心得体会
2014/09/01 职场文书
介绍信怎么写
2015/01/30 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
导游词之湖北武当山
2019/09/23 职场文书