1 、我们先来写一个
tag下面的移动的箭头。一般我们都会采用图片的形式。但是在这里就不用图片，纯的css也可以做到这样的效果。
<div style="150px; height:10px; overflow:hidden;"> <div style="150px; height:3px; background:#ff6600;"></div> <div style=" 0px;height:0px; border-5px; border-color:#ff6600 #fff #fff #fff; border-style:solid dashed dashed dashed; margin:0 auto; z-index:10;"></div> </div>
采用以上的样式就可以得到一个下箭头。
2 编写jquery效果
代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.8.2.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0px; padding:0px; text-decoration:none; font-family:"微软雅黑"; font-size:12px;color:Black;} .tag{width:400px;height:400px;border:1px solid gray;border-radius:3px;box-shadow:0px 0px 30px gray;} .top{width:400px;height:30px;} .top ul {width:400px;height:30px;overflow:hidden; margin:0px; padding:0px;} .top ul li{width:100px; height:30px; display:block; float:left;} .top ul li a {width:100px; height:30px; line-height:30px;display:inline-block; text-align:center;} .on{color:#ff6600 !important; font-weight:600;} .slide{width:400px;height:10px; overflow:hidden; position:relative;} .slide_01{width:100px; height:10px; position:absolute;top:0px;left:0px;} .slide_01_01{width:100px; height:3px; background:#ff6600;} .slide_01_02{width:0px; height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; margin:0 auto; border-style:solid dashed dashed dashed;} .text{ width:400px; height:360px;} </style> </head> <body> <div class="tag"> <div class="top"> <ul class="tagTop"> <li><a href="#" class="on">画册</a></li> <li><a href="#">优惠券</a></li> <li><a href="#">会员卡</a></li> <li><a href="#">友情链接</a></li> </ul> </div> <div class="slide"> <div class="slide_01"> <div class="slide_01_01"></div> <div class="slide_01_02"></div> </div> </div> <div class="text"></div> </div> <script type="text/javascript"> $(function () { $.fn.tag = function (options) { var o = $.extend({}, options || {}); var tagTop = $(o.tagTop); var slide = $(o.slide); //Index 拿到 Ul li 的Index, 移动slide var slideMove = function (Index) { slide.stop().animate({ left: 100 * Index + "px" }, 1000, function () { }); }; var tagMouseover = function () { tagTop.children("li").mouseenter(function () { tagTop.children("li").find("a").removeClass("on"); $(this).children("a").addClass("on"); var Index = $(this).index(); slideMove(Index); }); }; tagMouseover(); }; $(window).load(function () { $(".tag").tag({ tagTop: ".tagTop", slide: ".slide_01", text: ".text" }); }); }); </script> </body> </html>
刚和Q群上的人聊天，说到一个弹性的运动的功能，其实就是加上了“easeOutElastic”特效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="js/jquery.easing.js" type="text/javascript"></script> <style type="text/css"> *{ margin:0px; padding:0px; text-decoration:none; font-family:"微软雅黑"; font-size:12px;color:Black;} .tag{width:400px;height:400px;border:1px solid gray;border-radius:3px;box-shadow:0px 0px 30px gray;} .top{width:400px;height:30px;} .top ul {width:400px;height:30px;overflow:hidden; margin:0px; padding:0px;} .top ul li{width:100px; height:30px; display:block; float:left;} .top ul li a {width:100px; height:30px; line-height:30px;display:inline-block; text-align:center;} .on{color:#ff6600 !important; font-weight:600;} .slide{width:400px;height:10px; overflow:hidden; position:relative;} .slide_01{width:100px; height:10px; position:absolute;top:0px;left:0px;} .slide_01_01{width:100px; height:3px; background:#ff6600;} .slide_01_02{width:0px; height:0px; border-width:5px; border-color:#ff6600 #fff #fff #fff; margin:0 auto; border-style:solid dashed dashed dashed;} .text{ width:400px; height:360px;} </style> </head> <body> <div class="tag"> <div class="top"> <ul class="tagTop"> <li><a href="#" class="on">画册</a></li> <li><a href="#">优惠券</a></li> <li><a href="#">会员卡</a></li> <li><a href="#">友情链接</a></li> </ul> </div> <div class="slide"> <div class="slide_01"> <div class="slide_01_01"></div> <div class="slide_01_02"></div> </div> </div> <div class="text"></div> </div> <script type="text/javascript"> $(function () { $.fn.tag = function (options) { var o = $.extend({}, options || {}); var tagTop = $(o.tagTop); var slide = $(o.slide); //Index 拿到 Ul li 的Index, 移动slide var slideMove = function (Index) { slide.stop().animate({ left: 100 * Index + "px" }, 1000,"easeOutElastic", function () { }); }; var tagMouseover = function () { tagTop.children("li").mouseenter(function () { tagTop.children("li").find("a").removeClass("on"); $(this).children("a").addClass("on"); var Index = $(this).index(); slideMove(Index); }); }; tagMouseover(); }; $(window).load(function () { $(".tag").tag({ tagTop: ".tagTop", slide: ".slide_01", text: ".text" }); }); }); </script> </body> </html>
全部贴代码出来，功能什么的如果不够好，你可以提出来，为啥你就爱说别人抄袭......再说这样的功能再简单不过了.......