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: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: 100px;display:block;} #navigation ul li ul li{border-bottom: 1px solid #BBB;text-align: left;width: 100%;} /*导航样式结束*/ </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 #AAAAAA; margin:10px;} .scrollNews{width:200px;height:85px;line-height:20px;overflow:hidden;background:#FFFFFF;} h3{ height:26px; background:#3B5998;color:#FFF; line-height:26px; text-indent:6px;} .scrollNews li{height:20px; padding-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:586px; height:150px;overflow:hidden;border:1px solid #AAAAAA;position:relative;} .slider,.num{position:absolute;} .slider li{ list-style:none;display:inline;} .slider img{ width:586px; height:150px;display:block;} .num{ right:5px; bottom:5px;} .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;} .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;} </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(true, false).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;height: 220px;margin-bottom:10px; overflow:hidden; border: 1px solid #AAAAAA;background:#FFFFFF;border:1px solid #AAAAAA;width: 586px; margin:10px;} h3{background: none repeat scroll 0 0 #3B5998;color: #FFFFFF;height: 26px;line-height: 26px;text-indent: 6px;} .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> 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{font: 12px/1.6em Helvetica,Arial,sans-serif;} *{margin:0px; padding:0px;} a{text-decoration:none; outline: none;} a:hover{text-decoration:underline;} ul li{list-style-type:none;} .g-cl{clear:both;zoom:1;} h1, h2, h3, h4, h5, h6 {font-size: 1em; margin:0px; padding:0px;} html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/

转载请注明原文地址: https://www.6miu.com/read-19633.html

技术

最新回复(0)