用JQuery实现自定义选择桌面
有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的。并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥。
下面NowaMagic就如何实现背景更换给出一种解决方法:
效果演示
背景图片重复方式:
repeat
no-repeat
repeat-x
repeat-y
如何实现
很简单,下面是 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>
用JQuery实现自定义选择桌面的更多相关文章
- 帮助自定义选择框样式的Javascript - DropKick.js
来源:GBin1.com 在线演示 在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...
- 华为云计算IE面试笔记-桌面云中的用户组、虚拟机模板、模板虚拟机、虚拟机组和桌面组的关系及区别。发放完整复制和链接克隆虚拟机时,步骤有什么区别,要怎么选择桌面组?
概念解释: 模板虚拟机:FC上创建的裸虚拟机,用于制作不同类型的虚拟机模板. 虚拟机模板:用于创建虚拟机的模板,对裸虚拟机(模板虚拟机)进行配置或自定义安装软件后,转为模板.虚拟机模板类型有完整复制, ...
- jQuery取得select选择的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- [转]jquery开发自定义的插件总结
本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...
- [荐] jQuery取得select选择的文本与值
csdn:http://blog.csdn.net/tiemufeng1122/article/details/44154571 jquery获取select选择的文本与值获取select :获取se ...
- jquery validate 自定义验证方法
query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...
- jQuery获取Select选择的Text和 Value(转)用时比较方便寻找
---恢复内容开始--- jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code. ...
- jQuery获取Select选择的Text和 Value(转)
radio: radio: var item = $('input[name=items][checked]').val(); var item = $('input[name=items]:chec ...
随机推荐
- 第四篇 与Flask相关的插件(flask-session、wtforms)
公司中使用SQL的种方式: 1. 写Django:ORM(关系对象映射), 2. 写Flask和其他:有两种方式: (1) 原生SQL:使用原生SQL有两种选择: A. pymysql (python ...
- Fiddler - 拦截手机请求
1. 在电脑上安装Fillder. 安装好之后的Fiddler 打开是这样的: 2. 浏览器访问http://127.0.0.1:8888/fiddler,下载证书并安装 3. 打开抓取https请求 ...
- 在nginx环境下,直接用域名访问(首页)
①: server { listen 80; server_name www.njm1.com; location = / { #=/规则可以直接访问域名.如:www.njm1.com.跳转到http ...
- <cfloat> (float.h)
头文件: <cfloat> (float.h) 浮点类型的特性 这个头文件为特殊系统和编译器的实现描述了浮点类型的特征. 一个浮点数包含四个元素: 一个标志(a sign):正或负; 一个 ...
- 线性代数之——正交矩阵和 Gram-Schmidt 正交化
这部分我们有两个目标.一是了解正交性是怎么让 \(\hat x\) .\(p\) .\(P\) 的计算变得简单的,这种情况下,\(A^TA\) 将会是一个对角矩阵.二是学会怎么从原始向量中构建出正交向 ...
- allocator类
一.动态数组 [new的局限性] new将内存分配和对象构造组合在一起,同样delete将对象析构和内存释放组合在一起 我们分配单个对象时,通常希望将内存分配和对象初始化组合在一起(我们知道对象应有什 ...
- 算法与数据结构实验题 4.2 小 F 打怪
★实验任务 小 F 很爱打怪,今天因为系统 bug,他提前得知了 n 只怪的出现顺序以及击 倒每只怪得到的成就值 ai.设第一只怪出现的时间为第 1 秒,这个游戏每过 1 秒 钟出现一只新怪且没被击倒 ...
- C++读取文件统计单词个数及频率
1.Github链接 GitHub链接地址https://github.com/Zzwenm/PersonProject-C2 2.PSP表格 PSP2.1 Personal Software Pro ...
- android平台蓝牙编程(转)
http://blog.csdn.net/pwei007/article/details/6015907 Android平台支持蓝牙网络协议栈,实现蓝牙设备之间数据的无线传输. 本文档描述了怎样利用a ...
- mysql入门 — (2)
创建表 CREATE TABLE 表名称 [IF NOT EXISTS]( 字段名1 列类型[属性] [索引] 字段名2 列类型[属性] [索引] ... 字段名n 列类型[属性] [索引] )[表类 ...