JS图片切换代码合集-白红宇

JS图片切换代码合集

阅读量：6280 次

发布时间：2019-06-22

本文共 75160 字，大约阅读时间需要 250 分钟。

JS图片代码切换总汇

（1）

*{margin:0;padding:0;}

body {

margin:0;

padding:0;

font-size:12px;

font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;

}

img {

border:none;

}

ul,li {

margin:0;

padding:0;

list-style:none;

}

.slider {

position:relative;

width:748px;

height:80px;

}

.slider .pic {}

.slider .pic img {

width:748px;

height:80px;

}

.slider .num {

z-index:2;

position:absolute;

right:2px;

bottom:2px;

width:95px;

height:16px;

}

.slider .num li {

float:left;

display:inline;

width:16px;

height:16px;

line-height:16px;

margin-left:3px;

text-align:center;

color:#595959;

cursor:pointer;

}

.slider .num li.current {

background-color:#ffffff;

font-weight:bold;

color:#ff4e00;

}

.slider .bg {

z-index:1;

position:absolute;

right:2px;

bottom:2px;

width:95px;

height:16px;

}

.slider .bg li {

float:left;

display:inline;

width:16px;

height:16px;

line-height:16px;

margin-left:3px;

background-color:#fff;

filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;

text-align:center;

color:#595959;

font-size:0;

}

</style>

</ul>

</ul>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

var listItem=document.getElementById("homePushShow");

var tList=document.getElementById("homePushName").childNodes;

var controlItem=[];

for(var i=0;i<tList.length;i++){

if(tList[i].nodeName.toLowerCase()=="li"){

controlItem.push(tList[i]);

}

var picCount=controlItem.length;

var cid=0;

var tid=Math.floor(Math.random()*picCount);

window.cTop=0

window.gTop=0;

window.speed=0;

window.controlAction="";

window.timeCount=0;

setInterval(function(){

if(cid!=tid){

gTop=tid*80;

speed=(gTop-cTop)/10;

cid=tid;

for(var i=0;i<picCount;i++){

controlItem[i].className=((i==cid)?"current":"");

}

if(window.cTop!=window.gTop){

window.cTop+= parseInt(speed);

listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";

}

document.getElementById("homePushBg").style.display="block";

document.getElementById("homePushName").style.display="block";

},20);

for(var i=0;i<picCount;i++){

controlItem[i].οnmοuseοver=function(){

var goId=parseInt(this.innerHTML)-1;

clearTimeout(window.controlAction);

window.controlAction=setTimeout(function(){

tid=goId;

timeCount=0;

},300);

}

controlItem[i].οnmοuseοut=function(){

clearTimeout(window.controlAction);

}

setInterval(function(){

timeCount+=1

if(timeCount>=5){

window.controlAction=setTimeout(function(){

tid=tid+1;

if(tid>=picCount){tid=0;}

},20);

timeCount=0;

}

},1000);

</script>

（2）兼容多种浏览器js图片切换

*{margin:0;padding:0;}

#ifocus2 { width:748px; height:80px;}

#www_xuehai_net { display:inline; position:relative; float:left; width:748px; height:80px; overflow:hidden; }

#ifocus_piclist2 { position:absolute; }

#ifocus_piclist2 ul{margin:0px;padding:0px;list-style-type:none;}

#ifocus_piclist2 li { width:748px; height:80px; overflow:hidden;margin:0px;padding:0px; }

#ifocus_piclist2 img { width:748px; height:80px; border:0px;}

#ifocus_btn2 { position:absolute; right:4px; bottom:2px; color:#a25897; }

#ifocus_btn2 .xuehai_net li {

float:left;

display:inline;

width:16px;

height:16px;

line-height:16px;

margin-left:3px;

text-align:center;

color:#595959;

cursor:pointer;

}

#ifocus_btn2 .xuehai_net li.current {

background-color:#ffffff;

font-weight:bold;

color:#ff4e00;

}

#ifocus_btn2 .bg {

z-index:1;

position:absolute;

right:2px;

bottom:2px;

width:95px;

height:16px;

}

#ifocus_btn2 .bg li {

float:left;

display:inline;

width:14px;

height:16px;

line-height:16px;

margin-left:3px;

background-color:#fff;

filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;

text-align:center;

color:#595959;

font-size:0;

}

</style>

//1

