根据选择改变颜色And Jquery 列表收回，展示的动画。2020-09-29

	<script src ="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				// $("span").click(function(){
				// 	$(this).css("font-size","50px");
					
				// })
				
				// $("span").mouseover(function(){
				// 	$(this).css("font-size","50px");

				// })
				
				$("span").bind("click mouseover",function(){
					$(this).css("font-size","50px").css("color"," green")
					
				})				
			})
		</script>

<div id="" >
			<span>
				这是一个会变颜色的标签
			</span>
		</div>

效果图：

改变标题的颜色

html

<!--头部开始-->
<div id="header">
	<a id="logo" href="#">Jane Shopping</a>
	<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>
<!--头部结束-->

Jquery

<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		//拼接皮肤地址
		$("#skin li").click(function(){
			
			var css="styles/skin/"+$(this).attr("id")+".css";
			//修改当前页面皮肤
			$("#cssfile").attr("href",css);
			//单机对象选中，其余对象不选中
			$(this).addClass("selected").siblings().removeClass("selected");
			
		})
			})

**
**

实现列表的收回，列出功能

		$(function(){
			//定位到需要带点击实现的功能的按钮或者图片
			$(".module_up_down img").click(function(){
				
				var $this = $(this);
				//需要改变的位置
				$(".scrollNews").slideToggle(1000,function(){
					
					var img =$this.attr("src");
					console.log(img);
					//实现功能的切换
					if(img =="images/up.gif")
					img = "images/down.gif";
					else
					img = "images/up.gif"
					$this.attr("src",img)
				});
			})
		})

HTML代码

<div id="content">
	<div class="content_left">
		<div class="global_module news">
			<h3>最新动态</h3>
			<div class="scrollNews" >
				<ul>
					<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
					<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
					<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
					<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
					<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
					<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
					<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
				</ul>
			</div>
			<p class="module_up_down"><img src="images/down.gif" alt="" id=""/></p>
		</div>

实现的功能样式