一、部分效果集结 (此仅个人收集,有待于扩展)
1、导航栏下拉
2、树形菜单的伸展
3、图片横向切换
4、图片纵向切换
5、新闻滚动
6、选项卡切换
7、列表图片块横向滚动
8、插件的使用(放大镜的效果)
二、具体的代码实现(三步骤:第一步 搭建HTML结构,第二步 添加CSS样式,第三步 创建js动态效果)
***********************1>导航栏下拉效果***************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>导航栏下拉</title> <style type="text/css"> ul{ list-style:none;} #navigation {width:784px;padding:8px;margin:8px auto;background:#3B5998;height:18px;} #navigation ul li {float:left;margin-right:14px;position: relative;z-index:100;} #navigation ul li a {display:block;padding:0 8px;background:#EEEEEE;font-weight:700;} #navigation ul li a:hover {background:none;color:#fff;} #navigation ul li ul{background-color: #88C366; position: absolute; width: 80px; overflow:hidden;display:none;} #navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 150px;display:block;} #navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 200px;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#navigation ul li:has(ul)').hover(function(){ $(this).children('ul').slideDown('show'); },function(){ $(this).children('ul').slideUp('show'); }).trigger('mouseleave'); }); </script> </head> <body> <!--导航开始--> <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">无袖衬衫</a></li> </ul> </li> <li><a href="#">卫 衣</a> <ul> <li><a href="#">开襟卫衣</a></li> <li><a href="#">套头卫衣</a></li> </ul> </li> <li><a href="#">裤 子</a> <ul> <li><a href="#">休闲裤</a></li> <li><a href="#">卡其裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">短裤</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul> </div> <!--导航结束--> </body> </html>
************************2>树形菜单的伸展*******************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>树形节点的伸展</title> <style type="text/css"> ul{ list-style:none;} .global_module {position:relative;background:#EEEEEE;padding-bottom:8px;} .module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;} .global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;} .procatalog ul {padding:5px 0 5px 15px;} .procatalog .m-treeview{background:#FFFFFF;} .procatalog .m-treeview li span {cursor: pointer;} .procatalog .m-treeview li.m-expanded {padding-left:16px;background:url('images/treeview-expanded.gif') no-repeat 0 0;} .procatalog .m-treeview li.m-expanded ul li {list-style-image: url('images/treeview-item.gif');} .procatalog .m-treeview li.m-collapsed {padding-left:16px;background:url('images/treeview-collapsed.gif') no-repeat 0 0;} .procatalog .m-treeview li.m-collapsed ul{display:none;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ /*Method I $('.m-expanded span').toggle(function(){ $(this).next().show(); $(this).parent().removeClass('m-expanded').addClass('m-collapsed'); },function(){ $(this).next().hide(); $(this).parent().removeClass('m-collapsed').addClass('m-expanded'); }); $('.module_up_down img').toggle(function(){ $(this).parent().prev('ul').slideUp('show'); $(this).attr('src','images/up.gif'); },function(){ $(this).parent().prev('ul').slideDown('show'); $(this).attr('src','images/down.gif'); }); */ /* Method II */ $('.m-treeview > li >span').click(function(){ var $ul=$(this).siblings('ul'); if($ul.is(':visible')){ $ul.hide(); $ul.parent().attr('class','m-collapsed'); }else{ $ul.show(); $ul.parent().attr('class','m-expanded'); } }); $('.module_up_down').toggle(function(){ var $self=$(this); $self.prev().slideToggle('fast',function(){ //$('img',$self).attr('src','images/up.gif'); $self.children('img').attr('src','images/up.gif'); }); },function(){ var $self=$(this); $self.prev().slideToggle('fast',function(){ //$('img',$self).attr('src','images/down.gif'); $self.children('img').attr('src','images/down.gif'); }); }); }); </script> </head> <body> <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> </body> </html>
************************3>图片横向切换******************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现图片横向切换</title> <style type="text/css"> /* 第二步 添加CSS样式*/ ul{ list-style:none;} .tr{text-align:right;} .tvShow{ width:600px;position:relative; overflow:hidden;} .tvShow_cont{ height:220px; width:6000px;} .tvShow_index{ position:absolute; left:450px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;} .tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;} .tvShow_index li.on{ background-color:#66FFCC;} .tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> /* 第三步 创建js动态效果*/ $(document).ready(function(){ //alert('ok'); var TV_INTTERVEL; $('#tvShow_index li').each(function(i){ var tvShow_cont=$('#tvShow_cont'); var tvShow_index=$('#tvShow_index li'); var TV_index=1; function tv_srcoll(n){ if(TV_INTTERVEL){ clearTimeout(TV_INTTERVEL); } tvShow_index.removeClass(); tvShow_index.eq(n).addClass('on'); TV_index=n+1>=tvShow_index.length?0:n+1; tvShow_cont.animate({marginLeft:-600*n+'px'},300); TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000); }; setTimeout(function(){tv_srcoll(TV_index)},5000); }); }); </script> </head> <body> <!--第一步 搭建HTML结构--> <div class="tvShow"> <div class="tvShow_cont" id="tvShow_cont"> <a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a> </div> <ul class="tvShow_index tr" id="tvShow_index"> <li class="on"><span></span>1</li> <li><span></span>2</li> <li><span></span>3</li> <li><span></span>4</li> </ul> </div> </body> </html>
************************4>图片纵向切换*****************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现图片纵向切换</title> <style type="text/css"> /* 第二步 添加CSS样式*/ ul{ list-style:none;} .tr{text-align:right;} .tvShow{ width:600px; position:relative;} .tvShow_cont{ height:220px; overflow:hidden;} .tvShow_index{ position:absolute; right:4px; bottom:5px; font-weight:bold; line-height:16px; color:#fff;} .tvShow_index li{ float:left; width:21px; height:16px; cursor:pointer; position:relative; text-align:center; background-color:#FF6633; margin-right:1px;} .tvShow_index li.on{ background-color:#66FFCC;} .tvShow_index li.on span{ display:block; width:5px; height:3px;background:url(images/tvshow_arrow.gif); position:absolute; left:8px; top:-8px;} </style> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> /* 第三步 创建js动态效果*/ $(document).ready(function(){ //alert('ok'); var TV_INTTERVEL; $('#tvShow_index li').each(function(i){ var tvShow_cont=$('#tvShow_cont'); var tvShow_index=$('#tvShow_index li'); var TV_index=1; function tv_srcoll(n){ if(TV_INTTERVEL){ clearTimeout(TV_INTTERVEL); } tvShow_index.removeClass(); tvShow_index.eq(n).addClass('on'); TV_index=n+1>=tvShow_index.length?0:n+1; tvShow_cont.animate({scrollTop:220*n+'px'},300); TV_INTTERVEL=setTimeout(function(){tv_srcoll(TV_index)},5000); }; $(this).mouseover(function(){ tvShow_cont.stop(); tv_srcoll(i); }) setTimeout(function(){tv_srcoll(TV_index)},5000); }); }); </script> </head> <body> <!--第一步 搭建HTML结构--> <div class="tvShow"> <div class="tvShow_cont" id="tvShow_cont"> <a href="#"><img src="images/tvshow/p1.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p2.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p3.jpg" width="600" height="220" /></a> <a href="#"><img src="images/tvshow/p4.jpg" width="600" height="220" /></a> </div> <ul class="tvShow_index tr" id="tvShow_index"> <li class="on"><span></span>1</li> <li><span></span>2</li> <li><span></span>3</li> <li><span></span>4</li> </ul> </div> </body> </html>
************************5>新闻滚动********************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新闻滚动</title> <style type="text/css"> ul{ list-style:none;} .global_module {position:relative;background:#EEEEEE;padding-bottom:8px;} .module_up_down{position:absolute;top:9px;right:10px;cursor:pointer;} .global_module h3 {height:26px;background:#3B5998;color:#FFF;line-height:26px;text-indent:6px;} .news ul {padding:5px 0 5px 15px;} .scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;} .scrollNews li{height:20px;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $this=$('.scrollNews'); var scrollTime; $this.hover(function(){ clearInterval(scrollTime); },function(){ scrollTime=setInterval(function(){ newscroll($this); },3000); }).trigger('mouseleave'); }); function newscroll(obj){ var $f_ul=obj.find('ul:first'); var lineheight_li=$f_ul.find('li:first').height(); $f_ul.animate({"marginTop":-lineheight_li+'px'},600,function(){ $f_ul.css({marginTop:0}).find('li:first').appendTo($f_ul); }); } </script> </head> <body> <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="image/down.gif" alt="" /></p> </div> </body> </html>
**************************6>选项卡切换******************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡效果</title> <style type="text/css"> ul{ list-style:none;} .tab {width:380px;} .tab_menu {clear:both;} .tab_menu li {float:left;text-align:center;cursor:pointer;list-style:none;padding:1px 6px;margin-right:4px; background:#F1F1F1;border:1px solid #898989;border-bottom:none;} .tab_menu li.hover {background:#DFDFDF;} .tab_menu li.selected {color:#FFF;background:#6D84B4;} .tab_box {clear:both;border:1px solid #898989;} .tab2 {width:380px;} .tab_menu2{clear:both;} .tab_menu2 li {float:left;text-align:center;cursor:pointer;list-style:none; padding:1px 6px;margin-right:4px; background:#F1F1F1;border:1px solid #898989;border-bottom:none;} .tab_menu2 li.hover {background:#DFDFDF;} .tab_menu2 li.selected {color:#FFF;background:#6D84B4;} .tab_box2 {clear:both;border:1px solid #898989;} .hide{display:none} </style> <script type="text/javascript" src="js/jquery.js"></script> <script> $(document).ready(function(){ $('.tab_menu ul li').click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); $('.tab_box div').eq($('.tab_menu ul li').index(this)).show().siblings().hide(); }).hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); }); $('.tab_menu2 ul li').each(function(i){ $(this).mouseover(function(){ $(this).addClass('selected').siblings('li').removeClass('selected'); $('.tab_box2 div').eq(i).show().siblings().hide(); }); }); }); </script> </head> <body> <div class="tab"> <div class="tab_menu"> <ul> <li class="selected">产品属性</li> <li>产品尺码表</li> <li>产品介绍</li> </ul> </div> <div class="tab_box"> <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 </div> <div class="hide"> 来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。 </div> <div class="hide"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。 </div> </div> </div> <div class="tab2"> <div class="tab_menu2"> <ul> <li class="selected">产品属性</li> <li>产品尺码表</li> <li>产品介绍</li> </ul> </div> <div class="tab_box2"> <div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 </div> <div class="hide"> 来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。 </div> <div class="hide"> 世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。 </div> </div> </div> </body> </html>
******************************8>列表图片块横向滚动*******************************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横向图片列表</title> <style type="text/css"> ul{ list-style:none;} .prolist {position:relative;height: 220px;margin-bottom:10px;overflow:hidden; border: 1px solid #AAAAAA; background:#FFFFFF; width:586px;} .prolist .prolist_content{position:absolute;width:1800px;top:26px;left:0px;padding:20px 0 0 8px;} .prolist ul{margin-bottom:10px;float:left;height: 220px;} .prolist ul li {float:left;display:inline;text-align:center;margin-right:22px;} .prolist ul li span {display:block;overflow:hidden;} .prolist ul li img {display:block;width:124px;height:124px;background:#EEE; border:0;} .module_left_right{position:absolute;top:5px;right:10px;cursor:pointer;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var page=1; var i=4; var len=$('.prolist_content ul li').length; var page_count=Math.ceil(len/i); var none_unit_width=$('.prolist').width(); var $parent=$('.prolist_content'); $('.goRight').click(function(){ if(!$parent.is(':animated')){ if(page==page_count){ $parent.animate({left:0+'px'},800); page=1; }else{ $parent.animate({left:'-='+none_unit_width+'px'},800); page++; } } }); $('.goLeft').click(function(){ if(!$parent.is(':animated')){ if(page==1){ $parent.animate({left:'-='+none_unit_width*(page_count-1)+'px'},800); page=page_count; }else{ $parent.animate({left:'+='+none_unit_width+'px'},800); page--; } } }); }); </script> </head> <body> <div class="global_module prolist"> <h3>新款上市</h3> <div class="prolist_content"> <ul> <li> <a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span> </li> <li> <a href="detail.html"><img src="image/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span> </li> <li> <a href="detail.html"><img src="image/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span> </li> </ul> </div> <p class="module_left_right"><img class="goLeft" src="image/left.gif" alt="" /><img class="goRight" src="image/right.gif" alt="" /></p> </div> </body> </html>
*******************************8>插件的使用(放大镜的效果)**************************
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横向图片列表</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="scripts/jquery.jqzoom.js" type="text/javascript"></script>
<script>
$(function(){ $(".jqzoom").jqueryzoom({ xzoom: 300, //放大图的宽度(默认是 200) yzoom: 300, //放大图的高度(默认是 200) offset: 10, //离原图的距离(默认是 10) position: "right", //放大图的定位(默认是 "right") preload:1 }); });
</script>
</head>
<body>
<div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div>
</body>
</html>
***********************************（
未
完
待
续
）***************************************