/**

* 根据id获取对象

function $(id) {

return document.getElementById(id);

}

/**

* 添加页面加载完毕后要执行的方法

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

/**

* 添加页面加载完毕后要执行的方法

function addOnLoadEvent(invoker, func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = function() {

func.apply(invoker);

}

} else {

window.onload = function(){

oldonload();

func.apply(invoker);

}

/**

* 扩展Array, 为原型增加一个判断是否包含传入的值的方法

Array.prototype.contains = function(_val) {

for (var i = 0; i < this.length; i++) {

if (this[i] == _val) {

return true;

}

return false;

}

/**

* 增加一个扩展window.setTimeout的函数

var cusSetTimeout = function(invoker, fRef, mDelay) {

if (typeof fRef == "function") {

var argu = Array.prototype.slice.call(arguments, 3);

var f = (function() {

fRef.apply(invoker, argu);

});

return setTimeout(f, mDelay); // window.setTimeout原来有返回值，这里重写也应该返回

}

return setTimeout(fRef, mDelay); // 相当于setTimeout("test()", timeout);

}

/**

* 增加一个扩展window.setInterval的函数

var cusSetInterval = function(invoker, fRef, mDelay) {

if (typeof fRef == "function") {

var argu = Array.prototype.slice.call(arguments, 3);

var f = (function() {

fRef.apply(invoker, argu);

});

return setInterval(f, mDelay); // window.setInterval原来有返回值，这里重写也应该返回

}

return setInterval(fRef, mDelay); // 相当于setInterval("test()", timeout);

}

//2

/**

* 焦点图类.

* 创建实例时, 需同时将实例名称传进去

function FocusPicture(fname, ifocus, ifocus_piclist, ifocus_btn, normal, current, imageHeight, maxCurrentNum, autoChangeInterval) {

this.instanceName = fname; // 类实例名称

this.ifocus = ifocus ? ifocus : "ifocus"; // 焦点图外围div的ID

this.ifocusPicList = ifocus_piclist ? ifocus_piclist : "ifocus_piclist"; // 焦点图图片显示区域外围div的ID

this.ifocusBtn = ifocus_btn ? ifocus_btn : "ifocus_btn"; // 焦点图感应按钮外转div的ID

this.normalClassName = normal ? normal : "normal"; // 按钮正常时的class样式

this.currentClassName = current ? current : "current"; // 按钮选中时的class样式

this.imageHeight = imageHeight ? imageHeight : 80; // 图片高度, 用于图片滑动, 即滑动一张图片的高度

this.maxCurrentNum = maxCurrentNum ? maxCurrentNum : 4; // 最大当前选中的图片号, 从0开始, 3表示第四张

this.autoChangeInterval = autoChangeInterval ? autoChangeInterval : 4000; // 图片轮换的时间间隔, 单位为毫秒

this.isAutoChange = true; // 设置是否自动更换图片, 为true表示自动更换, 为false表示停止

this.slideSpeed = 20; // 图片滑行速度, 值越大, 速度越慢

this.invokeInterval = 5; // 循环调用moveElement函数的时间间隔, 单位为毫秒

this.setIsAutoChange = function(flag) {

this.isAutoChange = flag;

}

/**

* 设置图片滑动方法, 每调用一次, 调整一点, 循环调用调整到指定位置

* @param elementID 图片div的ID

* @param final_x 调整后的x坐标

* @param final_y 调整后的y坐标

this.moveElement = function(elementID, final_x, final_y) {

if (!document.getElementById)

return false;

if (!document.getElementById(elementID))

return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos) / this.slideSpeed);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x) / this.slideSpeed);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos) / this.slideSpeed);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y) / this.slideSpeed);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

elem.movement = cusSetTimeout(this, this.moveElement, this.invokeInterval, elementID, final_x, final_y);

}

/**

* 设置按钮正常样式

this.classNormal = function(iFocusBtnID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); // 按钮

for(var i=0; i < iFocusBtns.length; i++) { // 设置按钮和描述正常样式

iFocusBtns[i].className = this.normalClassName;

}

/**

* 设置按钮选中样式

this.classCurrent = function(iFocusBtnID, n){

if (n >= this.maxCurrentNum)

{

n = this.maxCurrentNum ;

}

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

// 设置按钮和描述当前选中的样式

iFocusBtns[n].className = this.currentClassName;

}

/**

* 页面加载完毕后执行方法.

this.iFocusChange = function() {

//alert(this.ifocus + " " + $(this.ifocus) + " " + (this == window));

if (!$(this.ifocus))

return false;

// 当前调用的实例对象

var instance = eval(this.instanceName);

$(this.ifocus).instance = instance;

// 鼠标经过时图片区域时停止轮转

$(this.ifocus).onmouseover = function() {

this.instance.setIsAutoChange(false);

};

// 鼠标离开时图片区域时继续轮转

$(this.ifocus).onmouseout = function() {

this.instance.setIsAutoChange(true);

};

var iFocusBtns = $(this.ifocusBtn).getElementsByTagName('li');

var listLength = iFocusBtns.length;

this.maxCurrentNum = listLength -1

iFocusBtns[0].instance = instance;

iFocusBtns[0].ifocusPicList = this.ifocusPicList;

iFocusBtns[0].ifocusBtn = this.ifocusBtn;

iFocusBtns[0].onmouseover = function() {

this.instance.moveElement(this.ifocusPicList, 0, 0, 5);

this.instance.classNormal(this.ifocusBtn);

this.instance.classCurrent(this.ifocusBtn, 0);

}

for (var i = 1; i < listLength; i++) {

iFocusBtns[i].instance = instance;

iFocusBtns[i].ifocusPicList = this.ifocusPicList;

iFocusBtns[i].ifocusBtn = this.ifocusBtn;

iFocusBtns[i].value = i;

iFocusBtns[i].yAxis = -i * this.imageHeight;

iFocusBtns[i].onmouseover = function() {

this.instance.moveElement(this.ifocusPicList, 0, this.yAxis);

this.instance.classNormal(this.ifocusBtn);

this.instance.classCurrent(this.ifocusBtn, this.value); // 直接把i设到this.value的位置就不行了, 调用时i会随for循环的改变而改变

}

/**

* 定时调用该方法, 可以使图片自动更换

this.autoiFocus = function() {

if(!$(this.ifocus)) return false;

// 停止轮转

if (!this.isAutoChange) return false;

// 获取所有按钮

var focusBtnList = $(this.ifocusBtn).getElementsByTagName('li');

var listLength = focusBtnList.length;

// 找到当前显示的按钮索引号

for (var i = 0; i < listLength; i++) {

if (focusBtnList[i].className == this.currentClassName) {

var currentNum = i;

break;

}

// 如果当前在最后一个图片, 则显示第一张

if (currentNum == this.maxCurrentNum ){

this.moveElement(this.ifocusPicList, 0, 0);

this.classNormal(this.ifocusBtn);

this.classCurrent(this.ifocusBtn, 0);

} else { // 直接显示下一张

this.moveElement(this.ifocusPicList, 0, -(currentNum + 1) * this.imageHeight);

this.classNormal(this.ifocusBtn);

this.classCurrent(this.ifocusBtn, currentNum + 1);

}

/**

* 启动图片自动轮转的定时器

this.startAutoChange = function() {

cusSetInterval(this, this.autoiFocus, this.autoChangeInterval);

// setInterval(this.autoiFocus, this.autoChangeInterval); //这样调用的话, 好像this的调用者会变成window

}

var focusPictureC = new FocusPicture("focusPictureC", "ifocus2", "ifocus_piclist2", "ifocus_btn2", "normal", "current", "80", "4", "5000");

focusPictureC.startAutoChange();

addOnLoadEvent(focusPictureC, focusPictureC.iFocusChange);

</script>

<ul>

</ul>

</div>

</ul>

</div>

（3）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码五。</title>

html {

overflow: hidden;

}

body {

margin: 0px;

padding: 0px;

background: #000;

position: absolute;

width: 100%;

height: 100%;

cursor: crosshair;

}

#box {

position: absolute;

background: #111;

border: gray solid 1px;

visibility: hidden;

}

#screen {

position: absolute;

left: 0px;

width: 100%;

top: 10%;

height: 80%;

background: #000;

border: gray solid 1px;

}

#box img {

position: absolute;

border: gray solid 1px;

cursor: pointer;

}

#box span {

position: absolute;

color: #ccc;

font-family: verdana;

font-size: 12px;

width: 200px;

}

#box a {

text-decoration: none;

color:#ff8000;

}

#box a:hover {

text-decoration: none;

background:#ff8000;

color:#ffffff;

}

#box a:visited {

text-decoration: none;

color:#ff8000;

}

#box a:visited:hover {

text-decoration: none;

background:#ff8000;

color:#ffffff;

}

#lnk {

visibility: hidden;

}

</style>

document.onselectstart = new Function("return false");

O = new Array();

box = 0;

img = 0;

txt = 0;

tit = 0;

W = 0;

H = 0;

nI = 0;

sel = 0;

si = 0;

ZOOM = 0;

rImg = 0;

speed = .06; // animation speed

delay = .5; // 1 = no delay

function dText(){

txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";

txt.innerHTML = O[sel].tx;

tit.innerHTML = O[sel].ti;

}

function CObj(n, s, x, tx, ti){

this.n = n;

this.dim = s;

this.tx = tx;

this.ti = ti;

this.is = img[n];

this.vz = 0;

this.sx = 0;

this.x0 = x;

this.x1 = 0;

this.zo = 0;

this.over = function() {

with(this){

if(n!=sel){

O[sel].dim = 100;

O[n].dim = ZOOM * 100;

sel = n;

l = 0;

for(k=0; k<nI; k++){

O[k].x0 = l;

l += O[k].dim;

}

txt.innerHTML = tit.innerHTML = "";

setTimeout("dText()", 32);

}

this.anim = function () {

with(this){

vz = speed*(vz+(x1-sx)*delay);

x1 -= vz;

sx = (n==0)?0:O[n-1].x0+O[n-1].dim;

zo -= (zo-dim)*speed;

l = (x1*si)+6*(n+1);

w = zo*si;

is.style.left = Math.round(l)+'px';

is.style.top = Math.round((H-w*rImg)*.5)+'px';

is.style.width = Math.round(w)+'px';

is.style.height = Math.round(w*rImg)+'px';

if(sel == n){

if(sel<nI*.5) {

tit.style.left = txt.style.left = Math.round(l+w+6)+'px';

} else {

tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';

}

txt.style.top = Math.round(-(w*rImg)*.25)+'px';

tit.style.top = Math.round((w*rImg)*.33)+'px';

}

function run(){

for(j in O)O[j].anim();

setTimeout("run()", 16);

}

function doResize(){

tit.style.width = Math.round(nx*.25)+'px';

txt.style.width = Math.round(nx*.25)+'px';

tit.style.fontSize = (nx/30)+'px';

txt.style.fontSize = (nx/70)+'px';

with(box.style){

width = Math.round(W)+'px';

height = Math.round(H)+'px';

left = Math.round(nx/2-W/2)+'px';

top = Math.round(ny/2-H/2)+'px';

}

function resize(){

nx = scr.offsetWidth;

ny = scr.offsetHeight;

W = nx*90/100;

si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));

H = (100*si*rImg)+14;

doResize();

}

onresize = resize;

onload = function(){

scr = document.getElementById("screen");

box = document.getElementById("box");

tit = document.getElementById("tit");

txt = document.getElementById("txt");

img = box.getElementsByTagName("img");

Lnk = document.getElementById("lnk").getElementsByTagName("a");

nI = img.length;

ZOOM = nI;

rImg = img[0].height/img[0].width;

resize();

s = ZOOM * 100;

x = 0;

tit.innerHTML = img[0].title;

txt.innerHTML = img[0].alt;

for(i=0; i<nI; i++) {

var t = img[i].alt;

if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';

O[i] = new CObj(i, s, x, t, img[i].title);

img[i].alt = "";

img[i].title = "";

img[i].onmousedown = new Function("return false;");

img[i].onmouseover = new Function('O['+i+'].over();');

if(Lnk[i].href!=""){

/* ==== hyperlink ==== */

