JQuery實現導航效果、新聞滾動、廣告效果、橫向滾動

  

JQuery實現導航效果、新聞滾動、廣告效果、橫向滾動

1、導航效果

2、新聞滾動（跑馬燈）

3、廣告效果

4、新款上市模塊橫向滾動

1、導航效果

圖1.1 導航效果

1.1 導航樣式

<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

<!--導航開始-->
<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、新聞滾動（跑馬燈）

圖1.2 新聞滾動

2.1 新聞滾動樣式

<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

<!--最新動態開始-->
<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、廣告效果

圖3.1 廣告效果

3.1 廣告效果樣式

<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

<!--廣告滾動-->
<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、新款上市模塊橫向滾動

圖4.1 新款上市模塊橫向滾動

4.1 新款上市模塊橫向滾動樣式

<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

<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下始終顯示滾動條*/