Question

此导航解决方案仅适用于safari，我认为jquery在所有浏览器中的工作方式相同。 http://notre.co/nav/

使用jquery根据鼠标位置水平滚动div。

是否有一个简单的解决方法，还是我必须找到另一种方式？

非常感谢瑞典人！

Answer 1

正如我在评论中所述，你的标记是错误的 - 因此dom树不像你期望的那样。

 <li> //opening li
    <center><h1 class="author">danbychoi</h1></center>

    <div class="image"> //opening div
        <a href="http://danbychoi.com/2011/03/28/no-diggity/" target="_blank">
        <img src="http://notre.co/timthumb.php?src=http://danbychoi.com/files/2011/03/Snapshot_20110328_7-Kopi-copy.jpg&h=180&w=226&zc=1&a=t" border="0"></a>
        <div class="text">
            <center>
                <h1 class="author">1 hour ago</h1>
                <a href="http://danbychoi.com/2011/03/28/no-diggity/" target="_blank">
                    <h1 class="fontface">No Diggity</h1>
                </a>
            </center>

    </li> 
          //wrong order here
  </div>

</div>

你的js还可以

Answer 2

我不太清楚我明白应该做什么;但是，我发现一件可能导致问题的重大事件。尝试在$(document).ready函数的页面上放置第二个javascript，这样你就有了一个如下所示的大脚本：


$(document).ready(function() {
    $('img').each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 0.3 }, 200);
        },
       function() {
           $(this).stop().animate({ opacity: 1.0 }, 800);
       });
    });
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
});

第二个javascript现在可能无法正常工作，因为它在加载文档的其余部分之前运行。

jquery解决方案仅适用于safari

2 个答案: