<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超绚精美图片展示效果代码|</title>
<style type="text/css">
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>
<script type="text/javascript">
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 id="diapoContainer">
<img class=
JavaScript特效集锦 （316个子文件） 
style.css 44KB css.css 38KB css.css 38KB css.css 38KB css.css 38KB css.css 38KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB main.css 5KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB code_detail.css 4KB
logo.gif 4KB logo9.gif 4KB logo9.gif 4KB logo9.gif 4KB logo9.gif 4KB logo9.gif 4KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB ser_button.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 2KB loading.gif 685B td_icon.gif 327B rss.gif 224B tg_icon.gif 217B [酷]图片矩阵中单个图片放大效果--Ajax中国.htm 31KB 超酷超绚精美图片展示效果代码 特效 网页特效 js特效 脚本特效代码.htm 20KB JavaScript 生成弹性透明的图片放大代码_源码爱好者.htm 18KB JavaScript真正的鼠标放上动画加载大图的代码_源码爱好者.htm 18KB JavaScript图片特效_源码爱好者.htm 18KB JavaScript封装的平滑图片滚动，绝不用jQuery_源码爱好者.htm 17KB 四屏焦点图片轮换效果代码 特效 网页特效 js特效 脚本特效代码.htm 17KB 带缩略图的图片轮换代码 特效 网页特效 js特效 脚本特效代码.htm 16KB 清爽简洁的图片交替导航效果_源码爱好者.htm 16KB 从两侧向中间拼合的JavaScript图片切换效果_源码爱好者.htm 16KB NBA网站大幅JS焦点图切换_源码爱好者.htm 16KB QQ网支持火狐的图片切换效果_源码爱好者.htm 16KB 前后轮翻的JS图片幻灯切换_源码爱好者.htm 15KB 经典相册效果特效 特效 网页特效 js特效 脚本特效代码.htm 15KB 图片围成环形滚动，有空间感_源码爱好者.htm 14KB 漂亮的网页相册特效 特效 网页特效 js特效 脚本特效代码.htm 14KB共 316 条
- 1
- 2
- 3
- 4
资源评论
zhanghuan20090416
- 粉丝: 5
- 资源: 8
