JS动画列表展示和左右滑动无缝效果

• jquery代码

	//列表收回，展示
			$(function() {
				$(".m-treeview > li").click(function() {
					var cl = $(this).attr("class");
					if (cl == "m-collapsed") {
						$(this).attr("class", "m-expanded");
					} else if (cl = "m-expanded") {
						$(this).attr("class", "m-collapsed");
					}

				})

			})

• Html代码

				<div class="global_module procatalog">
					<h3>产品分类</h3>
					<ul class="m-treeview">
						<li class="m-expanded">
							<span>衬衫</span>
							<ul>
								<li><span>短袖衬衫</span></li>
								<li><span>长袖衬衫</span></li>
							</ul>
						</li>
						<li class="m-expanded">
							<span>卫衣</span>
							<ul>
								<li><span>开襟卫衣</span></li>
								<li><span>套头卫衣</span></li>
							</ul>
						</li>
						<li class="m-expanded">
							<span>裤子</span>
							<ul>
								<li><span>休闲裤</span></li>
								<li><span>免烫卡其裤</span></li>
								<li><span>牛仔裤</span></li>
								<li><span>短裤</span></li>
							</ul>
						</li>
					</ul>
					<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
				</div>

• 效果图
  
  
• 新闻滚动功能
• Jq代码

	//最新动态  新闻滚动
			$(function() {
				var $this = $(".scrollNews");
				var scrollTimer;
				$this.hover(function() {
					clearInterval(scrollTimer);
				}, function() {
					scrollTimer = setInterval(function() {
						scrollNews($this);
					}, 1000);
				}).trigger("mouseleave");
			});

			function scrollNews(obj) {
				var $self = obj.find("ul:first");
				var lineHeight = $self.find("li:first").height(); //获取行高
				$self.animate({
					"marginTop": -lineHeight + "px"
				}, 600, function() {
					$self.css({
						marginTop: 0
					}).find("li:first").appendTo($self); //appendTo能直接移动元素
				})
			}

• Html代码

				<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>

• 左右切换
• Jq代码

			//新款上市
			//右切换
			$(function() {
				var right = 0;
				var left = 0;
				$(".goRight").click(function() {
					right--;

					if (right < 0) {
						right = 2;
					}
					$(".prolist_content").animate({
						"left": (-584) * right + "px"
					});
				})
				$(".goLeft").click(function() {
					left++;
					if (left >= 3) {
						left = 0;
					}
					$(".prolist_content").animate({
						"left": (-584) * left + "px"
					});
				})

			 })

• Html代码

	<div class="global_module prolist">
					<h3>新款上市</h3>
					<div class="prolist_content">
						<ul>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>
							</li>
							<li>
								<a href="detail.html"><img src="images/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>
							</li>
						</ul>
					</div>
					<p class="module_left_right"><img class="goLeft" src="images/left.gif" alt="" /><img class="goRight" src="images/right.gif"
						 alt="" /></p>
				</div>

• 效果图
  
  结束，Over