img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');

}

x += s;

s = 100;

}

box.style.visibility = "visible";

run();

}

</script>

</head>

<body>

</a><a></a><a></a><a></a><a></a></span></div>

</div>

Loading...</span>

</span></span></span>

</body>

</html>

（4）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码三，</title>

html {

overflow: hidden;

}

body {

margin: 0px;

padding: 0px;

background: #000;

position: absolute;

width: 100%;

height: 100%;

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>

var xm;

var ym;

/* ==== onmousemove event ==== */

document.onmousemove = function(e){

if(window.event) e=window.event;

xm = (e.x || e.clientX);

ym = (e.y || e.clientY);

}

/* ==== window resize ==== */

function resize() {

if(diapo)diapo.resize();

}

onresize = resize;

/* ==== opacity ==== */

setOpacity = function(o, alpha){

if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;

}

/* ===== encapsulate script ==== */

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,

/// script parameters

attraction : 2,

acceleration : .9,

dampening : .1,

zoomOver : 2,

zoomClick : 6,

transparency : .8,

font_size: 18,

/* ==== diapo resize ==== */

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;

}

/* ==== create diapo ==== */

CDiapo : function(o){

/* ==== init variables ==== */

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;

/* ==== create shadow ==== */

this.spa = document.createElement("span");

this.spa.className = "spaDC";

diapo.DC.appendChild(this.spa);

/* ==== create thumbnail image ==== */

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);

/* ==== mouse events ==== */

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;

}

/* ==== rearrange thumbnails based on "imgsrc" images position ==== */

this.resize = function (){

with (this) {

x_origin = o.offsetLeft;

y_origin = o.offsetTop;

w_origin = o.offsetWidth;

h_origin = o.offsetHeight;

}

/* ==== animation function ==== */

this.position = function (){

with (this) {

/* ==== set target position ==== */

w_target = w_origin;

h_target = h_origin;

if(over){

/* ==== mouse 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 {

/* ==== mouse out ==== */

x_target = x_origin;

y_target = y_origin;

}

if(click){

/* ==== clicked ==== */

w_target = w_origin * diapo.zoomClick;

h_target = h_origin * diapo.zoomClick;

}

/* ==== magic spring equations ==== */

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));

/* ==== html animation ==== */

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);

}

/* ==== main loop ==== */

run : function(){

diapo.xm = xm - diapo.nx;

diapo.ym = ym - diapo.ny;

/* ==== caption anim ==== */

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";

/* ==== images anim ==== */

for(var i in diapo.O) diapo.O[i].position();

/* ==== loop ==== */

setTimeout("diapo.run();", 16);

/* ==== load images ==== */

images_load : function(){

// ===== loop until all images are loaded =====

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 script ==== */

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>

</div>

/* ==== start script ==== */

function dom_onload() {

if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);

}

dom_onload();

</script>

</body>

</html>

（5）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码一</title>

html {

overflow: hidden;

}

body {

margin: 0px;

padding: 0px;

background: #000;

width: 100%;

height: 100%;

}

#imageFlow {

position: absolute;

width: 100%;

height: 80%;

left: 0%;

top: 10%;

background: #000;

}

#imageFlow .diapo {

position: absolute;

left: -1000px;

cursor: pointer;

-ms-interpolation-mode: nearest-neighbor;

}

#imageFlow .link {

border: dotted #fff 1px;

margin-left: -1px;

margin-bottom: -1px;

}

#imageFlow .bank {

visibility: hidden;

}

#imageFlow .top {

position: absolute;

width: 100%;

height: 40%;

background: #181818;

}

#imageFlow .text {

position: absolute;

left: 0px;

width: 100%;

bottom: 16%;

text-align: center;

color: #FFF;

font-family: verdana, arial, Helvetica, sans-serif;

z-index: 1000;

}

#imageFlow .title {

font-size: 0.9em;

font-weight: bold;

}

#imageFlow .legend {

font-size: 0.8em;

}

#imageFlow .scrollbar {

position: absolute;

left: 10%;

bottom: 10%;

width: 80%;

height: 16px;

z-index: 1000;

}

#imageFlow .track {

position: absolute;

left: 1%;

width: 98%;

height: 16px;

filter: alpha(opacity=30);

opacity: 0.3;

}

#imageFlow .arrow-left {

position: absolute;

}

#imageFlow .arrow-right {

position: absolute;

right: 0px;

}

