Question

目标：

在鼠标悬停（或：悬停）上，将预览图像放大约400％并将其显示在页面中央
鼠标离开时删除预览

问题：

像FancyBox这样的解决方案过于臃肿
- 在FancyBox的情况下，它忽略了图像元素的宽度和高度，这使得它无用
这些“灯箱”中的大多数在被称为

真的，我只是在寻找一个简单有效的解决方案。

Answer 1

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

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

Answer 2

尝试这样的事情。诀窍是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>

使用最小的JQuery显示爆炸图像的最佳方法是什么？

2 个答案: