JQuery实现导航效果、新闻滚动、广告效果、横向滚动

时间：2022-11-30 12:23:53
  

JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果2、新闻滚动（跑马灯）3、广告效果4、新款上市模块横向滚动

1、导航效果

JQuery实现导航效果、新闻滚动、广告效果、横向滚动
图1.1 导航效果
1.1 导航样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*导航样式开始*/  
  3.         #navigation { width:784px; padding:8px; margin:8px auto; background:#3B5998;height:18px;}  
  4.         #navigation ul li { float:left; margin-right:14px;position: relative ;z-index:100;}  
  5.         #navigation ul li a { display:block;padding:0 8px; background:#EEEEEE; font-weight:700;}  
  6.         #navigation ul li a:hover { background:none; color:#fff;}  
  7.         #navigation ul li ul{background-color: #88C366;position: absolute;width: 80px;overflow:hidden;display:none;}  
  8.         #navigation ul li:hover ul{background-color: #88C366;position: absolute;width: 100px;display:block;}  
  9.         #navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 100%;}  
  10.         /*导航样式结束*/  
  11. </style>  
1.2 导航HTML
[html] view plaincopy
  1. <!--导航开始-->  
  2. <div id="navigation">  
  3.     <ul>  
  4.          <li><a href="#">首 页</a></li>  
  5.          <li><a href="#">衬 衫</a>  
  6.                 <ul>  
  7.                      <li><a href="#">短袖衬衫</a></li>  
  8.                      <li><a href="#">长袖衬衫</a></li>  
  9.                      <li><a href="#">无袖衬衫</a></li>  
  10.                 </ul>  
  11.         </li>  
  12.         <li><a href="#">卫 衣</a>  
  13.                 <ul>  
  14.                      <li><a href="#">开襟卫衣</a></li>  
  15.                      <li><a href="#">套头卫衣</a></li>  
  16.                 </ul>  
  17.          </li>  
  18.         <li><a href="#">裤 子</a>  
  19.                 <ul>  
  20.                      <li><a href="#">休闲裤</a></li>  
  21.                      <li><a href="#">卡其裤</a></li>  
  22.                      <li><a href="#">牛仔裤</a></li>  
  23.                      <li><a href="#">短裤</a></li>  
  24.                 </ul>  
  25.          </li>  
  26.          <li><a href="#">联系我们</a></li>  
  27.     </ul>  
  28. </div>  
  29. <!--导航结束-->  
1.3导航脚本
[javascript] view plaincopy
  1. //导航效果（兼容IE6）  
  2. $(function(){  
  3.        $("#navigation ul li:has(ul)").hover(function(){  
  4.             $(this).children("ul").stop(true,true).slideDown(400);  
  5.         },function(){  
  6.             $(this).children("ul").stop(true,true).slideUp("fast");  
  7.     });  
  8. })  

    在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。

    在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。

2、新闻滚动（跑马灯）

