html中如何鼠标点击更换背景图片

点击更换背景图片要用到Javascript，建议使用最常用的JQuery来简单实现，鼠标点击时，修改body的background属性即可，代码可参考如下

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
" target="_blank">http://www.w3.org/1999/xhtml">
    

    

    
jquery换背景图片点击设置背景图片代码演示_大头网

    
   

    
   

    
*{margin:0px;padding:0px;}
    
body{background:url('images/55.jpg');}
    
.but{width:50px;height:50px;background:url('images/rtop_1.png');display:block;position:fixed;top:0px;right:0px;}
    
.but:hover{background:url('images/rtop_2.png');}
    
#hf{width:100%;height:200px;background:rgba(0,0,0,0.5);display:none;}
    
#hf .con{width:1200px;height:200px;margin:0 auto;position:relative;}
    
#hf .con .left{position:absolute;top:70px;left:0px;cursor:pointer;}
    
#hf .con .right{position:absolute;top:70px;right:0px;cursor:pointer;}
    
#hf .con .scroll{width:1080px;height:200px;
    
overflow:hidden;margin:0 auto;position:relative;}
    
#hf .con .scroll .scrollCon{width:1000%;height:200px;position:absolute;left:0px;top:0px;}
    
.scroll .scrollCon ul li{list-style:none;width:240px;height:140px;border:3px solid #fff;float:left;margin-left:12px;margin-right:12px;margin-top:20px;cursor:pointer;}
    

    
   

    
   

    

    

    
   

    

    

    

    

    

    


    


    


    


    


    


    


    


    


    


    


    


    


    



    

    

    

    

    
   

    

    
$(".but").click(function(){
    
$("#hf").slideToggle("slow");  
    
});
    

    
$(".scrollCon ul li").click(function(){
    
var simg=$(this).find("img").attr("src");
    
var bimg=simg.replace(/-\d*/,'');  //根据小图找到大图的名称
    
$("body").css("background","url("+bimg+")");//url("+bimg+"),添加 变量的方法
    
   
});
    

    
var click_num=0; //初始点击次数
    
   
$(".left").click(function(){
    
click_num++;       //click_num+1
    
if(click_num>2){
    
click_num=0;
    
}
    
$(".scrollCon").animate({left:click_num*(-1080)},300);
    
});
    
$(".right").click(function(){
    
click_num--;       //click_num+1
    
if(click_num    
click_num=2;
    
}
    
$(".scrollCon").animate({left:click_num*(-1080)},300);
    
});
    

    

    
   

    
来源：" target="_blank">http://www.datouwang.com/" target="_blank">大头网

    
转载请注明出处，此代码仅供学习交流，请勿用于商业用途。

    
" target="_blank">http://www.datouwang.com/img/js/demo_ad.js">