jquery图片放大插件鼠标悬停图片放大效果
<!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>
(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图片放大插件鼠标悬停图片放大效果的更多相关文章
- jquery.imagezoom.js制作鼠标悬停图片放大镜特效、参数和最简教程
一.插件介绍 今天在用到放大镜效果的时候,突然发现网站里没有放大镜的插件.于是总结了一下,放到这里.为自己,也为他人提供方便.jquery.imagezoom.js这款插件用途很简单,就是鼠标移过去, ...
- 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=" ...
- 通过CSS3实现：鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
随机推荐
- 超越Storm，SparkStreaming——Flink如何实现有状态的计算
流式计算分为无状态和有状态两种情况.无状态计算观察每个独立的事件,Storm就是无状态的计算框架,每一条消息来了以后和前后都没有关系,一条是一条.比如我们接收电力系统传感器的数据,当电压超过240v就 ...
- net core天马行空系列： 泛型仓储和声明式事物实现最优雅的crud操作
系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 哈哈哈哈,大家好,我就是那个高产似母猪的三合,长久以来,我一直在思考,如何才能实现高效而简洁的仓储模式 ...
- Java 线程池 ThreadPoolExecutor 的那些事儿
线程池基础知识 ThreadPoolExecutor : 一个线程池 Executors : 线程池工厂,通过该类可以取得一个拥有特定功能的线程池 ThreadPoolExecutor类实现了Exec ...
- RestTemplate 1
@Inject private RestTemplate restTemplate; @SuppressWarnings("unchecked") public Use ...
- hdu2222 Keywords Search (AC自动机板子
https://vjudge.net/problem/HDU-2222 题意:给几个模式串和一个文本串,问文本串中包含几个模式串. 思路:贴个板子不解释. #include<cstdio> ...
- 牛客2018国庆集训派对Day3 I Metropolis 多源最短路径
传送门:https://www.nowcoder.com/acm/contest/203/I 题意: 求每个大都会到最近的一个大都会的距离. 思路: 把每个大都会设为起点,跑一遍最短路.在跑最短路的时 ...
- codeforces 811 E. Vladik and Entertaining Flags（线段树+并查集）
题目链接:http://codeforces.com/contest/811/problem/E 题意:给定一个行数为10 列数10w的矩阵,每个方块是一个整数, 给定l和r 求范围内的联通块数量 所 ...
- 什么是Werkzeug
上一节介绍了什么是WSGI,这一节我们看看Werkzeug 按照官方的说法,Werkzeug(源自德语,工具的意思)是一个WSGI工具库,它开始于一个适用于WSGI的多样化的工具集,后来发展成了现在非 ...
- 每天学会一点点(map常量)
map常用的声明方式(使用静态代码块): public final static Map map = new HashMap(); static { map.put("key1", ...
- eclipse使用Gitlab
1.生成SSH key 用的是eclipse自带的生成key的工具,windows->preferences->General->Network Connections->SS ...