您的位置：首页 > Web前端 > JavaScript

鼠标略过图片放大js效果

2013-03-06 16:36 429 查看

鼠标略过图片放大js效果

<script type="text/javascript">

exid = 0;
exstep = 0;
exwdth = 0;
exht = 0;
extp = 0;
exlft = 0;
extot = 0;
extotst = 15;

function expandthumb(thumbid, fullwidth, fullheight) {
if (extot != 0) {
clearTimeout(extot);
}
if (exid > 0 && exid != thumbid) {
restorethumb();
}
if (exid != thumbid) {
img = document.getElementById("screen" + thumbid);
img.style.display = 'block';
exid = thumbid;
exstep = 1;
exwdth = fullwidth;
exht = fullheight;
extp = img.offsetTop;
exlft = img.offsetLeft;
} else if (exstep < 1) {
exstep = 1;
}
expandstep();
}

function doexpand() {
img = document.getElementById("screen" + exid);
thumb = document.getElementById("thumb" + exid);
myscroll = getScroll();
if (extp + thumb.height > myscroll.top + myscroll.height) {
finaltop = myscroll.top + myscroll.height - exht;
} else {
finaltop = extp + thumb.height - exht;
}
if (finaltop < myscroll.top) { finaltop = myscroll.top; }
img.style.top = finaltop + ((extp - finaltop) *
(extotst - exstep) / extotst) + 'px';

if (exlft + thumb.width > myscroll.left + myscroll.width) {
finalleft = myscroll.left + myscroll.width - exwdth;
} else {
finalleft = exlft + thumb.width - exwdth;
}
if (finalleft < myscroll.left) { finalleft = myscroll.left; }
img.style.left = finalleft + ((exlft - finalleft) *
(extotst - exstep) / extotst) + 'px';

img.width = thumb.width + ((exwdth - thumb.width) * exstep / extotst);
img.height = thumb.height + ((exht - thumb.height) * exstep / extotst);
}

function restorethumb() {
img = document.getElementById("screen" + exid);
img.style.top = '';
img.style.left = '';
img.style.display = 'none';
exid = 0;
}

function expandstep() {
extot = 0;
doexpand();
if (exstep < extotst) {
exstep++;
extot = setTimeout("expandstep()", 20);
}
}

function reducestep() {
extot = 0;
doexpand();
if (exstep > 0) {
exstep--;
extot = setTimeout("reducestep()", 20);
} else {
restorethumb();
}
}

function reducethumb(thumbid) {
if (extot != 0) {
clearTimeout(extot);
}
if (exstep > 0) {
reducestep();
}
}

// returns the scroll position and size of the browser
function getScroll() {
if (document.all && typeof document.body.scrollTop != "undefined") {
// IE model
var ieBox = document.compatMode != "CSS1Compat";
var cont = ieBox ? document.body : document.documentElement;
return {
left:   cont.scrollLeft,
top:    cont.scrollTop,
width:  cont.clientWidth,
height: cont.clientHeight
};
} else {
return {
left:   window.pageXOffset,
top:    window.pageYOffset,
width:  window.innerWidth,
height: window.innerHeight
};
}
}
</script>

<body>
<img src='1.jpg' width=400 height=400 alt='img' border=0
id='screen142' onmouseout='reducethumb(142); return false;'
class='position: absolute; display: none;'>
<img src='1.jpg' width=100 height=100 alt='mis' border=0
id='thumb142' onmouseover='expandthumb(142, 500, 449);'></a>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航