jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » JavaScript 範例 » [mootools] image menu - 不用Flash達到滑動清單效果.

凱森 發表於 2009-2-12 11:58

[mootools] image menu - 不用Flash達到滑動清單效果.

無意間在Google 搜索「image Menu」找到的

[img]http://lh4.ggpht.com/_nQ6AG2DdQlE/SZMMTbuH-iI/AAAAAAAAAhg/z73Mb692_40/s144/imagemenu.jpg[/img]

滿有質感的,要修改也很方便

希望對大家在構置版面的時候會有幫助!
下面是範例網址：

[url=http://www.phatfusion.net/imagemenu/index.htm]http://www.phatfusion.net/imagemenu/index.htm[/url]


[size=2]download：[/size]
[url=http://www.phatfusion.net/imagemenu/imagemenu.zip]http://www.phatfusion.net/imagemenu/imagemenu.zip[/url]

wmh 發表於 2009-2-14 12:03

DEMO:

[jsg.example]
<link rel="stylesheet" href="_lib/mootools/plugins/imagemenu/imageMenu.css" type="text/css" media="all" />
                        <div id="imageMenu">
                        <ul>
                                <li class="landscapes" style="margin-left: 0"><a href="http://www.aaronbirchphotography.com">Landscapes</a></li>
                                <li class="people" style="margin-left: 0"><a href="http://www.aaronbirchphotography.com">People</a></li>
                                <li class="nature" style="margin-left: 0"><a href="http://www.aaronbirchphotography.com">Nature</a></li>
                                <li class="urban" style="margin-left: 0"><a href="http://www.aaronbirchphotography.com">Urban</a></li>
                                <li class="abstract" style="margin-left: 0"><a href="http://www.aaronbirchphotography.com">Abstract</a></li>
                        </ul>
                        </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="_lib/mootools/plugins/imagemenu/imageMenu.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);return true;}});
});
</script>
[/jsg.example]

terry.lin 發表於 2009-3-16 17:56

與jquery ui blockUI 搭配有問題

老大，我單獨使用這個js是可以作用的，
但是若搭配jquery ui 的 blockUI 時圖片就不會動，但是blockUI還是有作用，
請問有解決的方法嗎？謝謝

wmh 發表於 2009-3-16 19:15

哦，會不會是 global varible 相衝?
用 Firebug 有沒有看到錯誤訊息呢？

terry.lin 發表於 2009-3-17 16:10

[quote]原帖由 [i]wmh[/i] 於 2009-3-16 19:15 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=409&ptid=178][img]http://jsgears.com/images/common/back.gif[/img][/url]
哦，會不會是 global varible 相衝?
用 Firebug 有沒有看到錯誤訊息呢？ [/quote]

有耶，紅色是標記的錯誤行數，如下：
this.elements[0].getStyle is not a function
[color=Red]this.widths.closed = this.elements[0].getStyle('width').toInt();[/color]

Exception..."Component returned failure code:0x80040111(NS_ERROR_NOT_AVAILABLE) [nsIChannel.contentType]"
nsresult:"
[color=Red]channel.contentType = "application/vnd.mozilla.maybe.feed";[/color]

wmh 發表於 2009-3-17 20:34

你說的是用 jQuery BlockUI 嗎：
[jsg.example]
<input type="button" value="按我，產生全頁遮罩！" id="demo2" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="_lib/jquery/plugins/jquery.blockUI.1.33.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function() {
  $j("#demo2").click(function() {
    $j.blockUI({ message: '<div style="padding: 5px"><img src="http://www.cachefile.net/graphics/activity/mentalized.net/snake_transparent.gif" /> 歡迎來到 jsGears.com !<br /><br />滑鼠再點一次關閉全頁遮罩。</div>'
    });
    setTimeout(function() {
      $j(document).one('click', function() {
        $j.unblockUI();
      });
    }, 100);
  });
});
</script>
[/jsg.example]

我這一頁同時用了 BlockUI 看起來是正常的，不過我有用 jQuery.noConflict() 的語法，請參考：
[url]http://jsgears.com/thread-63-1-1.html[/url]

terry.lin 發表於 2009-3-18 10:48

[quote]原帖由 [i]wmh[/i] 於 2009-3-17 20:34 發表 [url=http://jsgears.com/redirect.php?goto=findpost&pid=413&ptid=178][img]http://jsgears.com/images/common/back.gif[/img][/url]
你說的是用 jQuery BlockUI 嗎：
[jsg.example]




$j = jQuery.noConflict();
$j(document).ready(function() {
  $j("#demo2").click(function() {
    $j.blockUI({ message: ' 歡迎來到 jsGears.com !滑鼠再點一 ... [/quote]



謝謝版主，我再試看看！:lol

terry.lin 發表於 2009-3-25 17:56

回復 6# 的帖子

老大，用了這個語法後果然可以使用了，真是謝謝您！

ronaldy 發表於 2009-4-26 14:18

請問可以改圖片高度嗎?

對不起我是新手,不太懂jquery和mootools,請問我想改圖片的
高度可以怎辨,THX

wmh 發表於 2009-4-26 16:20

你可以參考範例檔，圖片的高度應該是在 css 內設定的。就依實際的圖片高度設定即可。

ronaldy 發表於 2009-4-26 20:09

THX

謝謝,唔該哂版主大人

ivannatong 發表於 2009-6-3 17:46

我係新手
想問下個d相係咪可以連結去網頁
而唔係單單彈個視窗
如果係要點做??
thx

凱森 發表於 2009-6-3 20:10

回復 12# 的帖子

在程式碼約43行

        <script type="text/javascript">
            
            window.addEvent('domready', function(){
                var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i)[color=Red]{alert(e);}[/color]});
            });
        </script>

紅色字體的部份拿掉即可...

ivannatong 發表於 2009-6-4 18:53

唔得BOR
一樣係彈個個視窗
THX

wmh 發表於 2009-6-4 21:48

不好意思，因為我看不懂你的發言，可以改用普通話嗎？這樣或許我可以幫幫看～

ivannatong 發表於 2009-6-4 22:59

回復 15# 的帖子

我盡量試一下
請問相片能不能連去其他網頁?
而不是單單有一個視窗
如果是，要怎樣做
thx

wmh 發表於 2009-6-5 00:05

喔，可以的，以官方的範例來說，原始的 HTML 結構是 <li> 底下有一層 <a>，因此該連結的位址會被傳入到 function 內的第一個參數，這時如果你需要連去其他網頁，可以用 location.href = e; 去讓網頁轉址。

[code js]
<script type="text/javascript">
window.addEvent('domready', function(){
  var myMenu = new ImageMenu($$('#imageMenu a'),{
    openWidth:310, border:2,
    onOpen:function(e, i) {
      location.href = e;
    }
  });
});
</script>
[/code]

ivannatong 發表於 2009-6-5 00:19

行啦!
謝謝您=]

ivannatong 發表於 2009-6-5 23:04

不好意思
不過有些仍會有個視窗
按了enter就會到連結的網站
請問怎樣可以不要那些視窗

hjj28810 發表於 2009-8-10 00:01

图片的高度可以改了，但宽度怎么改啊？？？

查看完整版本: [mootools] image menu - 不用Flash達到滑動清單效果.