使用最少的JQuery显示放大图像的最佳方式是什么?

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

目标:

  • 在鼠标悬停(或:悬停)上,将预览图像放大约400%并将其显示在页面的中心
  • 当鼠标离开时删除预览

问题:

  • 像FancyBox这样的解决方案太臃肿了
    • 在FancyBox的情况下,它忽略了图像元素的宽度和高度,这使得它无用

  • 当这些“灯箱”被召唤时,大部分这些“灯箱”都会集中注意力

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

unionunion提问于
小楼CF龙行九天,沐风化雨!You are the one!回答于
已采纳

这里是一个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>

扫码关注云+社区

领取腾讯云代金券