一.常用的页面换肤
<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"); }) }) </script>效果图如下: 二.伸缩框 代码如下：
//最新动态 $(function() { $("#mud1 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) }); }) }) //产品分类 $(function() { $("#mud2 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) }) }) })效果图如下： 三.常见的文字翻动
$(function(){ setInterval(function(){ $(".scrollNews li:first").remove().appendTo($(".scrollNews ul")); },1000) })效果图如下： 四.轮播图(可选择是否自动播放) 代码如下：
//轮播图 $(function(){ $(".num li").bind("click mouseover",function(){ var index=$(this).index(); $(".slider").animate({ "top":(-150)*index+"px" }); $(this).addClass("on").siblings().removeClass("on"); }) }) // 轮播图定时器(自动定时可根据自身需要) $(function () { var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function () { index = $(".num li").index(this); showImg(index); }).eq(0).mouseover(); //滑入 停止动画，滑出开始动画. $('.ad').hover(function () { clearInterval(adTimer); }, function () { adTimer = setInterval(function () { showImg(index) index++; if (index == len) { index = 0; } }, 1000); }).trigger("mouseleave"); }) // 通过控制top ，来显示不同的幻灯片 function showImg(index) { var adHeight = $(".ad").height(); $(".slider").stop(true, false).animate({ top: -adHeight * index }, 0); $(".num li").removeClass("on") .eq(index).addClass("on"); }效果图如下： 五.左右转动 代码如下：
//新款上市(左右滑动) $(function(){ var left=0; var right=2; $(".goRight").click(function(){ right--; if(right<0){ right=2; } $(".prolist_content").animate({ "left":(-584)*right+"px" }); }) $(".goLeft").click(function(){ left++; console.log(left); if(left>=3){ left=0; } $(".prolist_content").animate({ "left":(-584)*left+"px" }); }) })效果图如下：
有小毛病是点左边第三下它是往右边，往右边第三下他是往左边（这个搞的比较失败） 六.淘宝最常见的放大镜 代码如下：
//放大镜 $(function(){ $(".jqzoom").jqueryzoom({ xzoom:300, yzoom:300, offset:10, position:"right", preload:1 }); })效果图如下： 更多详情放大镜那篇博客 七.淘宝常见的评分 代码如下：
//评分 $(function(){ $(".rating li a").click(function(){ var title=$(this).attr("title"); alert("你给出的评分是"+title); var cl=$(this).parent().attr("class"); $(this).parent().parent().removeClass().addClass("rating "+cl+"star"); }); });注：rating后边有个空格 效果如下：
