都知道jquery都插件是非常强大的，最近分享点jquery插件效果，方便效果开发使用。
一、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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片放大插件鼠标滑过图片放大效果</title>
<meta name="description" content="jquery图片放大插件制作一个当鼠标滑过图片，图片按等比例缩放放大效果。动画图片放大展示特效。jQuery插件。" />
</head>

<body>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.zoomImgRollover.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#testimg").zoomImgRollover();
});
</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:544px;margin:20px auto;}
</style>

<div class="demo">
	<a href='http://www.3mooc.com/' style="border:1px solid #000;">
		<img id="testimg" width="400" height="564" src="data:images/132ad.jpg" alt="" border="0">
	</a>
</div>

</body>
</html>
二、插件代码（插件名称：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", display:"block", position: "relative", width: origWidth, height: origHeight});

			jZoomImage.mouseover(function()
			{
				jZoomImage.stop().animate({dummy:1},{duration:opts.duration, step:function(x)
				{
					imageZoomStep(jZoomImage, x, origWidth, origHeight)
				}});
			});

			jZoomImage.mouseout(function()
			{
				jZoomImage.stop().animate({dummy:0},{duration:opts.duration, step:function(x)
				{
					imageZoomStep(jZoomImage, x, origWidth, origHeight)
				}});
			});
		});
	};

})(jQuery);

jquery图片放大插件鼠标悬停图片放大效果的更多相关文章

  1. jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程

    一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...

  2. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  5. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  6. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  8. 通过CSS3实现：鼠标悬停图片360度旋转效果

    效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...

  9. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

随机推荐

  1. C#开发BIMFACE系列7 服务端API之获取文件信息列表

    系列目录     [已更新最新开发文章,点击查看详细] 本文详细介绍如何获取BIMFACE平台中所有上传过的文件信息列表. 请求地址:GET https://file.bimface.com/file ...

  2. 深入浅出TypeScript（3）- 函数重载和泛型

    面向对象特性中,最根本的就是面向对象的三大基本特征:封装.继承.多态.同时,TypeScript中也存在多态的使用,比如函数重载,今天我们先看一下函数重载以及泛型的概念. 什么是函数重载 简单来说,函 ...

  3. 牛客OI测试赛 C 序列 思维

    链接:https://www.nowcoder.com/acm/contest/181/C来源:牛客网 题目描述 小a有n个数,他想把他们划分为连续的权值相等的k段,但他不知道这是否可行. 每个数都必 ...

  4. 计蒜客 ACM训练联盟周赛 第一场 Christina式方格取数 思维

    助手Christina发明了一种方格取数的新玩法:在n*m的方格棋盘里,每个格子里写一个数.两个人轮流给格子染色,直到所有格子都染了色.在所有格子染色完后,计算双方的分数.对于任意两个相邻(即有公共边 ...

  5. JXOI 2017 颜色 题解

    T3 颜色 100/100 对于这题由于数据范围小,有一种神奇的做法,我们可以把每个值随机赋值,但是保证相同颜色的和为0,就代表消去了这个颜色,我们只要取寻找合法区间就行,合法区间的寻找只要找相同前缀 ...

  6. d3.js 制作简单的俄罗斯方块

    d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类 由于方法拆分 ...

  7. Visual Studio 调试 —— 附加到进程（远程服务器）

    一般在部署环境下不会有 Visual Studio 开发工具的,所以需要有 Remote Debugger(远程调试器) 才可以进行远程调试. Remote Debugger 获取 方法一:Visua ...

  8. mybatis 批量插入时候的一个注意点

    <insert id="batchInsert" parameterType="java.util.List" useGeneratedKeys=&quo ...

  9. explain的关键字段的意义

    mysql提供的explain工具可以输出一些有用的信息. 一下是相关的部分返回值的意义. select_type 表示SELECT的类型,常见的取值有: SIMPLE:简单表,不使用表连接或子查询 ...

  10. 机器学习Label Encoder和One Hot Encoder

    标签编码(Label Encoder) 在本例中第一列是Country, 如果我们要运行任何模型, 数据中不能包含文本 所以要对文本进行处理 接下来,我们从sklearn库中导入LabelEncode ...