利用javascript实现图片动态的放大和缩小
利用javascript实现图片动态的放大和缩小
在网站经常用到缩略图,但一般情况下是不能改变大小的.文本实现了这么⼀个效果, 当你鼠标移到
缩略图上时, 缩略图动态的放大到设定的大小,鼠标移开时,动态的恢复到缩略图的大小.主要是通
过javascript实现.适当的应用可以增强用户体验.
文章原始链接:http://www.codeproject.com/useritems/Expanding_Image_Animator.asp
javascript代码如下:
// Thumbnail expansion and reduction animation
//use expandthumb(142, 500, 449) to increase and
//reducethumb(142) to decrease the thumbnail
//142 represents the name of the thumbimage.. it should be like thumb142
// for reduceimage
// and the expanded image id will be screen142 for the value 142 in
//expandimage
//500 and 449 are the enlarges size of the image
// Thumbnail expansion and reduction animation
//use expandthumb(
expandingid = 0;
expandingstep = 0;//放缩图片的当前步骤数
expandingwidth = 0;
expandingheight = 0;
expandingtop = 0;//图片的相对top
expandingleft = 0;//图片的相对left
expandingtimeout = 0;//定时器的标识
expandingtotalsteps = 15;//放缩图片时的步骤次数
function expandthumb(thumbid, fullwidth, fullheight) {
if (expandingtimeout != 0) {
clearTimeout(expandingtimeout);
}
if (expandingid > 0 && expandingid != thumbid) {
restorethumb();
}
if (expandingid != thumbid) {
img = document.getElementById("screen" + thumbid);
img.style.display = 'block';
expandingid = thumbid;
expandingstep = 1;
expandingwidth = fullwidth;
expandingheight = fullheight;
expandingtop = img.offsetTop;
expandingleft = img.offsetLeft;
} else if (expandingstep < 1) {
expandingstep = 1;
}
expandstep();
}
function doexpand() {
img = document.getElementById("screen" + expandingid);
thumb = document.getElementById("thumb" + expandingid);
myscroll = getScroll();
if (expandingtop + thumb.height > myscroll.top + myscroll.height) {
finaltop = myscroll.top + myscroll.height - expandingheight;
} else {
finaltop = expandingtop + thumb.height - expandingheight;
}
if (finaltop < myscroll.top) { finaltop = myscroll.top; }
img.style.top = finaltop + ((expandingtop - finaltop) *
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';
if (expandingleft + thumb.width > myscroll.left + myscroll.width) {
finalleft = myscroll.left + myscroll.width - expandingwidth;
} else {
finalleft = expandingleft + thumb.width - expandingwidth;
}
if (finalleft < myscroll.left) { finalleft = myscroll.left; }
img.style.left = finalleft + ((expandingleft - finalleft) *
(expandingtotalsteps - expandingstep) / expandingtotalsteps) + 'px';
img.width = thumb.width + ((expandingwidth - thumb.width) *
expandingstep / expandingtotalsteps);
img.height = thumb.height + ((expandingheight - thumb.height) *
expandingstep / expandingtotalsteps);
}
function restorethumb() {
img = document.getElementById("screen" + expandingid);
img.style.top = '';
img.style.left = '';
img.style.display = 'none';
expandingid = 0;
}
function expandstep() {
expandingtimeout = 0;
doexpand();
if (expandingstep < expandingtotalsteps) {
expandingstep++;
expandingtimeout = setTimeout("expandstep()", 20);
}
}
function reducestep() {
expandingtimeout = 0;
doexpand();
if (expandingstep > 0) {
expandingstep--;
expandingtimeout = setTimeout("reducestep()", 20);
} else {
restorethumb();
}
}
function reducethumb(thumbid) {
if (expandingtimeout != 0) {
clearTimeout(expandingtimeout);
}
if (expandingstep > 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,
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
};
}
}
在html
<html>
<head>
<script language="javascript" type="text/javascript" src="expandimg.js"></script>
</head>
<body>
<img src='mypic.jpg' width=400 height=400 alt='img' border=0 id='screen142'
onmouseout='reducethumb(142); return false;' style='position: absolute; display: none;'>
<img src='mypic.jpg' width=100 height=100 alt='mis' border=0 id='thumb142'
onmouseover='expandthumb(142, 500, 449);'></a>
</body>
</html>
