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

迷南。 2021-09-12 08:42 574阅读 0赞

1、导航效果

2、新闻滚动（跑马灯）

3、广告效果

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

### **1、导航效果**    ###

![1333441380_1207.png][]

图1.1 导航效果

**1.1 导航样式**

**1.2 导航HTML**

<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导航脚本**

//导航效果（兼容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、新闻滚动（跑马灯） ###

![1333443190_3789.png][]  
图1.2 新闻滚动

**2.1 新闻滚动样式**

**2.2 新闻滚动HTML**

<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新闻滚动脚本**

/*新闻滚动*/
    $(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、广告效果 ###

![1333445614_2584.png][]  
图3.1 广告效果

**3.1 广告效果样式**

**3.2 广告效果HTML**

<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 广告效果脚本**

/*广告滚动效果*/
    $(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、新款上市模块横向滚动 ###

![1333460650_9808.png][]  
图4.1 新款上市模块横向滚动

**4.1 新款上市模块横向滚动样式**

**4.2 新款上市模块横向滚动HTML**

<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 新款上市模块横向滚动**

/*新款上市模块横向滚动*/
    $(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--;
                }
            }
        });
    });

**\*注意:公共样式**

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下始终显示滚动条*/

[1333441380_1207.png]: https://img-my.csdn.net/uploads/201204/03/1333441380_1207.png
[1333443190_3789.png]: https://img-my.csdn.net/uploads/201204/03/1333443190_3789.png
[1333445614_2584.png]: https://img-my.csdn.net/uploads/201204/03/1333445614_2584.png
[1333460650_9808.png]: https://img-my.csdn.net/uploads/201204/03/1333460650_9808.png