服装商城管理系统日常小结1

前言：这个项目使用jquery实现所有特效

一、换肤

原理：拼接href路径，替换即可。

/*换肤*/
			$(function() {
				$("#skin li").click(function() {
					var css = "styles/skin/" + $(this).attr("id") + ".css";
					$("#cssfile").attr("href", css);
					$(this).addClass("selected").siblings().removeClass("selected");
				})
			})

二、折叠菜单

原理：分析web页面代码得出，使用slideToggle()(通过使用滑动效果，在显示和隐藏状态之间切换)实现效果，然后使用图片路径替换。

			/*最新动态折叠*/
			$(function() {
				$(".global_module.news .module_up_down img").click(function() {
					var $this = $(this);
					$(".scrollNews").slideToggle(1000, function() {
						var img = $this.attr("src");
						if(img == "images/up.gif") {
							img = "images/down.gif";
						} else {
							img = "images/up.gif";
						}
						$this.attr("src", img);
					})
				})
			})
			
			/*产品分类折叠*/
			$(function() {
				$(".global_module.procatalog .module_up_down img").click(function() {
					var $this = $(this);
					$(".m-treeview").slideToggle(1000, function() {
						var img = $this.attr("src");
						if(img == "images/up.gif") {
							img = "images/down.gif";
						} else {
							img = "images/up.gif";
						}
						$this.attr("src", img);
					})
				})
			})

三、动态LI

原理：使用appendTo()自定义动画，把li追加到最后实现动态效果。

			//最新动态，实现动态li
			$(function() {
				setInterval(function() {
					$(".scrollNews li:first").remove().appendTo($(".scrollNews ul"))
				}, 1000)

			})