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框架(iframe)操作总结
Apr 16 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
js基础语法与maven项目配置教程案例
Jul 15 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
Terran历史背景
2020/03/14 星际争霸
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
Angularjs 基础入门
2014/12/26 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
校园门卫岗位职责
2013/12/09 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
推广普通话的宣传语
2015/07/13 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
网络舆情信息简报
2015/07/21 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