使用最少的JQuery顯示放大圖像的最佳方式是什麼？

目標：使用最少的JQuery顯示放大圖像的最佳方式是什麼？

在鼠標懸停（或：懸停），通過約400％放大的預覽圖像，並在頁面
卸下預覽當鼠標離開

的中心顯示它

問題：喜歡的fancybox

解決方案過於臃腫
- 中的fancybox的情況下，它忽視了寬度和高度的圖像元素，這使得它沒用
大多數這些「燈箱」偷焦點，當他們叫

真的，我只是看看爲一個簡單，有效的解決方案。

來源

2010-05-09 TkTech

這將是很好，如果你可以毗連一些代碼。 – msemelman 2010-05-09 19:51:52

嘗試這樣的事情。技巧是position你可以把div放在任何你想要的地方。讀東西here。你可以閱讀關於懸停here

這裏是一個html示例。（複製到一個文本文件，並與您的瀏覽器打開它）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <title>Test</title> 
     <script text="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"> 
     </script> 
    </head> 
    <body> 
    <ul> 
     <li class="">Lynx</li> 
     <li>Jaguar</li> 
    </ul> 
    <div id="picture" style="position:absolute; top:0px; right:0px;"> 
    </div> 
    <script type="text/javascript"> 
    var animal = { 
     "Lynx": 
      "http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg", 
     "Jaguar" : 
      "http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg" 
     } 
    var hovered = function(e) { 
     //you can get what to show from the elemnt, instead of the content 
     // you could use an id. 
     var name = $(e.target).html() 
     $('#picture').append("<img src='" + animal[name] +"'/>") 
    } 
    var unhovered = function() { 
     $('#picture').empty(); 
    } 
    //here you bind mouseenter and mouseleave 
    $('li').hover(hovered, unhovered); 
    </script> 
    </body>

來源

2010-05-09 18:45:46 msemelman

或多或少有竅門 – TkTech 2010-05-09 19:28:34

也許您正在尋找工具提示？您可以在工具提示中使用任何html（包括圖像）。

http://flowplayer.org/tools/tooltip/index.html

來源

2010-05-09 18:44:51 ghoppe

使用最少的JQuery顯示放大圖像的最佳方式是什麼？

回答

相關問題