Question

I want jQuery colorbox to open the picture on mouse hover and close on mouseout. Can you advice how I can do it?

Answer 1

这可以让你开始......

HTML

<img src="a.jpg" alt="b" />

jQuery

$( img ).hover(function() {
    $(this).stop().animate({ width:  170%  }, 500);
}, function() {
    $(this).stop().animate({ width:  100%  }, 500);
});

Answer 2

i would do something like this:

 $(function(){
  function fatOnHover($elements, zoomSize, animationSpeed){
  $elements.each(function(i){
     var $wrap, height, width, bigWidth, bigHeight, $that = $(this);
     height = $that.height();
     width = $that.width();
     bigWidth = (width / 100) * zoomSize;
     bigHeight = (height / 100) * zoomSize;
      $wrap = "<div style= z-index: " + (10000-i) +";width: " + width + "px; height: " + height + "px; position: relative; float: left ></div>",
      $that.data({"width": width, "height": height, "bigWidth": bigWidth, "bigHeight": bigHeight})
          .wrap($wrap)
   }).hover(
     function(){
        var $that = $(this);
        $that.stop().animate({"width": $that.data("bigWidth"), "height": $that.data("bigHeight")}, animationSpeed)
     },
     function(){
        var $that = $(this);
        $that.stop().animate({"width": $that.data("width"), "height": $that.data("height")}, animationSpeed)
     }
  ).css("position", "absolute")
   }


fatOnHover($( img ), 120, 300)
})

页: 1 http://jsfiddle.net/GHuNF/1/。

HTML

jQuery

友情链接