JS imitate Baidu skin switching effect: (replace a div, select the picture you want, as the web page background, save)
Important: Cookie save status
html code:
<body> <div id="header"> <div id="header_con"> <div><a href="javascript:;" onclick="showImgBox()">Skin Replace</a></div> </div> </div> <div id="dimgBox"> <div id="dimgtitle"> <div id="imgtitle_con"> <div id="title1"><a href="javascript:;">Popular</a></div> <div id="title2"><a href="javascript:;" onclick="hideImgBox()">Close</a></div> </div> </div> <div id="imglist"> <div><img src="image/bg0.jpg" /></div> <div><img src="image/bg1.jpg" /></div> <div><img src="image/bg2.jpg" /></div> <div><img src="image/bg3.jpg" /></div> <div><img src="image/bg4.jpg" /></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
css code:
* { margin:0px; padding:0px;}#header { height:40px; width:100%; background:#000000;}a { text-decoration:none;}.dbg { float:left;}#dimgBox { width:100%; height:140px; /*position:absolute;*/ background:#ffffff; top:0px; left:0px; display:none;}#dimgtitle { height:40px; width:100%; border-bottom:solid 1px #ccc;}#imgtitle_con { width:1180px; height:40px; margin:0px auto; line-height:40px;}#title1 { float:left;}#title1 a { display:block; background:#04a6f9; height:40px; color:#ffffff; text-align:center;}#title2 { float:right;}#imglist { height:65px; width:1180px; margin: 0px auto;}.imgitem { float:left; margin-top:10px; margin-left:5px;}.imgitem img { width:100px;}js code:
function showImgBox(){ $("#dimgBox").slideDown();}function hideImgBox(){ $("#dimgBox").slideUp();}$(function (){ //5. After the page is opened, determine whether it exists if ($.cookie("bg-pic") == "" || $.cookie("bg-pic")==null) { //6. If it does not exist, set the first picture as the default background$("body").css("background-image", "url(image/bg0.jpg)"); } else { //6. If it exists, pass $.cookie("bg-pic") in, and give it the value saved last time to $("body").css("background-image", "url('" + $.cookie("bg-pic") + "')"); // } //1. Find the img tag below imgtiem and execute the click event $(".imgitem img").click(function () { //2. The key is to get the value of src in the current image, set it to the variable to save var src = $(this).attr("src"); //3. Use it as the background style of the web page $("body").css("background-image","url('+src+"')"); //4. Save the status $.cookie("bg-pic", src, {expires:1}); });});Reproduction image:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.
Author: wangwangwangMax