设为首页收藏本站

切换到宽版

全部未解决悬赏

第九区-Jquery超级群 › 论坛 › Jquery技术 › jquery插件讨论 › 鼠标滑过图片，图片变大

发新帖

查看: 709|回复: 5

鼠标滑过图片，图片变大 [复制链接]

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 10:53:59 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>yj511 - - 鼠标滑过图片，图片变大</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT LANGUAGE="JavaScript" src='jquery-1.4.4.js'></SCRIPT>
<script type="text/javascript">
(function($){
$.fn.zoomi = function() {
$(this).filter("img").each(function(){
if(!this.z) {
$(this).zoom1().mouseover(function(){$(this).zoom2().show();});
$(this.z).mouseout(function(){$(this).hide();}); }
});
return this;
}
$.fn.zoom1 = function() {
$(this).each(function(){
var e = this;
$(e).css({'position':'relative','z-index':'8'}).after('<img class="'+e.className+'">');
e.z = e.nextSibling;
$(e.z).removeClass("zoomi").addClass("zoom2").attr("src",e.alt || e.src)
.css({'position':'absolute','z-index':'10'});
$(e.z).hide();
});
return this;
}
$.fn.zoom2 = function() {
var s = [];
this.each(function(){
var e = this;
if(!e.z) e = $(e).zoom1()[0]; s.push(e.z);
if(!e.z.complete) return;
if(!e.z.width) { $(e.z).show(); e.z.width=e.z.width; $(e.z).hide(); }
$(e.z).css({left:$(e).offsetLeft()-(e.z.width-e.scrollWidth)/2+'px',
top:$(e).offsetTop()-(e.z.height-e.scrollHeight)/2+'px'});
});
return this.pushStack(s);
}
$.fn.offsetLeft = function() {
var e = this[0];
if(!e.offsetParent) return e.offsetLeft;
return e.offsetLeft + $(e.offsetParent).offsetLeft(); }
$.fn.offsetTop = function() {
var e = this[0];
if(!e.offsetParent) return e.offsetTop;
return e.offsetTop + $(e.offsetParent).offsetTop(); }
$(function(){ $('img.zoomi').zoomi(); });
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
for(i=1; i<=5; ++i)
$('#bleach img.zoomi').zoomi();
});
</script>
</head>
<body>
<div id="bleach"><a href="#"><img height="110" src="master-css-div-shadow.jpg" class="zoomi"/></a><img class="zoom2" src="master-css-div-shadow.jpg" style="display: none;"/><a href="#"><img height="110" src="master-css-div-shadow.jpg" class="zoomi"/></a><img class="zoom2" src="master-css-div-shadow.jpg" style="display: none;"/><a href="#"><img height="110" src="master-css-div-shadow.jpg" class="zoomi"/></a><img class="zoom2" src="master-css-div-shadow.jpg" style="display: none;"/><a href="#"><img height="110" src="master-css-div-shadow.jpg" class="zoomi" /></a><img class="zoom2" src="4.jpg" style="display: none;"/><a href="#"><img height="110" src="5.jpg" class="zoomi"/></a><img class="zoom2" src="5.jpg" style="display: none;"/></div>
</body>
</html>

复制代码

附件: 你需要登录才可以下载或查看附件。没有帐号？立即注册 

使用道具举报

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 10:55:27 |显示全部楼层

使用道具举报

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 10:59:07 |显示全部楼层

king 发表于 2011-7-8 10:55

谢谢惠顾

使用道具举报

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 11:10:55 |显示全部楼层

很好很强大，我也会做的说

别人笑我太淫荡我笑他人不开放

使用道具举报

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 13:44:31 |显示全部楼层

想说的是，图片上这本书，我也有..........

使用道具举报

Rank: 7 Rank: 7 Rank: 7

发表于 2011-7-8 22:38:36 |显示全部楼层

oooO ↘┏━┓ ↙ Oooo
( 踩)→┃踩┃ ←(踩 )
\ ( →┃√┃ ← ) /
　 \_)↗┗━┛ ↖(_/

不积跬步无以至千里
不积小流无以成江海
阿良的小站

使用道具举报

发新帖

Archiver|第九区-Jquery超级群

GMT+8, 2012-2-8 09:14 , Processed in 0.066844 second(s), 16 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部