一，简单版
<body>
<header>
<img src="img/2.jpg" style="width:200px;height:60px;float:left;">
<select id="btn">
<option value="">请选择</option>
<option>背景春</option>
<option>背景夏</option>
<option>背景秋</option>
<option>背景冬</option>
</select>
<select id="btn1">
</select>
<h1><i>-春之情-主页导航</i></h1>
<span><a href="#">换肤学习</a></span>
<img src="img/2.jpg" style="width:200px;height:60px;float:right;">
<img src="img/loading.gif" style="width:60px;height:60px;float:right;">
</header>
<div id="content">
<img src="img/bg1.jpg" alt="图片" >
</div>
<script src=script/jquery-1.11.3.js></script>
<script>
//原生js实现
function changeskin(imgurl){
var imgobj=document.getElementsByTagName(‘img‘) ;
imgobj[3].src=imgurl;
}
window.onload=function(){
var btnobj=document.getElementById("btn");
var btnobj1=document.getElementById("btn1");
btnobj.addEventListener("change",function(){
var index=btnobj.selectedIndex;
var imgurl=[" ","img/bg3.jpg","img/bg2.jpg","img/bg4.jpg","img/bg5.jpg"];
//使用DOM方式新增选项
var newoption=document.createElement("option");
newoption.appendChild(document.createTextNode("新增选项")); btnobj.appendChild(newoption);
var text=btnobj.options[index].text;//获得select选项中的文本值
//使用selected属性设置为true，来选择选项
if(btnobj.options[index].selected){ changeskin(imgurl[index]);}
//使用remove方法移除
btnobj.remove(2);
}
</script>
</body>
实现效果图：
初始页面：
选择选项中的，背景冬：
背景换为：
总结：这是学习几个简单方法，做的简单小例子，在后期，还会继续完善,目标：
（1）使用jquery实现这个效果
（2）结合cookie实现页面定制效果。
时间： 2024-11-09 07:21:19