jQuery插件或技巧建議？

我有點jQuery的新手，我期待創造一個互動的翻轉：翻轉小圖像，並有一個HTML窗口，將鼠標光標分別移動。jQuery插件或技巧建議？

我喜歡JQZoom的外觀和感覺 - 但是當滾過小圖像時，我想讓縮放區域成爲實際的HTML（圖像和實時類型），而不是靜態圖像。

得過且過的經過搞清楚基於百分比遊標的位置，在小圖像時和調換是到HTML的一個div（隱藏溢出）的思想博格爾斯MY MIND！

我渴望jQuery的忍者的建議有！

2011-12-22 ArleyM

移調鼠標的位置正是你想要的東西，很簡單。注意：

HTML：

<body> 
    <div id="driver" /> 
    <div id="viewport"> 
    <div id="tile" /> 
    </div> 
</body>

CSS：

#driver { width:100px; height:100px; } 
#viewport { width:100px; height:100px; overflow:hidden; } 
#tile { width:800px; height:333px; position:relative; }

JS（使用jQuery）：

$(function() { 
    var tileSize = { 
     width: $('#tile').innerWidth(), 
     height: $('#tile').innerHeight() 
    }; 
    var driverSize = { 
     width: $('#driver').innerWidth(), 
     height: $('#driver').innerHeight() 
    }; 
    var viewportSize = { 
     width: $('#viewport').innerWidth(), 
     height: $('#viewport').innerHeight() 
    }; 
    $('#driver').mousemove(function(e) { 
     var mousePos = { 
      left: e.pageX - $(this).offset().left, 
      top: e.pageY - $(this).offset().top 
     }; 
     var posRatio = { 
      x: mousePos .left/driverSize.width, 
      y: mousePos .top/driverSize.height 
     }; 
     var tilePos = { 
      left: viewportSize.width/2 - tileSize.width * posRatio.x, 
      top: viewportSize.height/2 - tileSize.height * posRatio.y 
     }; 
     $('#tile').css(tilePos); 
    }); 
});

考慮你的頭腦，UNBOGGLED。：d

來源

2012-01-11 18:25:00 jkoreska

完美！輝煌！簡單而優雅。非常感謝！ – ArleyM 2012-01-11 18:31:26

jQuery插件或技巧建議？

回答

相關問題