页面上方的工具条里能放5张工具的图片。但实际有许多个工具。 
需要用鼠标拖动时,发生滚动,显示其他的工具。但不能一下就显示,主要要的是那个滚动的效果。就像手机一样,起始就是手机上要用,我需要一个效果,然后做修改。

解决方案 »

  1.   


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="gb2312" />
            <title></title>
            <style>
                body {
                    height:2000px;
                }
                div {
                    position:absolute; right:40px; top:40px;
                    width:90%; height:30px;
                    background:#ddd;
                }
            </style>
        </head>
        <body>
            <div id="test">滚动试试</div>
            <script>
                function toolbar(el){
                    el = typeof el == 'string' ? document.getElementById(el) : el;
                    var elTop = el.offsetTop;
                    var sTop = 0;
                    window.onscroll = function(){
                        sTop = document.body.scrollTop || document.documentElement.scrollTop;
                        if( sTop > elTop ){
                            el.style.top = sTop + 'px';
                        }else{
                            el.style.top = elTop + 'px';
                        }
                    }
                }
                toolbar('test');
            </script>
        </body>
    </html>
    这个意思?
      

  2.   

    没有效果啊需求这样:比如页面有20个div,每个div里放有一个工具图片
    但一条工具条里只允许显示6个div, 那么当手放到工具条上向右拖动时,这个条里的图片开始滚动,就能看到其他的工具图片了。 很像跑马灯。但不是一次显示一张,而是随着手的托动去显示。
      

  3.   

    最后使用了一个jquery插件 touchslider 解决了这个问题。