用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 ...
随机推荐
- .net 使用com组件操作word遇到的一些问题
1.警告: 方法“Microsoft.Office.Interop.Word._Document.Close(ref object, ref object, ref object)”和非方法“Micr ...
- ubuntu 执行Python脚本出现: /usr/bin/env: ‘python\r’: No such file or directory
原因: #!/usr/bin/env python 在ubuntu会变成 #!/usr/bin/env python\r 而\r 会被shell 当成参数 所以出现: /usr/bin/env: ‘ ...
- 使用flume抓取tomcat的日志文件下沉到kafka消费
Tomcat生产日志 Flume抓取日志下沉到kafka中 将写好的web项目打包成war包,eclise直接导出export,IDEA 在artifact中添加新的artifact-achieve项 ...
- 在本地电脑使用远程服务器的图形界面——包括 MATLAB、PyCharm 等各种软件
在用本地电脑连接远程服务器的时候,大部分时候只能用命令行来操作.虽然可以 在本地电脑用 PyCharm 进行远程调试.在本地电脑远程使用服务器的 Jupyter Notebook.Ubuntu 和 W ...
- leetcode个人题解——#8 string to integer
第八题 class Solution { public: int myAtoi(string str) { ; ; ; while(str[i] == ' ')i++; if (str[i] == ' ...
- Python3 数值类型与运算符
1.数值类型与进制 (1)基本类型 整型:int 浮点型:float 布尔类型:bool 复数:complex print(type(1)) print(type(1.1)) print(type(F ...
- HDU 3062 Party(2-SAT模版题)
Problem Description 有n对夫妻被邀请参加一个聚会,因为场地的问题,每对夫妻中只有1人可以列席.在2n 个人中,某些人之间有着很大的矛盾(当然夫妻之间是没有矛盾的),有矛盾的2个人是 ...
- WPF+数据库+三层
1.计算类 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...
- <Effective C++>读书摘要--Resource Management<二>
<Item 15> Provide access to raw resources in resource-managing classes 1.You need a way to con ...
- Mysql8 忘记Root密码(转)
第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1.2 在 [mysqld]最后加上如下语句 并保持退出文件: skip-grant-tables 1.3 重启mysql服务 ...