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

xiaoxiao2021-02-28  130

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

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

1、导航效果

图1.1 导航效果 1.1 导航样式 [css]  view plain copy <style type="text/css">           /*导航样式开始*/           #navigation { width:784pxpadding:8pxmargin:8px autobackground:#3B5998;height:18px;}           #navigation ul li { float:leftmargin-right:14px;positionrelative ;z-index:100;}           #navigation ul li a { display:block;padding:0 8pxbackground:#EEEEEEfont-weight:700;}           #navigation ul li a:hover { background:nonecolor:#fff;}           #navigation ul li ul{background-color#88C366;positionabsolute;width80px;overflow:hidden;display:none;}           #navigation ul li:hover ul{background-color#88C366;positionabsolute;width100px;display:block;}           #navigation ul li ul li{border-bottom1px solid #BBB;text-alignleft;width100%;}           /*导航样式结束*/   </style>   1.2 导航HTML [html]  view plain copy <!--导航开始-->   <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>   <!--导航结束-->   1.3导航脚本 [javascript]  view plain copy //导航效果(兼容IE6)   $(function(){          $("#navigation ul li:has(ul)").hover(function(){               $(this).children("ul").stop(true,true).slideDown(400);           },function(){               $(this).children("ul").stop(true,true).slideUp("fast");       });   })  

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

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

2、新闻滚动(跑马灯)

