首页 > Web开发 > 详细

动态更换网页的背景图

时间:2016-03-08 20:57:54      阅读:219      评论:0      收藏:0      [点我收藏+]
function doChangeBkg(){
    var bkgUrl = document.getElementById("inputBkgUrl").value;
    //alert(bkgUrl);
    var repeateMode = document.getElementById("inputRepeatMode").value;
    var s="<style type=‘text/css‘>body{ background-repeat : "+repeateMode+" !important; background-image:url(\""+bkgUrl+"\") !important; } </style>";
    document.getElementById("outputDiv").innerHTML = s;
    //alert(s);
    //$("#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 代码:

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> 

 

动态更换网页的背景图

原文:http://www.cnblogs.com/qingsong/p/5255292.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!