给网站添加一个一键换皮肤功能

  • 内容
  • 相关

媒体范1.3免授权解密版免费分享24小时。

下面方法适用所有网站,

首先在网页中添加以下代码:


<script type="text/javascript">
		//<![CDATA[
		$(function(){
			var $li =$("#skin li");
			$li.click(function(){
				switchSkin( this.id );
			});
			var cookie_skin = $.cookie( "MyCssSkin");
			if (cookie_skin) {
				switchSkin( cookie_skin );
			}
		});
		function switchSkin(skinName){
				 $("#"+skinName).addClass("selected")                 //当前<li>元素选中
							  .siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中
				$("#cssfile").attr("href","<?php echo TEMPLATE_URL; ?>css/"+ skinName +".css"); //设置不同皮肤
				$.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });
		}
		//]]>
	</script><ul id="skin" class="skin">
		<li id="style" title="灰色" class="selected" >灰色</li>
		<li id="style1" title="紫色" >紫色</li>
		<li id="style2" title="红色" >红色</li>
		<li id="style3" title="天蓝色"  >天蓝色</li>
		<li id="style4" title="橙色"  >橙色</li>
		<li id="style5" title="淡绿色" >淡绿色</li>
	切换主题颜色
	</ul>			
然后引入最新版jquery库,和cookie插件。

最后在head里面加上一段css引用代码:

此处内容已隐藏,评论后刷新即可查看!

这里我是以媒体范1.3美化版为例其他网站根据自己需求把代码改一下即可。

这里的cookie我记录的是10天,因为有cookie记录才能实现每个人可以定义不同的皮肤,而且不会因为刷新网页而发生变化

引入jquery库写js代码简洁易懂,相信小白也能轻易掌握。

代码很很简单  如果你用的是1.3美化版直接把上面代码复制到head文件最下面即可使用。

另外style是css样式  由切换按钮来切换css从而达到改变网页的皮肤。。


热度:996° 评分:8.7
发布时间: 2018年2月23日

本文标签:

版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

本文链接:给网站添加一个一键换皮肤功能 - http://www.wuiso.com/post-981.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

4条评论
  1. avatar

    小世界 Google Chrome 53.0.2785.104 非主流操作系统 回复

    表情 写得好好哟,我要给你生猴子!
    表情 骚年,我怀疑你写了一篇假的文章!
    滴!学生卡!打卡时间:上午11:10:37,请上车的乘客系好安全带~

    浙江省杭州市 阿里云BGP数据中心

    1. avatar

      海绵宝宝 Google Chrome 55.0.2883.87 Windows 7 回复

      看看、;

      浙江省杭州市 阿里云BGP数据中心

      1. avatar

        DXS Google Chrome 55.0.2883.87 Windows 7 回复

        表情 写得好好哟,我要给你生猴子!

        上海市 阿里云BGP数据中心

        1. avatar

          诺兰备份号 Google Chrome 57.0.2987.132 Linux 回复

          不错啊!!!!!

          浙江省杭州市 阿里云BGP数据中心