1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學-CoverFlow滾動滑鼠第三鍵捲軸不亂跑

jQuery教學-CoverFlow滾動滑鼠第三鍵捲軸不亂跑

2009/09/08

梅問題-jQuery教學-CoverFlow滾動滑鼠第三鍵捲軸不亂跑

  上星期曾分享過,利用Flash實作出CoverFlow的特效展示,並支援滑鼠滾輪,當滑鼠滾動時,可快速的切換圖片,但各位應該會發現到,當在滾動時,不但CoverFlow裡面的圖片會跑,若文章過有捲軸時,頁面也會跟著一起被滾動,真的是滾到令人頭昏眼亂,在好友男丁的協助下,終於解決了此問題,並且在梅干與男丁的討論下,並加了一個更棒的功能,那就是直接移到Flash的區塊上就直接被滾動,不用再點一下,目前只能在IE、Firefox下運作,但這二大瀏覽器的佔有率也算蠻高了,另外此範例是採用swfobject最新版的來包裝,效果還挺不賴的喔!


放在<head>…..</head>之間:

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<script type=“text/javascript”>
    $(function(){
//載入SWF(檔名,id,寬,高,版本,底色) var so = new SWFObject(“CoverFlow.swf”, “CoverFlow”, “500”, “300”, “10”, “#0000”);
so.write(“swf”);//寫入區塊

    //滾動控制事件    
    $("#swf").bind("DOMMouseScroll", function(){            
        return false;
    }).bind("mousewheel", function(){
        return false;           
    }).hover(function(){
        $("#CoverFlow").focus();
    }, function(){
        $("body").focus();
        $("#CoverFlow").blur();
    });     

});

</script>


放在<body>…..</body>之間:

<div id=“swf”></div>

[範例預覽] [範例下載]※解壓密碼:minwt.com