What's the best way to display a blown-up image using minimal JQuery?_问答_开发者

What's the best way to display a blown-up image using minimal JQuery?

开发者 https://www.devze.com 2022-12-29 13:05 出处：网络

The Goal: On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page

The Goal:

On mouseover (or :hover), enlarge the preview image by about 400% and display it in the center of the page
Remove the preview when the mouse leaves

Solutions like FancyBox are too bloated
- in FancyBox's case it ignores width and height for image elements, which makes it useless
Most of these "lightboxes" steal focus when they're called

Really, I'm just looking for a simple, efficient solution.

try something like this. the trick is position you can put the div wherever you want. read something here. and you can read about hover here

here is an html example. (copy this to a text file and open it withyour browser)

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

Perhaps you're looking for a tooltip? You can use any html (including images) inside the tooltip.

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