#imageFlow .bar {

position: absolute;

height: 16px;

left: 25px;

}

</style>

var imf = function () {

var lf = 0;

var instances = [];

function getElementsByClass (object, tag, className) {

var o = object.getElementsByTagName(tag);

for ( var i = 0, n = o.length, ret = []; i < n; i++)

if (o[i].className == className) ret.push(o[i]);

if (ret.length == 1) ret = ret[0];

return ret;

}

function addEvent (o, e, f) {

if (window.addEventListener) o.addEventListener(e, f, false);

else if (window.attachEvent) r = o.attachEvent('on' + e, f);

}

function createReflexion (cont, img) {

var flx = false;

if (document.createElement("canvas").getContext) {

flx = document.createElement("canvas");

flx.width = img.width;

flx.height = img.height;

var context = flx.getContext("2d");

context.translate(0, img.height);

context.scale(1, -1);

context.drawImage(img, 0, 0, img.width, img.height);

context.globalCompositeOperation = "destination-out";

var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);

gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

gradient.addColorStop(0, "rgba(255, 255, 255, 1)");

context.fillStyle = gradient;

context.fillRect(0, 0, img.width, img.height * 2);

} else {

/* ---- DXImageTransform ---- */

flx = document.createElement('img');

flx.src = img.src;

flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' + 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +

(img.height * .25) + ')';

}

/* ---- insert Reflexion ---- */

flx.style.position = 'absolute';

flx.style.left = '-1000px';

cont.appendChild(flx);

return flx;

}

/* ==== ImageFlow Constructor ==== */

function ImageFlow(oCont, size, zoom, border) {

this.diapos = [];

this.scr = false;

this.size = size;

this.zoom = zoom;

this.bdw = border;

this.oCont = oCont;

this.oc = document.getElementById(oCont);

this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');

this.text = getElementsByClass(this.oc, 'div', 'text');

this.title = getElementsByClass(this.text, 'div', 'title');

this.legend = getElementsByClass(this.text, 'div', 'legend');

this.bar = getElementsByClass(this.oc, 'img', 'bar');

this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');

this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');

this.bw = this.bar.width;

this.alw = this.arL.width - 5;

this.arw = this.arR.width - 5;

this.bar.parent = this.oc.parent = this;

this.arL.parent = this.arR.parent = this;

this.view = this.back = -1;

this.resize();

this.oc.onselectstart = function () { return false; }

/* ---- create images ---- */

var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');

this.NF = img.length;

for (var i = 0, o; o = img[i]; i++) {

this.diapos[i] = new Diapo(this, i,

o.rel,

o.title || '- ' + i + ' -',

o.innerHTML || o.rel,

o.href || '',

o.target || '_self'

);

}

/* ==== add mouse wheel events ==== */

if (window.addEventListener)

this.oc.addEventListener('DOMMouseScroll', function(e) {

this.parent.scroll(-e.detail);

}, false);

else this.oc.onmousewheel = function () {

this.parent.scroll(event.wheelDelta);

}

/* ==== scrollbar drag N drop ==== */

this.bar.onmousedown = function (e) {

if (!e) e = window.event;

var scl = e.screenX - this.offsetLeft;

var self = this.parent;

/* ---- move bar ---- */

this.parent.oc.onmousemove = function (e) {

if (!e) e = window.event;

self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';

self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);

if (self.view != self.back) self.calc();

return false;

}

/* ---- release scrollbar ---- */

this.parent.oc.onmouseup = function (e) {

self.oc.onmousemove = null;

return false;

}

return false;

}

/* ==== right arrow ==== */

this.arR.onclick = this.arR.ondblclick = function () {

if (this.parent.view < this.parent.NF - 1)

this.parent.calc(1);

}

/* ==== Left arrow ==== */

this.arL.onclick = this.arL.ondblclick = function () {

if (this.parent.view > 0)

this.parent.calc(-1);

}

/* ==== ImageFlow prototype ==== */

ImageFlow.prototype = {

/* ==== targets ==== */

calc : function (inc) {

if (inc) this.view += inc;

var tw = 0;

var lw = 0;

var o = this.diapos[this.view];

if (o && o.loaded) {

/* ---- reset ---- */

var ob = this.diapos[this.back];

if (ob && ob != o) {

ob.img.className = 'diapo';

ob.z1 = 1;

}

/* ---- update legend ---- */

this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);

this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);

/* ---- update hyperlink ---- */

if (o.url) {

o.img.className = 'diapo link';

window.status = 'hyperlink: ' + o.url;

} else {

o.img.className = 'diapo';

window.status = '';

}

/* ---- calculate target sizes & positions ---- */

o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;

var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);

var x = x0 + o.w1 + this.bdw;