图1.2 新闻滚动 2.1 新闻滚动样式 [css]  view plain copy <style type="text/css">           /**最新动态 样式*/           .news{width:200px;border:1px solid #AAAAAAmargin:10px;}           .scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;}           h3height:26pxbackground:#3B5998;color:#FFFline-height:26pxtext-indent:6px;}           .scrollNews li{height:20pxpadding-left:10px;}       </style>   2.2 新闻滚动HTML [html]  view plain copy <!--最新动态开始-->   <div class="news">       <h3>最新动态</h3>       <div class="scrollNews" >           <ul>               <li><a href="#" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>               <li><a href="#" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>               <li><a href="#" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>               <li><a href="#" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>               <li><a href="#" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>               <li><a href="#" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>               <li><a href="#" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>           </ul>       </div>   </div>   <!--最新动态结束-->   2.3新闻滚动脚本 [javascript]  view plain copy /*新闻滚动*/   $(function() {       var $this = $(".scrollNews");       var scrollTimer;       $this.hover(function() {           clearInterval(scrollTimer);       }, function() {           scrollTimer = setInterval(function() {               scrollNews($this);           }, 3000);       }).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能直接移动元素       })   }  

3、广告效果

图3.1 广告效果 3.1 广告效果样式 [css]  view plain copy <style type="text/css">           /*滚动广告样式*/           .ad {margin:10px;width:586pxheight:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;}           .slider,.num{position:absolute;}           .slider li{ list-style:none;display:inline;}           .slider img{ width:586pxheight:150px;display:block;}           .num{ right:5px; bottom:5px;}           .num li{floatleft;color#FF7300;text-aligncenter;line-height16px;width16px;height16px;font-familyArial;font-size12px;cursorpointer;overflowhidden;margin3px 1px;border1px solid #FF7300;background-color#fff;}           .num li.on{color#fff;line-height21px;width21px;height21px;font-size16px;margin0 1px;border0;background-color#FF7300;font-weightbold;}       </style>   3.2 广告效果HTML [html]  view plain copy <!--广告滚动-->   <div class="ad" >        <ul class="slider" >           <li><img src="/images/shopping/ads/1.gif" alt="ad1"/></li>                   <li><img src="/images/shopping/ads/2.gif" alt="ad2"/></li>                   <li><img src="/images/shopping/ads/3.gif" alt="ad3"/></li>                   <li><img src="/images/shopping/ads/4.gif" alt="ad4"/></li>                   <li><img src="/images/shopping/ads/5.gif" alt="ad5"/></li>         </ul>         <ul class="num" >           <li>1</li>           <li>2</li>           <li>3</li>           <li>4</li>           <li>5</li>         </ul>   </div>   3.3 广告效果脚本 [javascript]  view plain copy /*广告滚动效果*/   $(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; }           }, 3000);       }).trigger("mouseleave");   })   // 通过控制top ,来显示不同的幻灯片   function showImg(index) {       var adHeight = $(".ad").height();       $(".slider").stop(truefalse).animate({ top: -adHeight * index }, 1000);   //翻滚效果       //$(".slider").css("top", -adHeight * index);     //跳转效果       $(".num li").removeClass("on")           .eq(index).addClass("on");   }       首先使用$(".ad").height()方法获取产品广告的高度,然后使用animate()方法来达到动画效果,每个图片的滚动高度有所不同,可以通过传入的参数index的值乘以产品广告的高度来得到。在animate()方法前,使用shop(true,false)方法将未执行完的动画队列清空,但不将正在执行的动画跳转到末状态。最后使用$(".num li").removeClass("on").eq(index).addClass("on")来给当前的广告数字添加高亮样式。     现在,当光标在广告右下角的数字上滑过时,广告就会有上下翻转的效果。但如果不去碰它,那么广告始终不会动。因此可以使用trigger()方法来触发。

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

图4.1 新款上市模块横向滚动 4.1 新款上市模块横向滚动样式 [css]  view plain copy <style type="text/css">           /*新款上市样式*/           .prolist {position:relative;height220px;margin-bottom:10pxoverflow:hiddenborder1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width586pxmargin:10px;}            h3{backgroundnone repeat scroll 0 0 #3B5998;color#FFFFFF;height26px;line-height26px;text-indent6px;}           .prolist .prolist_content{position:absolutewidth:1800px;top:26px; left:0px;padding:20px 0 0 8px;}           .prolist ul{margin-bottom:10pxfloat:left;height220px;}           .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:blockwidth:124pxheight:124pxbackground:#EEEborder:0;}           .module_left_right{ position:absolute; top:5px; right:10pxcursor:pointer;}       </style>   4.2 新款上市模块横向滚动HTML [html]  view plain copy <div class="prolist">       <h3>新款上市</h3>       <p class="module_left_right"><img id="goLeft" src="/images/shopping/left.gif" alt="左键" /><img id="goRight"  src="/images/shopping/right.gif" alt="右键" /></p>       <div  class="prolist_content">           <ul>               <li>                   <a href="#"><img src="/images/shopping/img_1.jpg" alt="" class="imageOver" /></a><span>免烫高支棉衬衣1</span><span>$120.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣2</span><span>$120.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>               </li>                   <li>                   <a href="#"><img src="/images/shopping/img_1.jpg" alt="" /></a><span>免烫高支棉衬衣3</span><span>$120.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_2.jpg" alt="" /></a><span>免烫斜纹衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_3.jpg" alt="" /></a><span>棉小方格正装衬衣</span><span>$129.00</span>               </li>               <li>                   <a href="#"><img src="/images/shopping/img_4.jpg" alt="" /></a><span>小米兰格衬衣蓝色</span><span>$129.00</span>               </li>           </ul>       </div>   </div>              4.3 新款上市模块横向滚动 [javascript]  view plain copy /*新款上市模块横向滚动*/   $(function() {       var page = 1;       var i = 4; //每版放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 }, 800); //通过改变left值,跳转到第一个版面                   page = 1;               } else {                   $parent.animate({ left: '-=' + none_unit_width }, 800);  //通过改变left值,达到每次换一个版面                   page++;               }           }       });       //往左 按钮       $("#goLeft").click(function() {           if (!$parent.is(":animated")) {               if (page == 1) {  //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。                   $parent.animate({ left: '-=' + none_unit_width * (page_count - 1) }, 800); //通过改变left值,跳转到最后一个版面                   page = page_count;               } else {                   $parent.animate({ left: '+=' + none_unit_width }, 800);  //通过改变left值,达到每次换一个版面                   page--;               }           }       });   });   *注意:公共样式 [css]  view plain copy body{font12px/1.6em Helvetica,Arial,sans-serif;}   *{margin:0pxpadding:0px;}   a{text-decoration:noneoutlinenone;}   a:hover{text-decoration:underline;}   ul li{list-style-type:none;}   .g-cl{clear:both;zoom:1;}   h1, h2, h3, h4, h5, h6 {font-size1emmargin:0pxpadding:0px;}   html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/  
转载请注明原文地址: https://www.6miu.com/read-19633.html

最新回复(0)