使用最少的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显示放大图像的最佳方式是什么？

回答

相关问题