for (var i = this.view + 1, o; o = this.diapos[i]; i++) {

if (o.loaded) {

o.x1 = x;

o.w1 = (this.ht / o.r) * this.size;

x += o.w1 + this.bdw;

tw += o.w1 + this.bdw;

}

x = x0 - this.bdw;

for (var i = this.view - 1, o; o = this.diapos[i]; i--) {

if (o.loaded) {

o.w1 = (this.ht / o.r) * this.size;

o.x1 = x - o.w1;

x -= o.w1 + this.bdw;

tw += o.w1 + this.bdw;

lw += o.w1 + this.bdw;

}

/* ---- move scrollbar ---- */

if (!this.scr && tw) {

var r = (this.ws - this.alw - this.arw - this.bw) / tw;

this.bar.style.left = Math.round(this.alw + lw * r) + 'px';

}

/* ---- save preview view ---- */

this.back = this.view;

}

/* ==== mousewheel scrolling ==== */

scroll : function (sc) {

if (sc < 0) {

if (this.view < this.NF - 1) this.calc(1);

} else {

if (this.view > 0) this.calc(-1);

}

/* ==== resize ==== */

resize : function () {

this.wh = this.oc.clientWidth;

this.ht = this.oc.clientHeight;

this.ws = this.scrollbar.offsetWidth;

this.calc();

this.run(true);

/* ==== move all images ==== */

run : function (res) {

var i = this.NF;

while (i--) this.diapos[i].move(res);

}

/* ==== Diapo Constructor ==== */

Diapo = function (parent, N, src, title, text, url, target) {

this.parent = parent;

this.loaded = false;

this.title = title;

this.text = text;

this.url = url;

this.target = target;

this.N = N;

this.img = document.createElement('img');

this.img.src = src;

this.img.parent = this;

this.img.className = 'diapo';

this.x0 = this.parent.oc.clientWidth;

this.x1 = this.x0;

this.w0 = 0;

this.w1 = 0;

this.z1 = 1;

this.img.parent = this;

this.img.onclick = function() { this.parent.click(); }

this.parent.oc.appendChild(this.img);

/* ---- display external link ---- */

if (url) {

this.img.onmouseover = function () { this.className = 'diapo link'; }

this.img.onmouseout = function () { this.className = 'diapo'; }

}

/* ==== Diapo prototype ==== */

Diapo.prototype = {

/* ==== HTML rendering ==== */

move : function (res) {

if (this.loaded) {

var sx = this.x1 - this.x0;

var sw = this.w1 - this.w0;

if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {

/* ---- paint only when moving ---- */

this.x0 += sx * .1;

this.w0 += sw * .1;

if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {

/* ---- paint only visible images ---- */

this.visible = true;

var o = this.img.style;

var h = this.w0 * this.r;

/* ---- diapo ---- */

o.left = Math.round(this.x0) + 'px';

o.bottom = Math.floor(this.parent.ht * .25) + 'px';

o.width = Math.round(this.w0) + 'px';

o.height = Math.round(h) + 'px';

/* ---- reflexion ---- */

if (this.flx) {

var o = this.flx.style;

o.left = Math.round(this.x0) + 'px';

o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';

o.width = Math.round(this.w0) + 'px';

o.height = Math.round(h) + 'px';

}

} else {

/* ---- disable invisible images ---- */

if (this.visible) {

this.visible = false;

this.img.style.width = '0px';

if (this.flx) this.flx.style.width = '0px';

}

} else {

/* ==== image onload ==== */

if (this.img.complete && this.img.width) {

/* ---- get size image ---- */

this.iw = this.img.width;

this.ih = this.img.height;

this.r = this.ih / this.iw;

this.loaded = true;

/* ---- create reflexion ---- */

this.flx = createReflexion(this.parent.oc, this.img);

if (this.parent.view < 0) this.parent.view = this.N;

this.parent.calc();

}

/* ==== diapo onclick ==== */

click : function () {

if (this.parent.view == this.N) {

/* ---- click on zoomed diapo ---- */

if (this.url) {

/* ---- open hyperlink ---- */

window.open(this.url, this.target);

} else {

/* ---- zoom in/out ---- */

this.z1 = this.z1 == 1 ? this.parent.zoom : 1;

this.parent.calc();

}

} else {

/* ---- select diapo ---- */

this.parent.view = this.N;

this.parent.calc();

}

return false;

}

/* ==== public methods ==== */

return {

/* ==== initialize script ==== */

create : function (div, size, zoom, border) {

/* ---- instanciate imageFlow ---- */

var load = function () {

var loaded = false;

var i = instances.length;

while (i--) if (instances[i].oCont == div) loaded = true;

if (!loaded) {

/* ---- push new imageFlow instance ---- */

instances.push(

new ImageFlow(div, size, zoom, border)

);

/* ---- init script (once) ---- */

if (!imf.initialized) {

imf.initialized = true;

/* ---- window resize event ---- */

addEvent(window, 'resize', function () {

var i = instances.length;

while (i--) instances[i].resize();

});

/* ---- stop drag N drop ---- */

addEvent(document.getElementById(div), 'mouseout', function (e) {

if (!e) e = window.event;

var tg = e.relatedTarget || e.toElement;

if (tg && tg.tagName == 'HTML') {

var i = instances.length;

while (i--) instances[i].oc.onmousemove = null;

}

return false;

});

/* ---- set interval loop ---- */

setInterval(function () {

var i = instances.length;

while (i--) instances[i].run();

}, 16);

}

/* ---- window onload event ---- */

addEvent(window, 'load', function () { load(); });

}

}();

/* ==== create imageFlow ==== */

// div ID , size, zoom, border

imf.create("imageFlow", 0.15, 1.5, 10);

</script>

</head>

<body>

</div>

<a rel="/img/2010_xuehai_net_1.jpg" title="学海网一号图片" href="">学海网网，打造国内最帅的网页特效站。</a>

<a rel="/img/2010_xuehai_net_2.jpg" title="学海网二号图片" href="">专注于网页特效几广告代码，供站长和js爱好者参考。</a>

<a rel="/img/2010_xuehai_net_3.jpg" title="学海网三号图片" href="">我们的域名是>

<a rel="/img/2010_xuehai_net_4.jpg" title="学海网四号图片" href="">欢迎您的光临</a>

<a rel="/img/2010_xuehai_net_5.jpg" title="学海网五号图片" href="">觉得不错就收藏本站吧</a>

<a rel="/img/2010_xuehai_net_6.jpg" title="学海网六号图片" href="">我们追求的是质量，不是数量</a>

<a rel="/img/2010_xuehai_net_7.jpg" title="学海网七号图片" href="">学海网，有你更精彩。</a>

<a rel="/img/2010_xuehai_net_8.jpg" title="学海网八号图片" href="">您的支持，是我们的动力</a>

<a rel="/img/2010_xuehai_net_9.jpg" title="学海网九号图片" href="">十年打造极品站</a>

<a rel="/img/2010_xuehai_net_10.jpg" title="学海网十号图片" href="">学海网，xuehai，简单好记的域名，.net也精彩。</a>

<a rel="/img/2010_xuehai_net_11.jpg" title="学海网十一号图片" href="">如果您喜欢，也可以把本站设为主页</a>

<a rel="/img/2010_xuehai_net_12.jpg" title="学海网十二号图片" href="">推荐给需要的朋友吧，或许他们正在苦苦寻找这些东西。</a>

<a rel="/img/2010_xuehai_net_13.jpg" title="学海网十三号图片" href="">欢迎下次再来，xuehai.net</a>

<a rel="/img/2010_xuehai_net_14.jpg" title="学海网十四号图片" href="">学海网，我们永不言败</a> </div>

Loading</div>

Please wait...</div>

</div>

</div>

</body>

</html>

（6）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>常用js图片切换广告代码，</title>

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:410px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:410px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url( yourself) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

</style>

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; i<iFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength>=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (listLength>=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (listLength>=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

setInterval('autoiFocus()',5000);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; i<listLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0&&listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1&&listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2&&listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1&&listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2&&listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

addLoadEvent(iFocusChange);

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li class="normal">专注于网页特效及广告代码。</li>

<li class="normal">找js特效，来这里就对啦，做最帅最酷的js特效网站。</li>

<li class="normal">站长，网页设计师，看了都会喜欢的网站，收藏起来吧。</li>

</ul>

</div>

<ul>

</ul>

</div>

</div>

</body>

</html>

（7）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码十</title>

body {

background: #222;

overflow: hidden;

left: 0;

top: 0;

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

#screen span {

position:absolute;

overflow:hidden;

border:#FFF solid 1px;

background:#FFF;

}

#screen img{

position:absolute;

left:-32px;

top:-32px;

cursor: pointer;

}

#caption, #title{

color: #FFF;

font-family: georgia, 'times new roman', times, veronica, serif;

font-size: 1em;

text-align: center;

}

#caption b {

font-size: 2em;

}

</style>

window.onerror = new Function("return true");

var obj = [];

var scr;

var spa;

var img;

var W;

var Wi;

var Hi;

var wi;

var hi;

var Sx;

var Sy;

var M;

var xm;

var ym;

var xb = 0;

var yb = 0;

var ob = - 1;

var cl = false;

/* needed in standard mode */

px = function(x)

{

return Math.round(x) + "px";

}

/* center image - do not resize for perf. reason */

img_center = function(o)

{

with(img[o])

{

style.left = px( - (width - Wi) / 2);

style.top = px( - (height - Hi) / 2);

}

var Nx = 4; //size grid x

var Ny = 4; //size grid y

var Tx = 3; // image width

var Ty = 3; // image height

var Mg = 40; // margin

var SP = 1; // speed

function Cobj(o, x, y)

{

this.o = o;

this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));

this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));

this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;

this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;

this.l = 0;

this.t = 0;

this.w = 0;

this.h = 0;

this.s = 0;

this.mv = false;

this.spa = spa[o].style;

this.img = img[o];

this.txt = img[o].alt;

img[o].alt = "";

/* zooming loop */

this.zoom = function()

{

with(this)

{

l += li * s;

t += ti * s;

w += wi * s;

h += hi * s;

if ((s > 0 && w < Wi) || (s < 0 && w > Sx))

{

/* force window.event */

window.focus();

/* loop */

setTimeout("obj[" + o + "].zoom()", 16);

}

else

{

/* finished */

mv = false;

/* set final position */

if (s > 0)

{

l = ix * M + ix * Sx;

t = iy * M + iy * Sy;

w = Wi;

h = Hi;

}

else

{

l = x * M + x * Sx;

t = y * M + y * Sy;

w = Sx;

h = Sy;

}

/* html animation */

with(spa)

{

left = px(l);

top = px(t);

width = px(w);

height = px(h);

zIndex = Math.round(w);

}

this.click = function()

{

with(this)

{

img_center(o);

/* zooming logic */

if ( ! mv || cl)

{

if (s > 0)

{

if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)

{

s = - 2;

mv = true;

zoom();

cap.innerHTML = txt;

}

else

{

if (cl || ob != o)

{

if (ob >= 0)

{

with(obj[ob])

{

s = - 2;

mv = true;

zoom();

}

ob = o;

s = 1;

xb = xm;

yb = ym;

mv = true;

zoom();

cap.innerHTML = txt;

}

/* hook up events */

img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");

img[o].onclick = new Function("cl=true;obj[" + o + "].click()");

img[o].onload = new Function("img_center(" + o + ")");

/* initial display */

this.zoom();

}

/* mouse */

document.onmousemove = function(e)

{

if ( ! e)

{

e = window.event;

}

xm = (e.x || e.clientX);

ym = (e.y || e.clientY);

}

/* init */

function load()

{

/* html elements */

scr = document.getElementById("screen");

spa = scr.getElementsByTagName("span");

img = scr.getElementsByTagName("img");

cap = document.getElementById("caption");

/* mouseover border */

document.getElementById("border").onmouseover = function()

{

cl = true;

if(ob >= 0 && obj[ob].s > 0) obj[ob].click();

ob = -1;

}

/* global variables */

W = parseInt(scr.style.width);

H = parseInt(scr.style.height);

M = W / Mg;

Sx = (W - (Nx - 1) * M) / Nx;

Sy = (H - (Ny - 1) * M) / Ny;

Wi = Tx * Sx + (Tx - 1) * M;

Hi = Ty * Sy + (Ty - 1) * M;

SP = M * Tx * SP;

wi = (Wi - Sx) / SP;

hi = (Hi - Sy) / SP;

/* create objects */

for (k = 0, i = 0; i < Nx; i ++)

{

for (j = 0; j < Ny; j ++)

{

obj[k] = new Cobj(k ++, i, j);

}

//-->

</script>

</head>

<body>

</div>

</div>

</div>

<b>carefully</b> weight the options</div>

</div>

// starter

load();

//-->

</script>

</body>

</html>

（8）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码七</title>

html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #111;

width: 100%;

height: 100%;

}

#center {

position: absolute;

left: 50%;

top: 50%;

}

#slider {

position: absolute;

width: 820px;

height: 333px;

left: -430px;

top: -186px;

overflow: hidden;

background: #000;

border: 20px solid #000;

}

#slider .slide {

position: absolute;

top: 0px;

height: 333px;

width: 500px;

background: #000;

overflow: hidden;

border-left: #000 solid 1px;

cursor: default;

}

#slider .title {

color: #F80;

font-weight: bold;

font-size: 1.2em;

margin-right: 1.5em;

text-decoration: none;

}

#slider .backgroundText {

position: absolute;

width: 100%;

height: 100%;

top: 100%;

background: #000;

filter: alpha(opacity=40);

opacity: 0.4;

}

#slider .text {

position: absolute;

top: 1%;

top: 100%;

color: #FFF;

font-family: verdana, arial, Helvetica, sans-serif;

font-size: 0.9em;

text-align: justify;

width: 470px;

left: 10px;

}

#slider .diapo {

position: absolute;

filter: alpha(opacity=100);

opacity: 1;

visibility: hidden;

}

</style>

/* ==== slider nameSpace ==== */

var slider = function() {

/* ==== private methods ==== */

function getElementsByClass(object, tag, className) {

var o = object.getElementsByTagName(tag);

for ( var i = 0, n = o.length, ret = []; i < n; i++) {

if (o[i].className == className) ret.push(o[i]);

}

if (ret.length == 1) ret = ret[0];

return ret;

}

function setOpacity (obj,o) {

if (obj.filters) obj.filters.alpha.opacity = Math.round(o);

else obj.style.opacity = o / 100;

}

/* ==== Slider Constructor ==== */

function Slider(oCont, speed, iW, iH, oP) {

this.slides = [];

this.over = false;

this.S = this.S0 = speed;

this.iW = iW;

this.iH = iH;

this.oP = oP;

this.oc = document.getElementById(oCont);

this.frm = getElementsByClass(this.oc, 'div', 'slide');

this.NF = this.frm.length;

this.resize();

for (var i = 0; i < this.NF; i++) {

this.slides[i] = new Slide(this, i);

}

this.oc.parent = this;

this.view = this.slides[0];

this.Z = this.mx;

/* ==== on mouse out event ==== */

this.oc.onmouseout = function () {

this.parent.mouseout();

return false;

}

Slider.prototype = {

/* ==== animation loop ==== */

run : function () {

this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;

this.view.calc();

var i = this.NF;

while (i--) this.slides[i].move();

/* ==== resize ==== */

resize : function () {

this.wh = this.oc.clientWidth;

this.ht = this.oc.clientHeight;

this.wr = this.wh * this.iW;

this.r = this.ht / this.wr;

this.mx = this.wh / this.NF;

this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);

/* ==== rest ==== */

mouseout : function () {

this.over = false;

setOpacity(this.view.img, this.oP);

}

/* ==== Slide Constructor ==== */

Slide = function (parent, N) {

this.parent = parent;

this.N = N;

this.x0 = this.x1 = N * parent.mx;

this.v = 0;

this.loaded = false;

this.cpt = 0;

this.start = new Date();

this.obj = parent.frm[N];

this.txt = getElementsByClass(this.obj, 'div', 'text');

this.img = getElementsByClass(this.obj, 'img', 'diapo');

this.bkg = document.createElement('div');

this.bkg.className = 'backgroundText';

this.obj.insertBefore(this.bkg, this.txt);

if (N == 0) this.obj.style.borderLeft = 'none';

this.obj.style.left = Math.floor(this.x0) + 'px';

setOpacity(this.img, parent.oP);

/* ==== mouse events ==== */

this.obj.parent = this;

this.obj.onmouseover = function() {

this.parent.over();

return false;

}

Slide.prototype = {

/* ==== target positions ==== */

calc : function() {

var that = this.parent;

// left slides

for (var i = 0; i <= this.N; i++) {

that.slides[i].x1 = i * that.Z;

}

// right slides

for (var i = this.N + 1; i < that.NF; i++) {

that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;

}

/* ==== HTML animation : move slides ==== */

move : function() {

var that = this.parent;

var s = (this.x1 - this.x0) / that.S;

/* ==== lateral slide ==== */

if (this.N && Math.abs(s) > .5) {

this.obj.style.left = Math.floor(this.x0 += s) + 'px';

}

/* ==== vertical text ==== */

var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;

if (Math.abs(v - this.v) > .5) {

this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';

this.v = v;

this.cpt++;

} else {

if (!this.pro) {

/* ==== adjust speed ==== */

this.pro = true;

var tps = new Date() - this.start;

if(this.cpt > 1) {

that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);

}

if (!this.loaded) {

if (this.img.complete) {

this.img.style.visibility = 'visible';

this.loaded = true;

}

/* ==== light ==== */

over : function () {

this.parent.resize();

this.parent.over = true;

setOpacity(this.parent.view.img, this.parent.oP);

this.parent.view = this;

this.start = new Date();

this.cpt = 0;

this.pro = false;

this.calc();

setOpacity(this.img, 100);

}

/* ==== public method - script initialization ==== */

return {

init : function() {

// create instances of sliders here

// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity

this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);

setInterval("slider.s1.run();", 16);

}

}();

</script>

</head>

<body>

<span class="title">学海网网，专注于网页特效及广告代码，供站长和js爱好者参考。</div>

</div>

<span class="title">xuehai.net，打造国内最帅的网页特效站。</div>

</div>

<span class="title">觉得不错就收藏本站吧。</div>

</div>

<span class="title">也可以推荐给你的朋友。</div>

</div>

<span class="title">xuehai.net</span>站长zz，js特效，.net也精彩

</div>

<span class="title">学海网</span>我们追求的不是数量，而是质量。 </div>

</div>

<span class="title">xuehai.net</span>感谢您的光临，有什么意见或建议欢迎留言。</div>

</div>

<span class="title">学海网</span>有你更精彩。</div>

</div>

<span class="title">xuehai.net</span>打造国内最帅的网页特效站。</div>

</div>

<a class="title" href="">呵呵</a>这个特效挺酷吧。学海网网，永不言败</div>

</div>

/* ==== start script ==== */

slider.init();

</script>

</body>

</html>

（9）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码六</title>

html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #111;

width: 100%;

height: 100%;

}

#screen {

position: absolute;

left: 10%;

top: 10%;

width: 80%;

height: 80%;

background: #000;

}

#screen img {

position: absolute;

cursor: pointer;

visibility: hidden;

width: 0px;

height: 0px;

}

#screen .tvover {

border: solid #876;

opacity: 1;

filter: alpha(opacity=100);

}

#screen .tvout {

border: solid #fff;

opacity: 0.7;

}

#bankImages {

display: none;

}

</style>

var Library = {};

Library.ease = function () {

this.target = 0;

this.position = 0;

this.move = function (target, speed)

{

this.position += (target - this.position) * speed;

}

var tv = {

/* ==== variables ==== */

O : [],

screen : {},

grid : {

size : 4, // 4x4 grid

borderSize : 6, // borders size

zoomed : false

angle : {

x : new Library.ease(),

y : new Library.ease()

camera : {

x : new Library.ease(),

y : new Library.ease(),

zoom : new Library.ease(),

focalLength : 750 // camera Focal Length

/* ==== init script ==== */

init : function ()

{

this.screen.obj = document.getElementById('screen');

var img = document.getElementById('bankImages').getElementsByTagName('img');

this.screen.obj.onselectstart = function () { return false; }

this.screen.obj.ondrag = function () { return false; }

/* ==== create images grid ==== */

var ni = 0;

var n = (tv.grid.size / 2) - .5;

for (var y = -n; y <= n; y++)

{

for (var x = -n; x <= n; x++)

{

/* ==== create HTML image element ==== */

var o = document.createElement('img');

var i = img[(ni++) % img.length];

o.className = 'tvout';

o.src = i.src;

tv.screen.obj.appendChild(o);

/* ==== 3D coordinates ==== */

o.point3D = {

x : x,

y : y,

z : new Library.ease()

};

/* ==== push object ==== */

o.point2D = {};

o.ratioImage = 1;

tv.O.push(o);

/* ==== on mouse over event ==== */

o.onmouseover = function ()

{

if (!tv.grid.zoomed)

{

if (tv.o)

{

/* ==== mouse out ==== */

tv.o.point3D.z.target = 0;

tv.o.className = 'tvout';

}

/* ==== mouse over ==== */

this.className = 'tvover';

this.point3D.z.target = -.5;

tv.o = this;

}

/* ==== on click event ==== */

o.onclick = function ()

{

if (!tv.grid.zoomed)

{

/* ==== zoom in ==== */

tv.camera.x.target = this.point3D.x;

tv.camera.y.target = this.point3D.y;

tv.camera.zoom.target = tv.screen.w * 1.25;

tv.grid.zoomed = this;

} else {

if (this == tv.grid.zoomed){

/* ==== zoom out ==== */

tv.camera.x.target = 0;

tv.camera.y.target = 0;

tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);

tv.grid.zoomed = false;

}

/* ==== 3D transform function ==== */

o.calc = function ()

{

/* ==== ease mouseover ==== */

this.point3D.z.move(this.point3D.z.target, .5);

/* ==== assign 3D coords ==== */

var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;

var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;

var z = this.point3D.z.position * tv.camera.zoom.position;

/* ==== perform rotations ==== */

var xy = tv.angle.cx * y - tv.angle.sx * z;

var xz = tv.angle.sx * y + tv.angle.cx * z;

var yz = tv.angle.cy * xz - tv.angle.sy * x;

var yx = tv.angle.sy * xz + tv.angle.cy * x;

/* ==== 2D transformation ==== */

this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);

this.point2D.x = yx * this.point2D.scale;

this.point2D.y = xy * this.point2D.scale;

this.point2D.w = Math.round(

Math.max(

this.point2D.scale * tv.camera.zoom.position * .8

)

);

/* ==== image size ratio ==== */

if (this.ratioImage > 1)

this.point2D.h = Math.round(this.point2D.w / this.ratioImage);

else

{

this.point2D.h = this.point2D.w;

this.point2D.w = Math.round(this.point2D.h * this.ratioImage);

}

/* ==== rendering ==== */

o.draw = function ()

{

if (this.complete)

{

/* ==== paranoid image load ==== */

if (!this.loaded)

{

if (!this.img)

{

/* ==== create internal image ==== */

this.img = new Image();

this.img.src = this.src;

}

if (this.img.complete)

{

/* ==== get width / height ratio ==== */

this.style.visibility = 'visible';

this.ratioImage = this.img.width / this.img.height;

this.loaded = true;

this.img = false;

}

/* ==== HTML rendering ==== */

this.style.left = Math.round(

this.point2D.x * this.point2D.scale +

tv.screen.w - this.point2D.w * .5

) + 'px';

this.style.top = Math.round(

this.point2D.y * this.point2D.scale +

tv.screen.h - this.point2D.h * .5

) + 'px';

this.style.width = this.point2D.w + 'px';

this.style.height = this.point2D.h + 'px';

this.style.borderWidth = Math.round(

Math.max(

this.point2D.w,

this.point2D.h

) * tv.grid.borderSize * .01

) + 'px';

this.style.zIndex = Math.floor(this.point2D.scale * 100);

}

/* ==== start script ==== */

tv.resize();

mouse.y = tv.screen.y + tv.screen.h;

mouse.x = tv.screen.x + tv.screen.w;

tv.run();

/* ==== resize window ==== */

resize : function ()

{

var o = tv.screen.obj;

tv.screen.w = o.offsetWidth / 2;

tv.screen.h = o.offsetHeight / 2;

tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);

for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)

{

tv.screen.x += o.offsetLeft;

tv.screen.y += o.offsetTop;

}

/* ==== main loop ==== */

run : function ()

{

/* ==== motion ease ==== */

tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);

tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);

tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);

tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);

tv.camera.zoom.move(tv.camera.zoom.target, .05);

/* ==== angles sin and cos ==== */

tv.angle.cx = Math.cos(tv.angle.x.position);

tv.angle.sx = Math.sin(tv.angle.x.position);

tv.angle.cy = Math.cos(tv.angle.y.position);

tv.angle.sy = Math.sin(tv.angle.y.position);

/* ==== loop through all images ==== */

for (var i = 0, o; o = tv.O[i]; i++)

{

o.calc();

o.draw();

}

/* ==== loop ==== */

setTimeout(tv.run, 32);

}

/* ==== global mouse position ==== */

var mouse = {

x : 0,

y : 0

}

document.onmousemove = function(e)

{

if (window.event) e = window.event;

mouse.x = e.clientX;

mouse.y = e.clientY;

return false;

}

</script>

</head>

<body>

</div>

/* ==== start script ==== */

onresize = tv.resize;

tv.init();

</script>

</body>

</html>

（10）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>精美图片展示效果代码三</title>

html {

overflow: hidden;

}

body {

margin: 0px;

padding: 0px;

background: #000;

position: absolute;

width: 100%;

height: 100%;

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>

var xm;

var ym;

/* ==== onmousemove event ==== */

document.onmousemove = function(e){

if(window.event) e=window.event;

xm = (e.x || e.clientX);

ym = (e.y || e.clientY);

}

/* ==== window resize ==== */

function resize() {

if(diapo)diapo.resize();

}

onresize = resize;

/* ==== opacity ==== */

setOpacity = function(o, alpha){

if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;

}

/* ===== encapsulate script ==== */

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,

/// script parameters

attraction : 2,

acceleration : .9,

dampening : .1,

zoomOver : 2,

zoomClick : 6,

transparency : .8,

font_size: 18,

/* ==== diapo resize ==== */

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;

}

/* ==== create diapo ==== */

CDiapo : function(o){

/* ==== init variables ==== */

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;

/* ==== create shadow ==== */

this.spa = document.createElement("span");

this.spa.className = "spaDC";

diapo.DC.appendChild(this.spa);

/* ==== create thumbnail image ==== */

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);

/* ==== mouse events ==== */

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;

}

/* ==== rearrange thumbnails based on "imgsrc" images position ==== */

this.resize = function (){

with (this) {

x_origin = o.offsetLeft;

y_origin = o.offsetTop;

w_origin = o.offsetWidth;

h_origin = o.offsetHeight;

}

/* ==== animation function ==== */

this.position = function (){

with (this) {

/* ==== set target position ==== */

w_target = w_origin;

h_target = h_origin;

if(over){

/* ==== mouse 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 {

/* ==== mouse out ==== */

x_target = x_origin;

y_target = y_origin;

}

if(click){

/* ==== clicked ==== */

w_target = w_origin * diapo.zoomClick;

h_target = h_origin * diapo.zoomClick;

}

/* ==== magic spring equations ==== */

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));

/* ==== html animation ==== */

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);

}

/* ==== main loop ==== */

run : function(){

diapo.xm = xm - diapo.nx;

diapo.ym = ym - diapo.ny;

/* ==== caption anim ==== */

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";

/* ==== images anim ==== */

for(var i in diapo.O) diapo.O[i].position();

/* ==== loop ==== */

setTimeout("diapo.run();", 16);

/* ==== load images ==== */

images_load : function(){

// ===== loop until all images are loaded =====

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 script ==== */

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>

</div>

/* ==== start script ==== */

function dom_onload() {

if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);

}

dom_onload();

</script>

</body>

</html>

转载于:https://www.cnblogs.com/alocne/archive/2012/03/11/2389721.html

你可能感兴趣的文章

使用Python脚本检验文件系统数据完整性

查看>>

使用MDT部署Windows Server 2003 R2

查看>>

Redhat as5安装Mysql5.0.28

查看>>

通过TMG发布ActiveSync

查看>>

Web服务器的配置与管理（4）配置访问权限和安全

查看>>

Linux系统安装VMware Tools

查看>>

asp.net 页面右下角弹出类似QQ或MSN的消息提示

爆牙齿的Web标准面试考题II（iPhone SMS/iChat UI的Web标准实现）

查看>>

XMOVE3.0手持终端——软件介绍(二):在2KB内存的单片机上实现的彩屏GUI控件库

查看>>

MVC系列——MVC源码学习：打造自己的MVC框架（三：自定义路由规则）

查看>>

找小于N 的所有质数

查看>>

Windows下的Jupyter Notebook 的介绍（写给新手）（图文详解）

查看>>

iOS开发-CocoaPods实战

查看>>

JS组件系列——Bootstrap 树控件使用经验分享

查看>>

HTML-color:rgb()-颜色渐进

查看>>

数据库实例: STOREBOOK > 表空间 > 编辑表空间: UNDOTBS1

查看>>

Mcad学习笔记之异步编程(AsyncCallback委托,IAsyncResult接口,BeginInvoke方法,EndInvoke方法的使用小总结)...

查看>>

Javascript防冒泡事件与Event对象

查看>>