有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的。并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者特定节日就用该主题背景,让你的网站显得非常灵活,不枯燥。

下面NowaMagic就如何实现背景更换给出一种解决方法:

效果演示

背景图片URL: 
背景图片重复方式: 
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实现自定义选择桌面的更多相关文章

  1. 帮助自定义选择框样式的Javascript - DropKick.js

    来源:GBin1.com 在线演示  在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...

  2. 华为云计算IE面试笔记-桌面云中的用户组、虚拟机模板、模板虚拟机、虚拟机组和桌面组的关系及区别。发放完整复制和链接克隆虚拟机时,步骤有什么区别,要怎么选择桌面组?

    概念解释: 模板虚拟机:FC上创建的裸虚拟机,用于制作不同类型的虚拟机模板. 虚拟机模板:用于创建虚拟机的模板,对裸虚拟机(模板虚拟机)进行配置或自定义安装软件后,转为模板.虚拟机模板类型有完整复制, ...

  3. jQuery取得select选择的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :$("#ddlregtype").find("option:selec ...

  4. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  5. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  6. [荐] jQuery取得select选择的文本与值

    csdn:http://blog.csdn.net/tiemufeng1122/article/details/44154571 jquery获取select选择的文本与值获取select :获取se ...

  7. jquery validate 自定义验证方法

    query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...

  8. jQuery获取Select选择的Text和 Value(转)用时比较方便寻找

    ---恢复内容开始--- jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code. ...

  9. jQuery获取Select选择的Text和 Value(转)

    radio: radio: var item = $('input[name=items][checked]').val(); var item = $('input[name=items]:chec ...

随机推荐

  1. .net 使用com组件操作word遇到的一些问题

    1.警告: 方法“Microsoft.Office.Interop.Word._Document.Close(ref object, ref object, ref object)”和非方法“Micr ...

  2. 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: ‘ ...

  3. 使用flume抓取tomcat的日志文件下沉到kafka消费

    Tomcat生产日志 Flume抓取日志下沉到kafka中 将写好的web项目打包成war包,eclise直接导出export,IDEA 在artifact中添加新的artifact-achieve项 ...

  4. 在本地电脑使用远程服务器的图形界面——包括 MATLAB、PyCharm 等各种软件

    在用本地电脑连接远程服务器的时候,大部分时候只能用命令行来操作.虽然可以 在本地电脑用 PyCharm 进行远程调试.在本地电脑远程使用服务器的 Jupyter Notebook.Ubuntu 和 W ...

  5. leetcode个人题解——#8 string to integer

    第八题 class Solution { public: int myAtoi(string str) { ; ; ; while(str[i] == ' ')i++; if (str[i] == ' ...

  6. Python3 数值类型与运算符

    1.数值类型与进制 (1)基本类型 整型:int 浮点型:float 布尔类型:bool 复数:complex print(type(1)) print(type(1.1)) print(type(F ...

  7. HDU 3062 Party(2-SAT模版题)

    Problem Description 有n对夫妻被邀请参加一个聚会,因为场地的问题,每对夫妻中只有1人可以列席.在2n 个人中,某些人之间有着很大的矛盾(当然夫妻之间是没有矛盾的),有矛盾的2个人是 ...

  8. WPF+数据库+三层

    1.计算类 using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...

  9. <Effective C++>读书摘要--Resource Management<二>

    <Item 15> Provide access to raw resources in resource-managing classes 1.You need a way to con ...

  10. Mysql8 忘记Root密码(转)

    第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1.2 在 [mysqld]最后加上如下语句 并保持退出文件: skip-grant-tables 1.3 重启mysql服务 ...