`
tanglong8848
  • 浏览: 71218 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

图片展示

 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>5</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=imagetoolbar content=no>
<STYLE type=text/css>HTML {
OVERFLOW: hidden
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 815px; CURSOR: crosshair; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 230px
}
#box {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #111; VISIBILITY: hidden; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; POSITION: absolute
}
#screen {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #000; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 815px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; HEIGHT: 230px
}
#box IMG {
BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; POSITION: absolute
}
#box SPAN {
FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 200px; COLOR: #fff; FONT-FAMILY: verdana; POSITION: absolute
}
#box A {
FONT-SIZE: 12px; COLOR: #ff8000; TEXT-DECORATION: none
}
#box A:hover {
BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none
}
#box A:visited {
COLOR: #ff8000; TEXT-DECORATION: none
}
#box A:hover:visited {
BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none
}
#lnk {
VISIBILITY: hidden
}
</STYLE>

<SCRIPT type=text/javascript>

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 = 250;
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*180)+((nI-1)*180));
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 = 250;
}
box.style.visibility = "visible";
run();
}
</SCRIPT>

<META content="MSHTML 6.00.6000.20815" name=GENERATOR></HEAD>
<BODY>
<DIV id=screen>
<DIV id=box><IMG title="" alt="" src="1.GIF"> <IMG title="" alt=""
src="1.GIF"> <IMG title="" alt="" src="2.GIF">
<IMG title="" alt="" src="1.jpg"> <IMG title="" alt=""
src="2.jpg"> <IMG title="" alt="" src="1.GIF"> <SPAN
id=txt style="FONT-SIZE: 14px"></SPAN><SPAN id=tit></SPAN><SPAN id=lnk><A
href=""></A><A
href=""></A><A
href=""></A><A
href=""></A><A
href=""></A><A
href=""></A></SPAN></DIV></DIV><!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 --><SPAN
id=LB0 style="LEFT: 50%; POSITION: absolute; TOP: 50%"><SPAN
style="FONT-SIZE: 10px; LEFT: -120px; COLOR: #ffffff; FONT-FAMILY: arial; POSITION: absolute; TOP: 8px">Loading...</SPAN>
<SPAN
style="FONT-SIZE: 1px; BACKGROUND: #333; LEFT: -120px; WIDTH: 100px; POSITION: absolute; TOP: 20px; 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("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</SCRIPT>
<!-- end of images_loading_bar code --></BODY></HTML>

分享到:
评论

相关推荐

    家居产品图片展示相册代码

    家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品图片展示相册代码家居产品...

    Flash图片展示,Flash图片展示Flash图片展示,Flash图片展示

    在IT行业中,Flash图片展示是一种常见的网页动态效果技术,它曾经是互联网上广泛使用的多媒体工具,用于创建交互式动画和视觉吸引人的图像展示。本文将深入探讨Flash在图片展示中的应用,以及相关技术要点。 首先,...

    jquery图片展示 jquery图片展示

    本文将深入探讨如何利用jQuery实现图片展示的功能,为网页增添动态效果和用户互动性。 首先,jQuery图片展示的核心在于利用DOM操作和动画效果。jQuery提供了方便的函数来选择和操作HTML元素,例如`$("#imgId")`可以...

    小程序源码 图片展示(带后台)

    小程序源码 图片展示(带后台)小程序源码 图片展示(带后台)小程序源码 图片展示(带后台)小程序源码 图片展示(带后台)小程序源码 图片展示(带后台)小程序源码 图片展示(带后台)小程序源码 图片展示(带...

    作品展示&图片展示HTML源码-照片展示动态网页模板.zip

    这份专为作品展示和图片展示设计的HTML源码,将成为你打造个性化在线作品集的得力工具! 在这个视觉为王的时代,一个高质量的在线作品集无疑是你简历中的一大亮点。这份源码提供了多种精美的布局和动画效果,让你的...

    图片展示程序ASP源码

    【标题】"图片展示程序ASP源码"是一个用于创建在线图片展示平台的Web应用程序源代码。这个源码采用ASP(Active Server Pages)编程语言编写,ASP是微软开发的一种服务器端脚本环境,允许开发者在服务器上动态生成...

    asp+js图片展示源码

    总结一下,这个"asp+js图片展示源码"是一个结合了服务器端处理(ASP)和客户端交互(JavaScript)的图片展示程序。它利用ASP处理图片数据,通过JavaScript实现客户端的动态展示,包括图片的加载、切换动画等,而...

    微信小程序-图片展示源码

    在这个“微信小程序-图片展示源码”中,我们主要关注的是如何在微信小程序环境中创建一个图片展示的功能模块。这个资源包括了源码、教程文档以及一些必要的指导材料,帮助开发者从零开始搭建一个能够稳定运行的图片...

    幻灯图片展示 类似flash幻灯图片展示

    在IT行业中,网页设计与开发是一项至关重要的技能,而幻灯图片展示是其中常见的功能之一。这个主题,"幻灯图片展示 类似flash幻灯图片展示",涉及到的是使用JavaScript来实现动态、交互式的图片轮播效果,以替代曾经...

    超炫的js图片展示效果

    在网页设计中,JavaScript是一种强大的客户端脚本语言,它能够为用户提供丰富的交互体验,其中图片展示效果就是一种常见的应用场景。本文将深入探讨如何利用JavaScript实现超炫的图片展示效果,以及涉及的相关技术与...

    超炫Flash图片展示代码

    "超炫Flash图片展示代码"是指使用ActionScript(Flash的编程语言)编写的代码,能够以独特、动态的方式展示图片,通常带有3D视觉效果,为用户带来类似于苹果产品展示的高端体验。 该代码的核心功能可能包括以下几个...

    Bootstrap响应式图片展示模板

    Bootstrap响应式图片展示模板是一种基于HTML5、CSS3和JavaScript技术设计的网页模板,它专为创建具有出色视觉效果和自适应布局的图片展示页面而设计。Bootstrap是Twitter推出的一个开源工具包,它极大地简化了网页...

    flash图片展示效果

    在IT行业中,Flash是一种曾经广泛应用于网页设计和多媒体内容创建的平台,特别是在制作动态图片展示效果方面具有显著优势。标题“flash图片展示效果”指的便是利用Adobe Flash技术来实现的图片展示动画或交互效果。...

    Jquery 图片展示效果

    在网页设计中,jQuery 是一个非常流行的 JavaScript 库,它极大地简化了JavaScript的使用,使得开发者可以更加便捷地实现各种动态效果,包括图片展示。在本文中,我们将深入探讨如何利用jQuery来创建丰富的图片展示...

    仿百度图片展示js效果

    在本文中,我们将深入探讨如何实现“仿百度图片展示js效果”,这是一种常见的前端技术,用于创建类似百度图片搜索那样的交互式图片展示体验。百度图片展示以其流畅的滚动、清晰的预览和高效的加载机制赢得了用户的...

    图片展示_微信小程序模板js代码前台前端H5页面源码.rar

    标题中的“图片展示_微信小程序模板js代码前台前端H5页面源码.rar”表明这是一个用于创建图片展示功能的微信小程序模板,其中包含了JavaScript(js)代码以及前端H5页面的源码。这个压缩包文件“weapp-51Meizhitu-...

    12款超酷图片展示JS代码(特效实例)

    在网页设计中,图片展示是不可或缺的一部分,尤其在吸引用户注意力和传递信息方面起着关键作用。"12款超酷图片展示JS代码(特效实例)" 提供了一系列使用JavaScript实现的创新图片展示效果,旨在提升网站的用户体验和...

    非常漂亮的图片展示

    标题中的“非常漂亮的图片展示”指的是一个用于呈现图像的网页应用或组件,它设计得美观且吸引用户。这种类型的图片展示通常包含优雅的过渡效果、布局优化以及良好的用户体验设计,以提升网站的整体视觉吸引力。 ...

    flash 3D图片展示

    本资源"Flash 3D图片展示"是基于Flash 9.0版本的一个项目,它展示了如何利用Flash的技术实现3D图片的动态展示,包括源代码,这对于学习和理解Flash 3D编程具有很高的价值。 Flash 3D技术是Flash平台上的一个特色,...

    超炫精美的js图片展示效果代码

    本资源“超炫精美的js图片展示效果代码”显然是一份用于实现独特图片展示效果的JS代码库,能够为网页带来引人入胜的视觉体验。下面我们将深入探讨相关的JavaScript知识点以及如何利用这些代码实现图片展示效果。 ...

Global site tag (gtag.js) - Google Analytics