说明：要注意cookie路径的问题，代码目前只能放在项目的根路径下才能成功的显示上一次更改后的皮肤。建议把代码贴在elipse下运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>网页皮肤变换</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<link href="css/skin_0.css" rel="stylesheet" type="text/css"
id="cssfile" />
<style>
#main {
width: 500px;
height: 180px;
border: 1px solid #F00;
}
#skin {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
margin: 12px;
padding: 1px;
float: left;
width: 45px;
height: 20px;
cursor: pointer;
}
li.selected {
background-color: #808080;
text-align: center;
}
#div_side_0 {
margin-top: 30px;
margin-left: 20px;
margin-bottom: 20px;
margin-right: 20px;
padding: 0 10 0 10px;
border: 1px solid #F00;
width: 100px;
height: 45px;
float: left;
border-color: blue;
}
#div_side_1 {
margin-top: 30px;
margin-left: 20px;
margin-bottom: 40px;
padding: 0 0 0 10px;
border: 1px solid #F00;
width: 100px;
height: 45px;
float: left;
}
#news {
width: 100px;
padding: 0 0 0 0;
height: 45px;
margin: 0 auto;
}
.title {
text-align: centre;
margin: 0 auto;
width: 80px;
line-height: 45px;
}
</style>
<body>
<div id="main">
<div style="height: 30px; padding-top: 20px;">
<ul id="skin">
<li id="skin_0" title="灰色" class="selected">
灰色
</li>
<li id="skin_1" title="紫色">
紫色
</li>
<li id="skin_2" title="红色">
红色
</li>
<li id="skin_3" title="天蓝">
天蓝
</li>
<li id="skin_4" title="橙色">
橙色
</li>
<li id="skin_5" title="淡绿色">
绿色
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
var $skin_li = $("#skin").find("li");
$skin_li.click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
$("#cssfile").attr("href", "css/" + (this.id) + ".css");
$.cookie("MyCssSkin", this.id, {
path : '/',
expries : 10
});
});
var cookie_skin = $.cookie("MyCssSkin");
if (cookie_skin) {
$("#" + cookie_skin).addClass("selected").siblings().removeClass(
"selected");
$("#cssfile").attr("href", "css/" + cookie_skin + ".css");
$.cookie("MyCssSkin", cookie_skin, {
path : '/',
expries : 10
});
}
});
</script>
<div id="div_side_0">
<div id="news">
<p class="title">
新闻事实
</p>
</div>
</div>
<div id="div_side_1">
<div id="game">
<p class="title">
娱乐新闻
</p>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在更换皮肤时，对应的图片也需要更新以保持视觉一致性。 为了实现完整的换肤功能，我们需要编写一段jQuery代码，这部分代码会监听用户的皮肤选择事件，然后更新CSS链接和保存用户偏好。同时，代码还会检查cookies，...
本教程将详细讲解如何使用jQuery实现一个简单的网站换肤功能，并利用cookie来保存用户的偏好，使其在下次访问时仍能保持之前选择的皮肤。我们将主要涉及以下几个技术点： 1. **jQuery库的引入**： jQuery是一个轻...
标题中的“jQuery+Cookie实现切换皮肤功能”是指利用JavaScript库jQuery和浏览器的Cookie技术来实现在网站上动态更换用户界面皮肤的功能。这个功能允许用户根据个人喜好选择不同的皮肤，而这些选择将被记录并应用于...
为了实现这一功能，开发者需要编写一段JavaScript代码，使用jQuery的事件监听方法（如`mouseover`和`mouseout`）来检测鼠标的移动，然后利用jQuery的DOM操作功能（如`show()`和`hide()`）来控制客服窗口的显示和隐藏...
本篇文章将详细探讨如何利用jQuery和cookie来实现换肤功能。 首先，我们需要理解jQuery的基本概念。jQuery通过选择器选取DOM元素，然后对这些元素进行操作，如添加样式、修改内容或触发事件。它还提供了一套高效的...
本文将深入探讨如何利用JQuery实现页面换肤。 首先，我们需要了解JQuery的基本概念。JQuery是由John Resig于2006年创建的，它简化了JavaScript编程，通过链式操作、事件处理、动画和Ajax交互等特性，使得开发者能更...
动态更换皮肤的核心原理是利用JavaScript或者jQuery等客户端脚本语言，结合CSS，来实现在用户交互时即时更改页面的样式。下面我们将详细探讨这个过程中的关键技术和步骤： 1. **CSS结构化组织**：首先，我们需要为...
jQueryChangeSkin是一款基于jQuery库开发的皮肤切换插件，它主要功能是实现网站用户界面的动态换肤，同时支持利用cookie来保存用户的皮肤选择，使得用户在下次访问时能够自动加载之前选择的皮肤，提供良好的用户体验...
【jQuery仿百度首页换肤功能代码】是一种使用JavaScript库jQuery实现的网页动态皮肤更换功能，类似于百度首页的个性化背景切换效果。这个功能的核心是通过jQuery的DOM操作、事件监听和动画效果来实现实时更换页面...
5. **存储用户偏好**: 为了在用户下次访问时保持其皮肤选择，可以利用浏览器的本地存储（localStorage）或Cookie来保存用户的偏好。这样，当用户再次打开网站时，可以自动加载上次选择的皮肤。 6. **优化性能**: ...
网页更换皮肤功能可以让用户体验不同的界面风格，从而提升网站的交互性和用户满意度。实现网页换肤功能主要依赖于对CSS样式的操作，以及利用JavaScript（特别是JQuery）和cookies来保存用户的皮肤选择。 知识点一：...
5. 保存用户选择：为了实现用户选择的皮肤在下次访问时依然有效，我们可以利用浏览器的localStorage API来保存用户选择的皮肤。在用户切换皮肤后，将选择的皮肤ID存储在localStorage中，然后在页面加载时检查是否有...
在本文中，我们将深入探讨如何利用JavaScript（JS）来实现网页背景换肤的功能，类似于QQ空间的个性化设置。背景换肤是提升用户交互体验的重要手段，它允许用户根据个人喜好自定义网页的视觉样式，从而增加用户的参与...
6. **持久化设置**：为了保存用户的皮肤选择，可以利用浏览器的本地存储（localStorage）或Cookie来存储用户的偏好，这样即使用户关闭并重新打开浏览器，也能保持上次选择的皮肤。 在这个案例中，"baidus.html"文件...