Hot!Ajax

...because open source matters

  • Increase font size
  • Default font size
  • Decrease font size

Pamoorama(全景图mootools应用)

E-mail
(10 VOTITALY_VOTES, VOTITALY_AVERAGE: 4.40 VOTITALY_OUTOF)
Image

来源:http://www.silverscripting.com/pamoorama/index.php

Pamoorama是一个用于全景图片的简单脚本,它仅仅只有5kb(需要mootools的支持),没有引用外部css,只有html。

他所做的就是显示整张图片的一部分,当鼠标滑过时图片会随着移动,Pamoorama可以在一个小窗口中展示全景图的缩略图,因此你可以看见正显示的是整个图片的那一部分。拖动这个小窗口也是可以实现的。

version 0.3能够自动滚动,并有开始和暂停按钮。描述它的功能和好处是一件困难的事情,看看下面的例子后你就会明白我所说的意思。

  • Sample 1
  • Sample 2
  • Sample 3

    使用:

    pamoorama非常容易使用,你要做的就是在你的页面中加入mootools和pamoorama javascript。

    {tab=head}

    <script src="/mootools.v1.11.js" type="text/javascript" charset="utf-8"></script>






    <script src="/pamoorama0.3.js" type="text/javascript" charset="utf-8"></script>

    {tab=div}
     <div id="pamoorama1" alt="panoramafile.jpg"></div> 
    {tab=javascripts}
    <script type="text/javascript" charset="utf-8">	

    window.addEvent('domready', init);

    function init() { myPamoorama = new pamoorama('id_of_container', {options}); }

    </script>

    {/tabs}

    参数说明:

    • id_of_container: String, div的id (本例中的 'pamoorama1')
    • activateSlider(true): Bool
    • width(650): Int
    • footercolor(#000): String
    • captioncolor(#fff): String
    • caption(image name): String
    • enableAutoscroll(true): Bool
    • autoscrollSpeed(10000): Int
    • autoscrollOnLoad(false): Bool

    下载页:http://www.silverscripting.com/pamoorama/index.php


  • Comments (0)add comment

    Write comment
    You must be logged in to post a comment. Please register if you do not have an account yet.

    busy

    LBL_NEWERNAME
    LBL_OLDERNAME

     

    Google Translator

    link

    • jQuery

    • MooTools

    • boygj.com

    • Ajax技术论坛

    • QQ网址大全
    • Joomla!-开源天空
    • Web Development (Scripts) - TOP.ORG

    We have 39 guests and 2 members online