JQuery实现导航效果、新闻滚动、广告效果、横向滚动
图1.2 新闻滚动
2.1 新闻滚动样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /**最新动态 样式*/  
  3.         .news{width:200px;border:1px solid #AAAAAA; margin:10px;}  
  4.         .scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}  
  5.         h3{ height:26px; background:#3B5998;color:#FFF; line-height:26px; text-indent:6px;}  
  6.         .scrollNews li{height:20px; padding-left:10px;}  
  7.     </style>  
2.2 新闻滚动HTML
[html] view plaincopy
  1. <!--最新动态开始-->  
  2. <div class="news">  
  3.     <h3>最新动态</h3>  
  4.     <div class="scrollNews" >  
  5.         <ul>  
  6.             <li><a href="#" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>  
  7.             <li><a href="#" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>  
  8.             <li><a href="#" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>  
  9.             <li><a href="#" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>  
  10.             <li><a href="#" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>  
  11.             <li><a href="#" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>  
  12.             <li><a href="#" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>  
  13.         </ul>  
  14.     </div>  
  15. </div>  
  16. <!--最新动态结束-->  
2.3新闻滚动脚本
[javascript] view plaincopy
  1. /*新闻滚动*/  
  2. $(function() {  
  3.     var $this = $(".scrollNews");  
  4.     var scrollTimer;  
  5.     $this.hover(function() {  
  6.         clearInterval(scrollTimer);  
  7.     }, function() {  
  8.         scrollTimer = setInterval(function() {  
  9.             scrollNews($this);  
  10.         }, 3000);  
  11.     }).trigger("mouseleave");  
  12. });  
  13. function scrollNews(obj) {  
  14.     var $self = obj.find("ul:first");  
  15.     var lineHeight = $self.find("li:first").height(); //获取行高  
  16.     $self.animate({ "marginTop": -lineHeight + "px" }, 600, function() {  
  17.         $self.css({ marginTop: 0 }).find("li:first").appendTo($self); //appendTo能直接移动元素  
  18.     })  
  19. }  

3、广告效果

JQuery实现导航效果、新闻滚动、广告效果、横向滚动
图3.1 广告效果
3.1 广告效果样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*滚动广告样式*/  
  3.         .ad {margin:10px;width:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}  
  4.         .slider,.num{position:absolute;}  
  5.         .slider li{ list-style:none;display:inline;}  
  6.         .slider img{ width:586px; height:150px;display:block;}  
  7.         .num{ right:5px; bottom:5px;}  
  8.         .num li{float: left;color: #FF7300;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;overflow: hidden;margin: 3px 1px;border: 1px solid #FF7300;background-color: #fff;}  
  9.         .num li.on{color: #fff;line-height: 21px;width: 21px;height: 21px;font-size: 16px;margin: 0 1px;border: 0;background-color: #FF7300;font-weight: bold;}  
  10.     </style>  
3.2 广告效果HTML
[html] view plaincopy
  1. <!--广告滚动-->  
  2. <div class="ad" >  
  3.      <ul class="slider" >  
  4.         <li><img src="/images/shopping/ads/1.gif" alt="ad1"/></li>  
  5.                 <li><img src="/images/shopping/ads/2.gif" alt="ad2"/></li>  
  6.                 <li><img src="/images/shopping/ads/3.gif" alt="ad3"/></li>  
  7.                 <li><img src="/images/shopping/ads/4.gif" alt="ad4"/></li>  
  8.                 <li><img src="/images/shopping/ads/5.gif" alt="ad5"/></li>  
  9.       </ul>  
  10.       <ul class="num" >  
  11.         <li>1</li>  
  12.         <li>2</li>  
  13.         <li>3</li>  
  14.         <li>4</li>  
  15.         <li>5</li>  
  16.       </ul>  
  17. </div>  
3.3 广告效果脚本
[javascript] view plaincopy
  1. /*广告滚动效果*/  
  2. $(function() {  
  3.     var len = $(".num > li").length;  
  4.     var index = 0;  
  5.     var adTimer;  
  6.     $(".num li").mouseover(function() {  
  7.         index = $(".num li").index(this);  
  8.         showImg(index);  
  9.     }).eq(0).mouseover();  
  10.     //滑入 停止动画，滑出开始动画.  
  11.     $('.ad').hover(function() {  
  12.         clearInterval(adTimer);  
  13.     }, function() {  
  14.         adTimer = setInterval(function() {  
  15.             showImg(index)  
  16.             index++;  
  17.             if (index == len) { index = 0; }  
  18.         }, 3000);  
  19.     }).trigger("mouseleave");  
  20. })  
  21. // 通过控制top ，来显示不同的幻灯片  
  22. function showImg(index) {  
  23.     var adHeight = $(".ad").height();  
  24.     $(".slider").stop(true, false).animate({ top: -adHeight * index }, 1000);   //翻滚效果  
  25.     //$(".slider").css("top", -adHeight * index);     //跳转效果  
  26.     $(".num li").removeClass("on")  
  27.         .eq(index).addClass("on");  
  28. }  
    首先使用$(".ad").height()方法获取产品广告的高度，然后使用animate()方法来达到动画效果，每个图片的滚动高度有所不同，可以通过传入的参数index的值乘以产品广告的高度来得到。在animate()方法前，使用shop(true,false)方法将未执行完的动画队列清空，但不将正在执行的动画跳转到末状态。最后使用$(".num li").removeClass("on").eq(index).addClass("on")来给当前的广告数字添加高亮样式。
    现在，当光标在广告右下角的数字上滑过时，广告就会有上下翻转的效果。但如果不去碰它，那么广告始终不会动。因此可以使用trigger()方法来触发。

4、新款上市模块横向滚动

JQuery实现导航效果、新闻滚动、广告效果、横向滚动
图4.1 新款上市模块横向滚动

4.1 新款上市模块横向滚动样式
[css] view plaincopy
  1. <style type="text/css">  
  2.         /*新款上市样式*/  
  3.         .prolist {position:relative;height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width: 586px; margin:10px;}  
  4.          h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;}  
  5.         .prolist .prolist_content{position:absolute; width:1800px;top:26px; left:0px;padding:20px 0 0 8px;}  
  6.         .prolist ul{margin-bottom:10px; float:left;height: 220px;}  
  7.         .prolist ul li { float:left;display:inline;text-align:center;margin-right:22px;  }  
  8.         .prolist ul li span { display:block;overflow:hidden; }  
  9.         .prolist ul li img { display:block; width:124px; height:124px; background:#EEE; border:0;}  
  10.         .module_left_right{ position:absolute; top:5px; right:10px; cursor:pointer;}  
  11.     </style>  
4.2 新款上市模块横向滚动HTML
[html] view plaincopy
  1. <div class="prolist">  
  2.     <h3>新款上市</h3>  
  3.     <p class="module_left_right"><img id="goLeft" src="/images/shopping/left.gif" alt="左键" /><img id="goRight"  src="/images/shopping/right.gif" alt="右键" /></p>  
  4.     <div  class="prolist_content">  
  5.         <ul>  
  6.             <li>  
  7.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" class="imageOver" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>  
  8.             </li>  
  9.             <li>  
  10.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  11.             </li>  
  12.             <li>  
  13.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  14.             </li>  
  15.             <li>  
  16.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  17.             </li>  
  18.             <li>  
  19.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>  
  20.             </li>  
  21.             <li>  
  22.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  23.             </li>  
  24.             <li>  
  25.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  26.             </li>  
  27.             <li>  
  28.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  29.             </li>  
  30.                 <li>  
  31.                 <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>  
  32.             </li>  
  33.             <li>  
  34.                 <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>  
  35.             </li>  
  36.             <li>  
  37.                 <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>  
  38.             </li>  
  39.             <li>  
  40.                 <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>  
  41.             </li>  
  42.         </ul>  
  43.     </div>  
  44. </div>             
4.3 新款上市模块横向滚动
[javascript] view plaincopy
  1. /*新款上市模块横向滚动*/  
  2. $(function() {  
  3.     var page = 1;  
  4.     var i = 4; //每版放4个图片  
  5.     var len = $(".prolist_content ul li").length;  
  6.     var page_count = Math.ceil(len / i);   //只要不是整数，就往大的方向取最小的整数  
  7.     var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位  
  8.     var $parent = $(".prolist_content");  
  9.     //向右 按钮  
  10.     $("#goRight").click(function() {  
  11.         if (!$parent.is(":animated")) {  
  12.             if (page == page_count) {  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。  
  13.                 $parent.animate({ left: 0 }, 800); //通过改变left值，跳转到第一个版面  
  14.                 page = 1;  
  15.             } else {  
  16.                 $parent.animate({ left: '-=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面  
  17.                 page++;  
  18.             }  
  19.         }  
  20.     });  
  21.     //往左 按钮  
  22.     $("#goLeft").click(function() {  
  23.         if (!$parent.is(":animated")) {  
  24.             if (page == 1) {  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。  
  25.                 $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值，跳转到最后一个版面  
  26.                 page = page_count;  
  27.             } else {  
  28.                 $parent.animate({ left: '+=' + none_unit_width }, 800);  //通过改变left值，达到每次换一个版面  
  29.                 page--;  
  30.             }  
  31.         }  
  32.     });  
  33. });  
*注意:公共样式
[css] view plaincopy
  1. body{font: 12px/1.6em Helvetica,Arial,sans-serif;}  
  2. *{margin:0px; padding:0px;}  
  3. a{text-decoration:none; outline: none;}  
  4. a:hover{text-decoration:underline;}  
  5. ul li{list-style-type:none;}  
  6. .g-cl{clear:both;zoom:1;}  
  7. h1, h2, h3, h4, h5, h6 {font-size: 1em; margin:0px; padding:0px;}  
  8. html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/  
JQuery实现导航效果、新闻滚动、广告效果、横向滚动
标签：

相关文章