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

  • 内容
  • 相关

媒体范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从而达到改变网页的皮肤。。


评论后还是无法显示下载地址?点我试试
热度:3250° 评分:9.6 发布时间: 2018年2月23日

本文标签:

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

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

发表评论

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

评论

8条评论
  1. avatar

    画心 回复

    666666666666哈哈哈哈哈哈哈哈哈哈或或或

    广西 移动

      1. avatar

        cai 回复

        查看ing

        贵州省贵阳市 电信

        1. avatar

          King 回复

          去去去

          浙江省温州市 电信

          1. avatar

            小世界 回复

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

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

            1. avatar

              海绵宝宝 回复

              看看、;

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

              1. avatar

                DXS 回复

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

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

                1. avatar

                  诺兰备份号 回复

                  不错啊!!!!!

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

                  ×