不知道js能实现这样的效果不,哪位见过类似的效果?

就是把div里面的东西用innerHTML整个替换掉

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

看看下面的代码是不是你要的
你自己找几张图片文件，改一个那个调用zoom.init的语句中的图片地址就可以了
PS：CSDN不能贴附件吗？
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>ZOOM</title><script type="text/javascript">var zoom={
next:0,
n:0,
c:null,
i:null,
wh:null,
delta:10,
out:true,
init:function(container,images) {
this.n=0;
this.i=new Array();
this.wh=new Array();
this.c=document.getElementById(container);
if(this.c==null) {
alert(container+"is not exist.");
return;
}
for(var i=0;i<images.length;i++) {
this.i[i]=new Image();
this.i[i].src=images[i][0];
this.i[i].alt=images[i][1];
this.i[i].onload=function() {
zoom.c.appendChild(this);
i[zoom.n]=this;
//保存图片的长宽
zoom.wh[zoom.wh.length]=[this.offsetWidth,this.offsetHeight];
this.weight=0;
this.height=0;
zoom.n++;
if(zoom.n==1) {
//至少要加载完一张图片才开始
setTimeout(zoom.cycle,100);
}
};
}
},
//放大
zoomOut:function(no) {
var both=false;
var temp=zoom.i[no].weight+zoom.delta;
if(temp>zoom.wh[no][0]) {
zoom.i[no].weight=zoom.wh[no][0];
both=true;
}
else {
zoom.i[no].weight=temp;
}
temp=zoom.i[no].height+zoom.delta;
if(temp>zoom.wh[no][1]) {
zoom.i[no].height=zoom.wh[no][1];
}
else {
zoom.i[no].height=temp;
both=false;
}
return both;
},
//缩小
zoomIn:function(no) {
var both=false;
var temp=zoom.i[no].weight-zoom.delta;
if(temp<0) {
zoom.i[no].weight=0;
both=true;
}
else {
zoom.i[no].weight=temp;
}
temp=zoom.i[no].height-zoom.delta;
if(temp<0) {
zoom.i[no].height=0;
}
else {
zoom.i[no].height=temp;
both=false;
}
return both;
},
//100ms循环一次
cycle:function() {
var r;
if(zoom.out) {
r=zoom.zoomOut(zoom.next);
if(r) {
zoom.out=false;
}
}
else {
r=zoom.zoomIn(zoom.next);
if(r) {
//下一张图片
zoom.next=(zoom.next+1)%zoom.n;
zoom.out=true;
}
}
setTimeout(zoom.cycle,100);
}
};window.onload=function() {
zoom.init("screen",[["pic/pic1.bmp","pic1"],["pic/pic2.bmp","pic2"]]);
};
</script></head><body>
<div id="screen">
</div></body>
</html>
上面的代码发错了，下面的才是
已经在FF3和IE7下试过了<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>ZOOM</title><script type="text/javascript">var zoom={
next:0,
n:0,
c:null,
i:null,
wh:null,
delta:10,
out:true,
init:function(container,images) {
this.n=0;
this.i=new Array();
this.wh=new Array();
this.c=document.getElementById(container);
if(this.c==null) {
alert(container+"is not exist.");
return;
}
for(var i=0;i<images.length;i++) {
this.i[i]=new Image();
this.i[i].src=images[i][0];
this.i[i].alt=images[i][1];
this.i[i].onload=function() {
zoom.c.appendChild(this);
i[zoom.n]=this;
//保存图片的长宽
zoom.wh[zoom.wh.length]=[this.offsetWidth,this.offsetHeight];
this.width=0;
this.height=0;
zoom.n++;
if(zoom.n==1) {
//至少要加载完一张图片才开始
setTimeout(zoom.cycle,100);
}
};
}
},
//放大
zoomOut:function(no) {
var both=false;
var temp=zoom.i[no].width+zoom.delta;
if(temp>zoom.wh[no][0]) {
zoom.i[no].width=zoom.wh[no][0];
both=true;
}
else {
zoom.i[no].width=temp;
}
temp=zoom.i[no].height+zoom.delta;
if(temp>zoom.wh[no][1]) {
zoom.i[no].height=zoom.wh[no][1];
}
else {
zoom.i[no].height=temp;
both=false;
}
return both;
},
//缩小
zoomIn:function(no) {
var both=false;
var temp=zoom.i[no].width-zoom.delta;
if(temp<0) {
zoom.i[no].width=0;
both=true;
}
else {
zoom.i[no].width=temp;
}
temp=zoom.i[no].height-zoom.delta;
if(temp<0) {
zoom.i[no].height=0;
}
else {
zoom.i[no].height=temp;
both=false;
}
return both;
},
//100ms循环一次
cycle:function() {
var r;
if(zoom.out) {
r=zoom.zoomOut(zoom.next);
if(r) {
zoom.out=false;
}
}
else {
r=zoom.zoomIn(zoom.next);
if(r) {
//下一张图片
zoom.next=(zoom.next+1)%zoom.n;
zoom.out=true;
}
}
setTimeout(zoom.cycle,100);
}
};window.onload=function() {
zoom.init("screen",[["pic/pic1.bmp","pic1"],["pic/pic2.bmp","pic2"]]);
};
</script></head><body>
<div id="screen">
</div></body>
</html>