第一个:
Js模仿水波滑动效果图片轮显代码
<html>
<head>
<title>Js图片水波滑动效果</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:5px auto;background:#f0f0f0;}
img {margin:0;border:0;padding:0;}
#jsF {position:relative;margin:0;width:270px;height:185px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<div id="jsF"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['http://www.codefans.net/jscss/demoimg/wall1.jpg','http://www.codefans.net/jscss/demoimg/wall2.jpg','http://www.codefans.net/jscss/demoimg/wall3.jpg','http://www.codefans.net/jscss/demoimg/wall4.jpg','http://www.codefans.net/jscss/demoimg/wall5.jpg' ];
var aLink = ['#','#','#','#','#','#'];
var iImgWidth = 270, iImgHeight = 185;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
jsF_create();
}
function jsF_create() {
if (aImg[iA+2] && !bD[iA+2]){
oImg[iA+2] = new Image();
oImg[iA+2].src = aImg[iA+2];
}
if (!bD[iA]) {
var oUl = document.createElement('ul');
/*oUl.style.position = 'absolute';
oUl.style.top = '0';
oUl.style.left = '0';*/
oUl.style.width = iImgWidth + 'px';
oUl.style.height = iImgHeight + 'px';
var oUlLi = document.createElement('li');
oUlLi.style.right = '0';
oUlLi.style.width = iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
var oLiA = document.createElement('a');
oLiA.href = aLink[iA];
var oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
oUl.appendChild(oUlLi);
for (var i=0; i<10; i++) {
oUlLi = document.createElement('li');
oUlLi.style.right = i*iDivWidth + 'px';
oUlLi.style.width = 1.5*iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
//oUlLi.style.background = color[i];
oLiA = document.createElement('a');
oLiA.href = aLink[iA];
oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
//oUlLi.appendChild(document.createTextNode(i));
oUl.appendChild(oUlLi);
}
jsF.appendChild(oUl);
bD[iA] = !bD[iA];
}
jsF_show();
//document.getElementById('debug').innerText = jsF.innerHTML;
}
function jsF_show(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
oUl[iA].style.zIndex = ++iC;
for (var i=1; i<11; i++){
oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
oImgs[i].style.visibility = 'hidden';
}
jsF_move();
}
function jsF_move(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
if (iB++<10)
oImgs[iB].style.visibility = 'visible';
for (var i=1; i<oImgs.length; i++) {
var iBgpx = parseInt(oImgs[i].style.marginLeft);
if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
} else {
oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
}
}
//document.getElementById('debug').innerText = jsF.innerHTML;
if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
setTimeout('jsF_move()',speed1);
} else {
iB = 0;
//document.getElementById('debug').innerText = oUl[iA].style.display;
iA = ++iA==aImg.length ? 0 : iA;
if (bD[iA]) {
setTimeout('jsF_show()',speed2);
} else {
setTimeout('jsF_create()',speed2);
}
}
}
//]]>
</script>
</body>
</html>
<head>
<title>Js图片水波滑动效果</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:5px auto;background:#f0f0f0;}
img {margin:0;border:0;padding:0;}
#jsF {position:relative;margin:0;width:270px;height:185px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<div id="jsF"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['http://www.codefans.net/jscss/demoimg/wall1.jpg','http://www.codefans.net/jscss/demoimg/wall2.jpg','http://www.codefans.net/jscss/demoimg/wall3.jpg','http://www.codefans.net/jscss/demoimg/wall4.jpg','http://www.codefans.net/jscss/demoimg/wall5.jpg' ];
var aLink = ['#','#','#','#','#','#'];
var iImgWidth = 270, iImgHeight = 185;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
jsF_create();
}
function jsF_create() {
if (aImg[iA+2] && !bD[iA+2]){
oImg[iA+2] = new Image();
oImg[iA+2].src = aImg[iA+2];
}
if (!bD[iA]) {
var oUl = document.createElement('ul');
/*oUl.style.position = 'absolute';
oUl.style.top = '0';
oUl.style.left = '0';*/
oUl.style.width = iImgWidth + 'px';
oUl.style.height = iImgHeight + 'px';
var oUlLi = document.createElement('li');
oUlLi.style.right = '0';
oUlLi.style.width = iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
var oLiA = document.createElement('a');
oLiA.href = aLink[iA];
var oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
oUl.appendChild(oUlLi);
for (var i=0; i<10; i++) {
oUlLi = document.createElement('li');
oUlLi.style.right = i*iDivWidth + 'px';
oUlLi.style.width = 1.5*iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
//oUlLi.style.background = color[i];
oLiA = document.createElement('a');
oLiA.href = aLink[iA];
oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
//oUlLi.appendChild(document.createTextNode(i));
oUl.appendChild(oUlLi);
}
jsF.appendChild(oUl);
bD[iA] = !bD[iA];
}
jsF_show();
//document.getElementById('debug').innerText = jsF.innerHTML;
}
function jsF_show(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
oUl[iA].style.zIndex = ++iC;
for (var i=1; i<11; i++){
oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
oImgs[i].style.visibility = 'hidden';
}
jsF_move();
}
function jsF_move(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
if (iB++<10)
oImgs[iB].style.visibility = 'visible';
for (var i=1; i<oImgs.length; i++) {
var iBgpx = parseInt(oImgs[i].style.marginLeft);
if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
} else {
oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
}
}
//document.getElementById('debug').innerText = jsF.innerHTML;
if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
setTimeout('jsF_move()',speed1);
} else {
iB = 0;
//document.getElementById('debug').innerText = oUl[iA].style.display;
iA = ++iA==aImg.length ? 0 : iA;
if (bD[iA]) {
setTimeout('jsF_show()',speed2);
} else {
setTimeout('jsF_create()',speed2);
}
}
}
//]]>
</script>
</body>
</html>
第二个：
Google纪念Logo小球下落特效
<html>
<head>
<title>Google纪念Logo小球下落特效</title>
</head>
<body>
<a href="#" target="_blank">
<img src=http://google.com/logos/newton09-tree.jpg width=384 height=138 border=0 alt="艾萨克牛顿" title="艾萨克牛顿" id=logo onload="window.lol&&lol();
setTimeout(function(){
var h=0,v=1,f=document.getElementById('fall'),
i=setInterval(function(){
if(f){
var r=parseInt(f.style.right)+h,
b=parseInt(f.style.bottom)-v;
f.style.right=r+'px';
f.style.bottom=b+'px';
if(b>-210){v+=2}
else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0} //关键句
}
if(v==0){clearInterval(i);h=0;v=1;}
},25);
},2000); " />
</a>
<img id="fall" src="http://google.com/logos/newton09-apple.png" style="position:relative;right:248px;bottom:46px"/>
<noscript><style>#fall{bottom:-210px!important}</style></noscript>
</body>
</html>
<head>
<title>Google纪念Logo小球下落特效</title>
</head>
<body>
<a href="#" target="_blank">
<img src=http://google.com/logos/newton09-tree.jpg width=384 height=138 border=0 alt="艾萨克牛顿" title="艾萨克牛顿" id=logo onload="window.lol&&lol();
setTimeout(function(){
var h=0,v=1,f=document.getElementById('fall'),
i=setInterval(function(){
if(f){
var r=parseInt(f.style.right)+h,
b=parseInt(f.style.bottom)-v;
f.style.right=r+'px';
f.style.bottom=b+'px';
if(b>-210){v+=2}
else{h=(v>9)?v*0.1:0;v*=(v>9)?-0.3:0} //关键句
}
if(v==0){clearInterval(i);h=0;v=1;}
},25);
},2000); " />
</a>
<img id="fall" src="http://google.com/logos/newton09-apple.png" style="position:relative;right:248px;bottom:46px"/>
<noscript><style>#fall{bottom:-210px!important}</style></noscript>
</body>
</html>
第三个：
JS图片切换，带缩略图版
<HTML xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>五屏带缩略图幻灯片切换代码</title>
<style>
BODY {
FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2
}
A {
TEXT-DECORATION: none
}
A:link {
COLOR: #505050; color1: #54564c
}
A:visited {
COLOR: #505050; color1: #54564c
}
A:hover {
COLOR: #d40005; TEXT-DECORATION: underline
}
A:active {
COLOR: #f30
}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.box {
FLOAT: left; WIDTH: 472px
}
.box .boxpadding {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px
}
#Slide {
CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px
}
#Slide A {
COLOR: #000
}
.img {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center
}
.boxpadding {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid
}
.thumb_title {
MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3
}
#Slide_Thumb {
MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute
}
.thumb_on {
DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer
}
.thumb_off {
DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer
}
.thumb_off {
FILTER: alpha(opacity=50); -moz-opacity: 0.5
}
.thumb_on {
FILTER: alpha(opacity=100); -moz-opacity: 1
}
.thumb_off IMG {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px
}
.thumb_on IMG {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px
}
</style>
</head>
<body>
<table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="472"><div class=box style="MARGIN-BOTTOM: 8px">
<div class=boxpadding>
<div id=Slide> <a id=foclnk
href="/" target=_blank>
<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"
src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a>
<div class=thumb_title id=foctitle><a href="/"
target=_blank>图一</a></div>
<div id=Slide_Thumb>
<div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div>
<div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div>
<div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a
href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div>
<div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a
href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div>
<div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a
href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div>
<script language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "http://www.codefans.net/jscss/demoimg/wall1.jpg";
lnkarry[0] = "/";
ttlarry[0] = "图一";
picarry[1] = "http://www.codefans.net//jscss/demoimg/wall2.jpg";
lnkarry[1] = "/";
ttlarry[1] = "图二";
picarry[2] = "http://www.codefans.net//jscss/demoimg/wall3.jpg";
lnkarry[2] = "/";
ttlarry[2] = "图三";
picarry[3] = "/jscss/demoimg/wall4.jpg";
lnkarry[3] = "/";
ttlarry[3] = "图四";
picarry[4] = "/jscss/demoimg/wall5.jpg";
lnkarry[4] = "/";
ttlarry[4] = "图五";
</script>
</div>
</div>
</div>
</div></td>
</tr>
</table>
<div align="center">
<SCRIPT type=text/javascript>
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("focpic").src = picarry[id];
document.getElementById("foclnk").href = lnkarry[id];
document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
currslid = id;
for(i=0;i<5;i++){
document.getElementById("tmb"+i).className = "thumb_off";
};
document.getElementById("tmb"+id).className ="thumb_on";
focpic.style.visibility = "hidden";
focpic.filters[0].Apply();
if (focpic.style.visibility == "visible") {
focpic.style.visibility = "hidden";
focpic.filters.revealTrans.transition=23;
}
else {
focpic.style.visibility = "visible";
focpic.filters[0].transition=23;
}
focpic.filters[0].Play();
stopit();
}
function playnext(){
if(currslid==4){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}</SCRIPT>
</div>
</body>
</html>
<head>
<title>五屏带缩略图幻灯片切换代码</title>
<style>
BODY {
FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2
}
A {
TEXT-DECORATION: none
}
A:link {
COLOR: #505050; color1: #54564c
}
A:visited {
COLOR: #505050; color1: #54564c
}
A:hover {
COLOR: #d40005; TEXT-DECORATION: underline
}
A:active {
COLOR: #f30
}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.box {
FLOAT: left; WIDTH: 472px
}
.box .boxpadding {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px
}
#Slide {
CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px
}
#Slide A {
COLOR: #000
}
.img {
BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center
}
.boxpadding {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid
}
.thumb_title {
MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3
}
#Slide_Thumb {
MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute
}
.thumb_on {
DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer
}
.thumb_off {
DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer
}
.thumb_off {
FILTER: alpha(opacity=50); -moz-opacity: 0.5
}
.thumb_on {
FILTER: alpha(opacity=100); -moz-opacity: 1
}
.thumb_off IMG {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px
}
.thumb_on IMG {
BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px
}
</style>
</head>
<body>
<table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="472"><div class=box style="MARGIN-BOTTOM: 8px">
<div class=boxpadding>
<div id=Slide> <a id=foclnk
href="/" target=_blank>
<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"
src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a>
<div class=thumb_title id=foctitle><a href="/"
target=_blank>图一</a></div>
<div id=Slide_Thumb>
<div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div>
<div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div>
<div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a
href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div>
<div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a
href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div>
<div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a
href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div>
<script language=javascript type=text/javascript>
var picarry = {};
var lnkarry = {};
var ttlarry = {};
picarry[0] = "http://www.codefans.net/jscss/demoimg/wall1.jpg";
lnkarry[0] = "/";
ttlarry[0] = "图一";
picarry[1] = "http://www.codefans.net//jscss/demoimg/wall2.jpg";
lnkarry[1] = "/";
ttlarry[1] = "图二";
picarry[2] = "http://www.codefans.net//jscss/demoimg/wall3.jpg";
lnkarry[2] = "/";
ttlarry[2] = "图三";
picarry[3] = "/jscss/demoimg/wall4.jpg";
lnkarry[3] = "/";
ttlarry[3] = "图四";
picarry[4] = "/jscss/demoimg/wall5.jpg";
lnkarry[4] = "/";
ttlarry[4] = "图五";
</script>
</div>
</div>
</div>
</div></td>
</tr>
</table>
<div align="center">
<SCRIPT type=text/javascript>
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("focpic").src = picarry[id];
document.getElementById("foclnk").href = lnkarry[id];
document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
currslid = id;
for(i=0;i<5;i++){
document.getElementById("tmb"+i).className = "thumb_off";
};
document.getElementById("tmb"+id).className ="thumb_on";
focpic.style.visibility = "hidden";
focpic.filters[0].Apply();
if (focpic.style.visibility == "visible") {
focpic.style.visibility = "hidden";
focpic.filters.revealTrans.transition=23;
}
else {
focpic.style.visibility = "visible";
focpic.filters[0].transition=23;
}
focpic.filters[0].Play();
stopit();
}
function playnext(){
if(currslid==4){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}</SCRIPT>
</div>
</body>
</html>
第四个：
图片放大技术代码示例及注释
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript图片放大技术代码示例及注释</title>
<style type="text/css">
#magnifier{
width:342px;
height:420px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1px solid #000;
}
#img{
width:342px;
height:420px;
}
#Browser{
border:1px solid #000;
z-index:100;
position:absolute;
background:#555;
}
#mag{
border:1px solid #000;
overflow:hidden;
z-index:100;
}
</style>
<script type="text/javascript">
function getEventObject(W3CEvent) {//事件标准化函数
return W3CEvent || window.event;
}
function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) {//兼容浏览器设置透明值
if(elem.filters) {
elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} else {
elem.style.opacity = level;
}
}
function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem,prop[i]);
} else {
elem.style[i] = prop[i];
}
}
return elem;
}
var magnifier = {
m : null,
init:function(magni){
var m = this.m = magni || {
cont : null, //装载原始图像的div
img : null, //放大的图像
mag : null, //放大框
scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
}
css(m.img,{
'position' : 'absolute',
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值
'height' : (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值
})
css(m.mag,{
'display' : 'none',
'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
'height' : m.cont.clientHeight + 'px',
'position' : 'absolute',
'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置为原始图像的右方远10px
'top' : m.cont.offsetTop + 'px'
})
var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //获取border的宽
css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]为浏览框
'display' : 'none', //开始设置为不可见
'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //原始图片的宽/比例值 - border的宽度
'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高/比例值 - border的宽度
'opacity' : 0.5//设置透明度
})
m.img.src = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像
m.cont.style.cursor = 'crosshair';
m.cont.onmouseover = magnifier.start;
},
start:function(e){
if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove = magnifier.move;//this指向m.cont
this.onmouseout = magnifier.end;
},
move:function(e){
var pos = getPointerPosition(e); //事件标准化
this.getElementsByTagName('div')[0].style.display = '';
css(this.getElementsByTagName('div')[0],{
'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px',
'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
})
magnifier.m.mag.style.display = '';
css(magnifier.m.img,{
'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
})
},
end:function(e){
this.getElementsByTagName('div')[0].style.display = 'none';
magnifier.removeIframe(magnifier.m.img); //销毁iframe
magnifier.m.mag.style.display = 'none';
},
createIframe:function(elem){
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
elem.parentNode.appendChild(layer);
layer.style.width = elem.offsetWidth + 'px';
layer.style.height = elem.offsetHeight + 'px';
},
removeIframe:function(elem){
var layers = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
layers[0].parentNode.removeChild(layers[0]);
}
}
}
window.onload = function(){
magnifier.init({
cont : document.getElementById('magnifier'),
img : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
scale : 3
});
}
</script>
</head>
<body>
<div id="magnifier">
<img src="http://img015.photo.21cn.com/photos/album/20091022/o/801CBCFE6EDFF5C0F0893313EA1318D5.jpg" id="img" />
<div id="Browser"></div>
</div>
<div id="mag"><img id="magnifierImg" /></div>
<select style="position:absolute;top:200px;left:650px;width:100px;">
</select>
</body>
</html>
<head>
<title>JavaScript图片放大技术代码示例及注释</title>
<style type="text/css">
#magnifier{
width:342px;
height:420px;
position:absolute;
top:100px;
left:250px;
font-size:0;
border:1px solid #000;
}
#img{
width:342px;
height:420px;
}
#Browser{
border:1px solid #000;
z-index:100;
position:absolute;
background:#555;
}
#mag{
border:1px solid #000;
overflow:hidden;
z-index:100;
}
</style>
<script type="text/javascript">
function getEventObject(W3CEvent) {//事件标准化函数
return W3CEvent || window.event;
}
function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
e = e || getEventObject(e);
var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
return { 'x':x,'y':y };
}
function setOpacity(elem,level) {//兼容浏览器设置透明值
if(elem.filters) {
elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
} else {
elem.style.opacity = level;
}
}
function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
for(var i in prop) {
if(i == 'opacity') {
setOpacity(elem,prop[i]);
} else {
elem.style[i] = prop[i];
}
}
return elem;
}
var magnifier = {
m : null,
init:function(magni){
var m = this.m = magni || {
cont : null, //装载原始图像的div
img : null, //放大的图像
mag : null, //放大框
scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
}
css(m.img,{
'position' : 'absolute',
'width' : (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值
'height' : (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值
})
css(m.mag,{
'display' : 'none',
'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
'height' : m.cont.clientHeight + 'px',
'position' : 'absolute',
'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置为原始图像的右方远10px
'top' : m.cont.offsetTop + 'px'
})
var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //获取border的宽
css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]为浏览框
'display' : 'none', //开始设置为不可见
'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //原始图片的宽/比例值 - border的宽度
'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高/比例值 - border的宽度
'opacity' : 0.5//设置透明度
})
m.img.src = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大图像
m.cont.style.cursor = 'crosshair';
m.cont.onmouseover = magnifier.start;
},
start:function(e){
if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
magnifier.createIframe(magnifier.m.img);
}
this.onmousemove = magnifier.move;//this指向m.cont
this.onmouseout = magnifier.end;
},
move:function(e){
var pos = getPointerPosition(e); //事件标准化
this.getElementsByTagName('div')[0].style.display = '';
css(this.getElementsByTagName('div')[0],{
'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px',
'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
})
magnifier.m.mag.style.display = '';
css(magnifier.m.img,{
'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
})
},
end:function(e){
this.getElementsByTagName('div')[0].style.display = 'none';
magnifier.removeIframe(magnifier.m.img); //销毁iframe
magnifier.m.mag.style.display = 'none';
},
createIframe:function(elem){
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:false;';
elem.parentNode.appendChild(layer);
layer.style.width = elem.offsetWidth + 'px';
layer.style.height = elem.offsetHeight + 'px';
},
removeIframe:function(elem){
var layers = elem.parentNode.getElementsByTagName('iframe');
while(layers.length >0){
layers[0].parentNode.removeChild(layers[0]);
}
}
}
window.onload = function(){
magnifier.init({
cont : document.getElementById('magnifier'),
img : document.getElementById('magnifierImg'),
mag : document.getElementById('mag'),
scale : 3
});
}
</script>
</head>
<body>
<div id="magnifier">
<img src="http://img015.photo.21cn.com/photos/album/20091022/o/801CBCFE6EDFF5C0F0893313EA1318D5.jpg" id="img" />
<div id="Browser"></div>
</div>
<div id="mag"><img id="magnifierImg" /></div>
<select style="position:absolute;top:200px;left:650px;width:100px;">
</select>
</body>
</html>
第五个：
算法生成弹性透明的图片放大效果，代码值得看一下哦，弹性和缓冲是一个意思，JS缓冲效果在网页中使用很频繁，使用缓冲技术可以制作出超多的精美特效来。
生成弹性透明的图片放大代码<html>
<head>
<title>JS弹性图片放大代码</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
cursor: crosshair;
}
#diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
}
.imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
}
.spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
}
.imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
}
#bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
},
CDiapo : function(o){
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false;
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa);
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency);
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
}
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
}
this.position = function (){
with (this) {
w_target = w_origin;
h_target = h_origin;
if(over){
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
x_target = x_origin;
y_target = y_origin;
}
if(click){
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
}
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
},
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
for(var i in diapo.O) diapo.O[i].position();
setTimeout("diapo.run();", 16);
},
images_load : function(){
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
},
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}
</script>
</head>
<body>
<div id="diapoContainer">
<img class="imgsrc" src="/jscss/demoimg/wall6.jpg">
<img class="imgsrc" src="/jscss/demoimg/wall7.jpg">
<img class="imgsrc" src="/jscss/demoimg/wall8.jpg">
<div id="bkgcaption"></div>
<div id="caption"></div>
</div>
<script type="text/javascript">
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</div>
</body>
</html>
<head>
<title>JS弹性图片放大代码</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
cursor: crosshair;
}
#diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
}
.imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
}
.spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
}
.imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
}
#bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
},
CDiapo : function(o){
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false;
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa);
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency);
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
}
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
}
this.position = function (){
with (this) {
w_target = w_origin;
h_target = h_origin;
if(over){
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
x_target = x_origin;
y_target = y_origin;
}
if(click){
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
}
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
},
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
for(var i in diapo.O) diapo.O[i].position();
setTimeout("diapo.run();", 16);
},
images_load : function(){
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
},
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}
</script>
</head>
<body>
<div id="diapoContainer">
<img class="imgsrc" src="/jscss/demoimg/wall6.jpg">
<img class="imgsrc" src="/jscss/demoimg/wall7.jpg">
<img class="imgsrc" src="/jscss/demoimg/wall8.jpg">
<div id="bkgcaption"></div>
<div id="caption"></div>
</div>
<script type="text/javascript">
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</div>
</body>
</html>
第六个：
网站大幅JS焦点图切换<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>NBA大幅焦点图切换</TITLE>
<style type="text/css">
#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(http://kuanghong.com/han/images/fours_bj.gif) repeat-x 0 bottom;}
#f_img_roll{float:left;width:350px; height:300px; position:relative}
#f_img_roll img{position:absolute; left:0; top:0}
#f_img_s{float:right; position:relative; width:80px; height:300px;}
#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div{top:3px}
#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(http://kuanghong.com/han/images/mask.gif) no-repeat;}
#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type="text/javascript">
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="http://kuanghong.com/han/images/img_1.jpg";
imgs_m[1]="http://kuanghong.com/han/images/img_2.jpg";
imgs_m[2]="http://kuanghong.com/han/images/img_3.jpg";
imgs_m[3]="http://kuanghong.com/han/images/img_4.jpg";
imgs_m[4]="http://kuanghong.com/han/images/img_5.jpg";
imgs_m[5]="http://kuanghong.com/han/images/img_6.jpg";
imgs_s[0]="http://kuanghong.com/han/images/img_1_0.jpg";
imgs_s[1]="http://kuanghong.com/han/images/img_2_0.jpg";
imgs_s[2]="http://kuanghong.com/han/images/img_3_0.jpg";
imgs_s[3]="http://kuanghong.com/han/images/img_4_0.jpg";
imgs_s[4]="http://kuanghong.com/han/images/img_5_0.jpg";
imgs_s[5]="http://kuanghong.com/han/images/img_6_0.jpg";
imgs_title[0]="第一张";
imgs_title[1]="第二张";
imgs_title[2]="第三张";
imgs_title[3]="第四张";
imgs_title[4]="第五张";
imgs_title[5]="第六张";
//显示小图
function imgs_s_dis(){
var imgs=document.getElementById("imgs");
var fr=document.createDocumentFragment();
for(var i=0;i<imgs_s.length;i++){
var li=document.createElement("li");
li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}
//图片切换
function img_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}
//图片切换效果
var ie=/MSIE/.test(navigator.userAgent);//浏览器
var img_title=null;//title
var f_img_roll=null;//大图
var cur_img=null;//当前大图
var mb_img=null;//目标图
var f_mask=null;//MASK层
var lis=[];//所有LI
var cur_li=null;//当前MASK所在LI
var mb_li=null;//目标LI位置
var tt=null;//时间函数
var m=0;//默认top
var r=0;//当前lis下标
//自动播放
function img_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
if(tt)clearTimeout(tt);
tt=setInterval("f_mask_mov()",25);
cur_li=lis[r];
img_scroll(r);
}
//加载动作
function _focus(){
imgs_s_dis();//初始小图显示
cur_li=lis[0];//初始当前mask所在元素
f_img_roll=document.getElementById("f_img_roll");
cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
img_title=document.getElementById("f_title");
f_mask=document.getElementById("f_mask");//得到MASK引用
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.border="1px solid #cc0000";
}
lis[i].onmouseout=function(){
this.style.border="1px solid #0066cc";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
if(tt)clearTimeout(tt);//停止正在的播放
clearTimeout(ttt);//停止自动播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",40);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//开始自动播放
}
//滑动效果
function f_mask_mov(){
if(m>mb_li){
m-=(m-mb_li)*0.2;
if((m-1)<mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
f_mask_top=mb_li;//更新M值
m=mb_li;
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}else{
m+=(mb_li+5-m)*0.2;
if(m>mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
m=f_mask_top=f_mask.offsetTop;//更新M值
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}
}
window.onload=_focus;
</script>
</HEAD>
<BODY>
<div id="fours_m">
<div id="f_img_roll"><img src="http://kuanghong.com/han/images/img_1.jpg" /></div>
<div id="f_img_s">
<div id="f_mask"></div>
<ul id="imgs"></ul>
</div>
<div id="f_title">第一张</div>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE>NBA大幅焦点图切换</TITLE>
<style type="text/css">
#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(http://kuanghong.com/han/images/fours_bj.gif) repeat-x 0 bottom;}
#f_img_roll{float:left;width:350px; height:300px; position:relative}
#f_img_roll img{position:absolute; left:0; top:0}
#f_img_s{float:right; position:relative; width:80px; height:300px;}
#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div{top:3px}
#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(http://kuanghong.com/han/images/mask.gif) no-repeat;}
#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type="text/javascript">
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="http://kuanghong.com/han/images/img_1.jpg";
imgs_m[1]="http://kuanghong.com/han/images/img_2.jpg";
imgs_m[2]="http://kuanghong.com/han/images/img_3.jpg";
imgs_m[3]="http://kuanghong.com/han/images/img_4.jpg";
imgs_m[4]="http://kuanghong.com/han/images/img_5.jpg";
imgs_m[5]="http://kuanghong.com/han/images/img_6.jpg";
imgs_s[0]="http://kuanghong.com/han/images/img_1_0.jpg";
imgs_s[1]="http://kuanghong.com/han/images/img_2_0.jpg";
imgs_s[2]="http://kuanghong.com/han/images/img_3_0.jpg";
imgs_s[3]="http://kuanghong.com/han/images/img_4_0.jpg";
imgs_s[4]="http://kuanghong.com/han/images/img_5_0.jpg";
imgs_s[5]="http://kuanghong.com/han/images/img_6_0.jpg";
imgs_title[0]="第一张";
imgs_title[1]="第二张";
imgs_title[2]="第三张";
imgs_title[3]="第四张";
imgs_title[4]="第五张";
imgs_title[5]="第六张";
//显示小图
function imgs_s_dis(){
var imgs=document.getElementById("imgs");
var fr=document.createDocumentFragment();
for(var i=0;i<imgs_s.length;i++){
var li=document.createElement("li");
li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}
//图片切换
function img_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}
//图片切换效果
var ie=/MSIE/.test(navigator.userAgent);//浏览器
var img_title=null;//title
var f_img_roll=null;//大图
var cur_img=null;//当前大图
var mb_img=null;//目标图
var f_mask=null;//MASK层
var lis=[];//所有LI
var cur_li=null;//当前MASK所在LI
var mb_li=null;//目标LI位置
var tt=null;//时间函数
var m=0;//默认top
var r=0;//当前lis下标
//自动播放
function img_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
if(tt)clearTimeout(tt);
tt=setInterval("f_mask_mov()",25);
cur_li=lis[r];
img_scroll(r);
}
//加载动作
function _focus(){
imgs_s_dis();//初始小图显示
cur_li=lis[0];//初始当前mask所在元素
f_img_roll=document.getElementById("f_img_roll");
cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
img_title=document.getElementById("f_title");
f_mask=document.getElementById("f_mask");//得到MASK引用
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.style.border="1px solid #cc0000";
}
lis[i].onmouseout=function(){
this.style.border="1px solid #0066cc";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
if(tt)clearTimeout(tt);//停止正在的播放
clearTimeout(ttt);//停止自动播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",40);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//开始自动播放
}
//滑动效果
function f_mask_mov(){
if(m>mb_li){
m-=(m-mb_li)*0.2;
if((m-1)<mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
f_mask_top=mb_li;//更新M值
m=mb_li;
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}else{
m+=(mb_li+5-m)*0.2;
if(m>mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
m=f_mask_top=f_mask.offsetTop;//更新M值
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}
}
window.onload=_focus;
</script>
</HEAD>
<BODY>
<div id="fours_m">
<div id="f_img_roll"><img src="http://kuanghong.com/han/images/img_1.jpg" /></div>
<div id="f_img_s">
<div id="f_mask"></div>
<ul id="imgs"></ul>
</div>
<div id="f_title">第一张</div>
</div>
</BODY>
</HTML>
先这么多吧。
来源：https://www.cnblogs.com/blueSkys/archive/2010/03/15/1686527.html