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

下面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. MySQL☞upper函数

    upper(列名/字符串):把小写字母改为大写字母 格式: select  upper(列名/字符串) from 表名 如下图:

  2. linux部署MantisBT(二)部署php

    二.部署php 1.下载php安装包 http://php.net/downloads.php 2.安装php yum install libxml2 yum install libxml2-deve ...

  3. 【转】关于cocos2dx+lua注册事件函数详解

    转载:http://www.taikr.com/article/1605 registerScriptTouchHandler 注册触屏事件registerScriptTapHandler注册点击事件 ...

  4. Unity Lighting - Choosing a Rendering Path 选择渲染路径(三)

      Choosing a Rendering Path 选择渲染路径 Unity supports a number of rendering techniques, or ‘paths’. An i ...

  5. Java开发工程师(Web方向) - 02.Servlet技术 - 第3章.Servlet应用

    第3章.Servlet应用 转发与重定向 转发:浏览器发送资源请求到ServletA后,ServletA传递请求给ServletB,ServletB生成响应后返回给浏览器. 请求转发:forward: ...

  6. 了解Python控制流语句——for 循环

    for 循环 Python教程中for...in 语句是另一种循环语句,其特点是会在一系列对象上进行迭代(Iterates),意即它会遍历序列中的每一个项目.我们将在后面的Python序列(Seque ...

  7. [CF19B]Checkout Assistant

    题目描述 Bob 来到一家现购自运商店,将 n 件商品放入了他的手推车,然后到收银台 付款.每件商品由它的价格 pi 和收银员扫描它的时间 ti 秒定义.当收银员正在扫 描某件商品时,Bob 可以从他 ...

  8. 总结获取原生JS(javascript)基本操作

    var a = document.getElementByIdx_x_x("dom"); jsCopy(a);//调用清理空格的函数 var b = a.childNodes;// ...

  9. (原) MaterialEditor部- UmateriaEditor中 Node编译过程和使用(1)

    @author: 白袍小道 转载说明原处 插件同步在GITHUB: DaoZhang_XDZ     最后YY需求(手滑) 1.在理清楚基础套路和细节后,自定义纹理资源,并加入到现有UE材质系统 2. ...

  10. 【zabbix 监控】第二章 安装测试被监控主机

    客户端安装测试 一.准备两台被监控主机,分别做如下操作: web129:192.168.19.129 web130:192.168.19.130 [root@web129 ~]#yum -y inst ...