当前位置:  编程技术>WEB前端

jquery动态更换设置背景图的方法

    来源: 互联网  发布时间:2014-08-25

    本文导语:  有些时候,我们可以为用户提供很贴心的功能,比如判断用户是什么时候来访问的,然后给出一句问候,晚上好,下午好之类的。并且更换网页的背景颜色,比如晚上的时候就可以用满天星星的背景,白天就用阳光灿烂,或者...

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

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

如何实现

很简单,下面是 JQuery 代码:

代码如下:

function doChangeBkg()
{
 var bkgUrl=$("#inputBkgUrl").val();
 var repeateMode=$("#inputRepeatMode").val();
 var s=" body{ background-repeat : "+repeateMode+"; background-image:url(""+bkgUrl+""); } ";
 $("#outputDiv").html(s);
}

原生JavaScript代码:

代码如下:

function doChangeBkg()
{
 var bkgUrl=$("#inputBkgUrl").val();
 var repeateMode=$("#inputRepeatMode").val();
 var s=" body{ background-repeat : "+repeateMode+"; background-image:url(""+bkgUrl+""); } ";
 $("#outputDiv").html(s);
}

前端代码:

代码如下:


背景图片URL:

背景图片重复方式: repeatno-repeatrepeat-xrepeat-y




    
 
 

您可能感兴趣的文章:

  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery更换文章内容与改变字体大小的实现代码
  • Jquery更换背景色的实现代码
  • jQuery动态背景插件 jQuery.spritely
  • jQuery动态背景设置 Backstretch
  • jquery改变tr背景色的示例代码
  • 自适应页面背景插件 jQuery.resBg
  • jquery css 设置table的奇偶行背景色示例
  • Jquery 随机刷新页面背景图片
  • jquery设置div半透明背景色与文字不透明
  • jquery修改网页背景颜色通过css方法实现
  • JQuery弹出炫丽对话框的同时让背景变灰色
  • jQuery导航条背景切换效果的实现代码(图文)
  • jquery背景图淡入淡出效果示例代码
  • jQuery制作的别致导航有阴影背景高亮模式窗口
  • 鼠标滑过导航条改变背景图的jquery实现代码
  • jquery简单实现鼠标经过导航条改变背景图
  • jquery控制背景音乐开关与自动播放提示音
  • jquery弹出层Div背景半透明与内容不透明
  • jquery实现背景墙聚光灯效果示例分享
  • jquery弹框效果(背景变暗)代码示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery设置input中disabled属性
  • jQuery如何获取与设置表单元素
  • jQuery设置input type值示例
  • JQuery设置input属性(disabled、enabled)
  • jquery select默认选中的设置方法
  • jquery 设置文本框、密码框获得焦点时的样式
  • jquery设置text的值示例(设置文本框 DIV 表单值)
  • JQUERY 设置SELECT选中项代码
  • jQuery设置input type="radio"选中值
  • jQuery元素属性attr设置多个键值的例子
  • jquery当前时间的设置与显示代码
  • jquery easyui通过class方式设置dialog
  • jquery修改与设置属性值的例子
  • jQuery获取和设置表单元素的方法
  • jquery如何设置文本框只读
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • jQuery设置CSS属性(示例)
  • jquery修改属性值实例代码(设置属性值)
  • jquery半透明设置实现代码
  • jquery 设置radio值的代码一例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3