jquery动态更换设置背景图的⽅法
有些时候，我们可以为⽤户提供很贴⼼的功能，⽐如判断⽤户是什么时候来访问的，然后给出⼀句问候，晚上好，下午好之类的。并且更换⽹页的背景颜⾊，⽐如晚上的时候就可以⽤满天星星的背景，⽩天就⽤阳光灿烂，或者特定节⽇就⽤该主题背景，让你的⽹站显得⾮常灵活，不枯燥。
下⾯就如何实现背景更换给出⼀种解决⽅法：
如何实现
很简单，下⾯是 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);
}
前端代码：
复制代码代码如下:
jquery在线图片
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。