Javascript 什么'；使用最小JQuery显示放大图像的最佳方式是什么？_Javascript_Jquery

Javascript 什么'；使用最小JQuery显示放大图像的最佳方式是什么？

javascript jquery

Javascript 什么'；使用最小JQuery显示放大图像的最佳方式是什么？,javascript,jquery,Javascript,Jquery,目标是：在鼠标悬停（或：hover）时，将预览图像放大约400%，并将其显示在页面中央鼠标离开时删除预览问题是：像FancyBox这样的解决方案过于臃肿在FancyBox的例子中，它忽略了图像元素的宽度和高度，这使得它毫无用处大多数这些“灯箱”在被呼叫时会窃取焦点真的，我只是在寻找一个简单有效的解决方案也许您正在寻找工具提示？可以在工具提示中使用任何html（包括图像）也许您正在寻找工具提示？可以在工具提示中使用任何html（包括图像）试试这样的方法。诀窍是pos

目标是：

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

问题是：

像FancyBox这样的解决方案过于臃肿
- 在FancyBox的例子中，它忽略了图像元素的宽度和高度，这使得它毫无用处
大多数这些“灯箱”在被呼叫时会窃取焦点

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

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

试试这样的方法。诀窍是

position

你可以把div放在任何你想放的地方。读点东西。你可以阅读有关悬停的文章

下面是一个html示例。（将此文件复制到文本文件，然后用浏览器打开）


测验

猞猁
美洲虎

动物变量={
“猞猁”：
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
“捷豹”：
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var悬停=函数（e）{
//您可以从元素中获得要显示的内容，而不是内容
//你可以用身份证。
var name=$（e.target）.html（）
$（“#图片”）。追加（“”）
}
var unhovered=函数（）{
$（'#picture'）.empty（）；
}
//在这里你可以把mouseenter和mouseleave绑起来
$（'li'）。悬停（悬停，未悬停）；

试试这样的方法。诀窍是

position

你可以把div放在任何你想放的地方。读点东西。你可以阅读有关悬停的文章

下面是一个html示例。（将此文件复制到文本文件，然后用浏览器打开）


测验

猞猁
美洲虎

动物变量={
“猞猁”：
"http://wnbaoutsiders.files.wordpress.com/2009/06/lynx21.jpg",
“捷豹”：
"http://www.tropical-rainforest-animals.com/image-files/jaguar.jpg"
}
var悬停=函数（e）{
//您可以从元素中获得要显示的内容，而不是内容
//你可以用身份证。
var name=$（e.target）.html（）
$（“#图片”）。追加（“”）
}
var unhovered=函数（）{
$（'#picture'）.empty（）；
}
//在这里你可以把mouseenter和mouseleave绑起来
$（'li'）。悬停（悬停，未悬停）；

如果你能把一些代码连在一起就好了。如果你能把一些代码连在一起就好了。

<!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>