都知道jquery都插件是非常强大的,分享点jquery插件效果,方便效果开发使用。
一、HTML代码
jquery图片放大插件鼠标滑过图片放大效果
二、插件代码(插件名称:jquery.zoomImgRollover.js)
(function(jQuery){ jQuery.fn.zoomImgRollover = function(options) { var defaults = { percent:30, duration:600 }; var opts = jQuery.extend(defaults, options); // static zoom function function imageZoomStep(jZoomImage, x, origWidth, origHeight) { var width = Math.round(origWidth * (.5 + ((x * opts.percent) / 200))) * 2; var height = Math.round(origHeight * (.5 + ((x * opts.percent) / 200))) * 2; var left = (width - origWidth) / 2; var top = (height - origHeight) / 2; jZoomImage.css({width:width, height:height, top:-top, left:-left}); } return this.each(function() { var jZoomImage = jQuery(this); var origWidth = jZoomImage.width(); var origHeight = jZoomImage.height(); // add css ness. to allow zoom jZoomImage.css({position: "relative"}); jZoomImage.parent().css({overflow: "hidden