前端图片编辑插件_web前端入门到实战：图片放大插件鼠标悬停图片放大效果

最新推荐文章于 2024-07-15 15:54:21 发布

weixin_39870664

最新推荐文章于 2024-07-15 15:54:21 发布

阅读量207

点赞数

文章标签：前端图片编辑插件

本文链接：https://blog.csdn.net/weixin_39870664/article/details/111374387

版权

都知道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