几张图片在网页中漂浮显示，全屏显示后随机切换放大显示效果，根据自己的需求来自定义图片和数量。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META content="MSHTML 6.00.2900.2144" name=GENERATOR>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<TITLE>漂浮图片全屏拉伸切换显示特效_武鸣人</TITLE>
</HEAD>
<BODY>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<STYLE type=text/css>
BODY{PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 100%; zIndex: -2}
IMG{BORDER-RIGHT: #222 1px solid; BORDER-TOP: #222 1px solid; LEFT: -10000px; BORDER-LEFT: #222 1px solid; CURSOR: pointer; BORDER-BOTTOM: #222 1px solid; POSITION: absolute}
</STYLE>
<SCRIPT type=text/javascript>
window.onerror = new Function("return true");
screen.bufferDepth = 16;
object = new Array();
////////////////////
am = 40;
TEMPO = 5000;
///////////////////
W0 = 0;
H0 = 0;
nx = 0;
ny = 0;
K = 0;
Kb = -1;
function zoomIn(N){
object[N].img.cursor="crosshair";
object[N].zoomIn();
object[N].img.zIndex=0;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function zoomOut(N){
object[N].img.cursor="pointer";
object[N].zoomOut();
}
function zyva(N){
if(N!=Kb){
clearTimeout(object[Kb].TO);
zoomIn(N);
object[Kb].BR=true;
zoomOut(Kb);
Kb=N;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function nextImg(){
if(Kb>=0)zoomOut(Kb);
Kb=K%nbI;
zoomIn(Kb);
K++;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function CObj(N,img){
this.A = Math.round(Math.random()*10)+1;
this.B = Math.round(Math.random()*10)+3;
this.k = 0.1 * N;
this.L = 0;
this.T = 0;
this.W = W0;
this.H = H0;
this.xb = 0;
this.img = img.style;
this.img.zIndex = 1;
this.obj = "object["+N+"].";
this.BR = false;
this.TO = 0;
this.mainloop = function () {
with (this) {
k += 0.001;
L = ((nx-W) * .5) + (Math.cos(k * A) * .5) * (nx - W);
T = ((ny-H) * .5) + (Math.cos(k * B) * .5) * (ny - H);
with(img){
width = Math.floor(W);
height = Math.floor(H);
top = Math.floor(T);
left = Math.floor(L);
}
setTimeout(obj+"mainloop();", 32);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
this.zoomIn = function() {
with (this) {
W += (nx - W) * (.1 * am/(.01+(nx - W)));
H += (ny - H) * (.1 * am/(.01+(nx - W)));
if(!BR){
if(W >= nx) TO=setTimeout("nextImg();", TEMPO);
else setTimeout(obj+"zoomIn();", 32);
}
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
this.zoomOut = function() {
with (this) {
W -= W / (am * .5);
H -= H / (am * .5);
if(W >= 2) setTimeout(obj+"zoomOut();", 32);
else {
BR=false;
img.zIndex=1;
zoomStart();
}
}
}
this.zoomStart = function() {
with (this) {
W++;
H += H0 / W0;
if(W<W0 || H<H0)setTimeout(obj+"zoomStart();", 32);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
this.mainloop();
}
function resize() {
nx = document.body.clientWidth;
ny = document.body.clientHeight;
W0 = nx / nbI;
H0 = ny / nbI;
if(H0<W0*.56)H0=W0*.56;
}
onresize = resize;
onload = function() {
img = document.getElementById("www_wuming_ren").getElementsByTagName("img");
nbI = img.length;
resize();
for(i=0;i<nbI;i++) object[i] = new CObj(i,img[i]);
nextImg();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</SCRIPT>
<DIV id=www_wuming_ren style="Z-INDEX: 1">
<IMG onclick=zyva(0) src="/img/20240317_www_wuming_ren_5.jpg">
<IMG onclick=zyva(1) src="/img/20240317_www_wuming_ren_6.jpg">
<IMG onclick=zyva(2) src="/img/20240317_www_wuming_ren_7.jpg">
<IMG onclick=zyva(3) src="/img/20240317_www_wuming_ren_8.jpg">
<IMG onclick=zyva(4) src="/img/20240317_www_wuming_ren_9.jpg">
<IMG onclick=zyva(5) src="/img/20240317_www_wuming_ren_7.jpg">
<IMG onclick=zyva(6) src="/img/20240317_www_wuming_ren_8.jpg">
</DIV>
<SPAN id=wuming_ren style="LEFT: 50%; POSITION: absolute; TOP: 50%">
<SPAN style="FONT-SIZE: 10px; LEFT: -50px; COLOR: #ffffff; FONT-FAMILY: arial; POSITION: absolute; TOP: -18px">Loading...</SPAN>
<SPAN style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -50px; WIDTH: 100px; POSITION: absolute; TOP: -5px; HEIGHT: 10px"><SPAN id=LB1 style="FONT-SIZE: 1px; BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 10px"></SPAN></SPAN>
</SPAN>
<SCRIPT>m00=document.getElementById("www_wuming_ren").getElementsByTagName("img");m01=m00.length;function loading_wuming_ren(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);if(m02==m01)setTimeout("document.getElementById('wuming_ren').style.display='none'",128); else setTimeout("loading_wuming_ren()", 64);};loading_wuming_ren();</SCRIPT>
</BODY>
</HTML>本文来自武鸣人网站，转载请注明出处