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的版本最好 ...
随机推荐
- 模板列传值到子窗体中,子窗体中多选gridview中checkbox保存数据多项到数据库中
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- vscode同步插件 sync(gist,token)
网上很多同步教程,按照教程操作upload时一直报错:sync:invalid gist ID 查找问题很久才知道 gist和token是两个东西.下面重新梳理下: 一.下载安装插件 Setting ...
- java程序员学习路线阶段总结20190903
算法:锻炼写代码的逻辑 刷题位置:leetcode 书籍:小灰漫画算法 leecode使用方法: 转载自http://blog.csdn.net/tostq 又到了一年毕业就业季了,三年前的校招季我逃 ...
- Jedis操作Redis--SortedSet类型
/** * SortedSet(有序集合) * ZADD,ZCARD,ZCOUNT,ZINCRBY,ZRANGE,ZRANGEBYSCORE,ZRANK,ZREM,ZREMRANGEBYRANK,ZR ...
- xcode删除一个项目
退出xcode. 在Finder中删除项目文件夹.
- 洛谷 P2051 [AHOI2009]中国象棋 状态压缩思想DP
P2051 [AHOI2009]中国象棋 题意: 给定一个n*m的空棋盘,问合法放置任意多个炮有多少种情况.合法放置的意思是棋子炮不会相互打到. 思路: 这道题我们可以发现因为炮是隔一个棋子可以打出去 ...
- ccpc网赛 hdu6703 array(权值线段树
http://acm.hdu.edu.cn/showproblem.php?pid=6703 大意:给一个n个元素的数组,其中所有元素都是不重复的[1,n]. 两种操作: 将pos位置元素+1e7 查 ...
- CodeForces 367 C Sereja and the Arrangement of Numbers 欧拉回路
Sereja and the Arrangement of Numbers 题解: ummm. 在一副图中,如果全部点的度数是偶数/只有2个点是奇数,则能一笔画. 考虑图的点数k为奇数的时候,那么每个 ...
- Play on Words UVA - 10129
题目: Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has ...
- Codeforces Round #582 (Div. 3)
题目链接:https://codeforces.com/contest/1213 A: 题意:给定数的位置,位置为整数,每个数可以向左或右移动一格或者两格,移动一格花费一个硬币,两格不花费硬币,问所有 ...