利用javascript實現圖片動態的放大和縮小

時間 2019-11-11

標籤利用 javascript 實現圖片動態放大縮小欄目 JavaScript 简体版

原文原文鏈接

利用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> html