您现在的位置： 365建站网 > 365文章 > 浮动层图片鼠标指针移到自动放大

浮动层图片鼠标指针移到自动放大

文章来源：365jz.com     点击数：890    更新时间：2009-09-24 22:27   参与评论
html code:

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head>
 4<title>缔友计算机信息技术有限公司--浮动层图片鼠标指针移到自动放大</title>
 5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 6<meta http-equiv="imagetoolbar" content="no">
 7<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin　Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
 8<meta name="Robots" content="all index follow ">
 9<meta name="Author" content="涂聚文" />
10<link href="images/css.css" rel="stylesheet" type="text/css">
11<link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
12<link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />
13<link rel="Bookmark" href="http://www.dupcit.com/favicon.ico"> 
14<link rel="stylesheet" type="text/css" href="css/css.css"/>
15<script type="text/javascript" src="js/float.js">
16
17</script>
18
19</head>
20<body>
21<div id="screen">
22    <div id="box"">
23        <img src="http://www.dupcit.com/01.jpg" title="涂聚文" alt=""/>
24        <img src="http://www.dupcit.com/02.jpg" title=" 涂聚文"alt=""/>
25        <img src="http://www.dupcit.com/03.jpg" title="涂聚文" alt=""/>
26        <img src="http://www.dupcit.com/04.jpg" title="涂聚文" alt=""/>
27        <img src="http://www.dupcit.com/05.jpg" title="涂聚文" alt=""/>
28        <img src="http://www.dupcit.com/06.jpg" title="涂聚文" alt=""/>
29        <img src="http://www.dupcit.com/07.jpg" title="涂聚文" alt=""/>
30
31        <span id="txt"></span>
32        <span id="tit"></span>
33        <span id="lnk">
34            <a></a>
35            <a></a>
36            <a></a>
37            <a></a>
38            <a></a>
39            <a></a>
40            <a></a>        </span>    </div>
41</div>
42
43<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
44<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading</span>
45<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
46<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>
47<!-- end of images_loading_bar code -->
48<a href="index.aspx">
49<img src="images/geovindu.jpg" width="140" height="59" border="0"></a>
50</body>
51</html>

css code:

 1/*
 2  浮动层图片鼠标指针移到自动放大
 3  geovindu@163.com www.dupcit.com www.dusystem.com
 4  Geovin Du 涂聚文
 5  2009-08-18
 6*/
 7
 8html {
 9        overflow: hidden;
10    }
11    body {
12    margin: 0px;
13    padding: 0px;
14    position: absolute;
15    width: 100%;
16    height: 100%;
17    cursor: crosshair;
18    background-color: #FF0000;
19    }
20    #box {
21    position: absolute;
22    border: gray solid 1px;
23    visibility: hidden;
24    background-color: #FFFFFF;
25    }
26    #screen {
27    position: absolute;
28    left: 0px;
29    width: 100%;
30    top: 10%;
31    height: 80%;
32    border: gray solid 1px;
33    background-color: #FFFFFF;
34    }
35    #box img  {
36        position: absolute;
37        border: gray solid 1px;
38        cursor: pointer;
39    }
40    #box span {
41        position: absolute;
42        color: #ccc;
43        font-family: verdana;
44        font-size: 12px;
45        width: 200px;
46    }
47    #box a {
48        text-decoration: none;
49        color:#ff8000;
50    }
51    #box a:hover    {
52        text-decoration: none;
53        background:#ff8000;
54        color:#ffffff;
55    }
56    #box a:visited {
57        text-decoration: none;
58        color:#ff8000;
59    }
60    #box a:visited:hover {
61        text-decoration: none;
62        background:#ff8000;
63        color:#ffffff;
64    }
65    #lnk {
66        visibility: hidden;
67    }
68.font {
69    font-family: Arial, Helvetica, sans-serif;
70    font-size: 20px;
71    color: #FFFFFF;
72    font-weight: bold;
73}
74.STYLE3 {font-family: Arial, Helvetica, sans-serif; font-size: 25px; color: #FFFFFF; font-weight: bold; }

javacript code:
  1/*
  2  浮动层图片鼠标指针移到自动放大
  3  geovindu@163.com www.dupcit.com www.dusystem.com
  4  Geovin Du 涂聚文
  5  2009-08-18
  6*/
  7
  8document.onselectstart = new Function("return false");
  9O    = new Array();
 10box  = 0;
 11img  = 0;
 12txt  = 0;
 13tit  = 0;
 14W    = 0;
 15H    = 0;
 16nI   = 0;
 17sel  = 0;
 18si   = 0;
 19ZOOM = 0;
 20rImg = 0;
 21//////////////////
 22speed = .06; // animation speed
 23delay = .5; // 1 = no delay
 24//////////////////
 25
 26function dText(){
 27    txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";
 28    txt.innerHTML = O[sel].tx;
 29    tit.innerHTML = O[sel].ti;
 30}
 31
 32function CObj(n, s, x, tx, ti){
 33    this.n    = n;
 34    this.dim  = s;
 35    this.tx   = tx;
 36    this.ti   = ti;
 37    this.is   = img[n];
 38    this.vz   = 0;
 39    this.sx   = 0;
 40    this.x0   = x;
 41    this.x1   = 0;
 42    this.zo   = 0;
 43    this.over = function() {
 44        with(this){
 45            if(n!=sel){
 46                O[sel].dim = 100;
 47                O[n].dim = ZOOM * 100;
 48                sel = n;
 49                l = 0;
 50                for(k=0; k<nI; k++){
 51                    O[k].x0 = l;
 52                    l += O[k].dim;
 53                }
 54                txt.innerHTML = tit.innerHTML = "";
 55                setTimeout("dText()", 32);
 56            }
 57        }
 58    }
 59    this.anim = function () {
 60        with(this){
 61            vz  = speed*(vz+(x1-sx)*delay);
 62            x1 -= vz;
 63            sx  = (n==0)?0:O[n-1].x0+O[n-1].dim;
 64            zo -= (zo-dim)*speed;
 65            l   = (x1*si)+6*(n+1);
 66            w   = zo*si;
 67            is.style.left   = Math.round(l)+'px';
 68            is.style.top    = Math.round((H-w*rImg)*.5)+'px';
 69            is.style.width  = Math.round(w)+'px';
 70            is.style.height = Math.round(w*rImg)+'px';
 71            if(sel == n){
 72                if(sel<nI*.5) {
 73                    tit.style.left = txt.style.left = Math.round(l+w+6)+'px';
 74                } else {
 75                    tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';
 76                }
 77                txt.style.top = Math.round(-(w*rImg)*.25)+'px';
 78                tit.style.top = Math.round((w*rImg)*.33)+'px';
 79            }
 80        }
 81    }
 82}
 83
 84function run(){
 85    for(j in O)O[j].anim();
 86    setTimeout("run()", 16);
 87}
 88
 89function doResize(){
 90    tit.style.width = Math.round(nx*.25)+'px';
 91    txt.style.width = Math.round(nx*.25)+'px';
 92    tit.style.fontSize = (nx/30)+'px';
 93    txt.style.fontSize = (nx/70)+'px';
 94    with(box.style){
 95        width  = Math.round(W)+'px';
 96        height = Math.round(H)+'px';
 97        left   = Math.round(nx/2-W/2)+'px';
 98        top    = Math.round(ny/2-H/2)+'px';
 99    }
100}
101
102function resize(){
103    nx = scr.offsetWidth;
104    ny = scr.offsetHeight;
105    W  =  nx*90/100;
106    si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));
107    H  = (100*si*rImg)+14;
108    doResize();
109}
110onresize = resize;
111
112onload = function(){
113    scr = document.getElementById("screen");
114    box = document.getElementById("box");
115    tit = document.getElementById("tit");
116    txt = document.getElementById("txt");
117    img = box.getElementsByTagName("img");
118
119    Lnk = document.getElementById("lnk").getElementsByTagName("a");
120    nI  = img.length;
121    ZOOM = nI;
122    rImg = img[0].height/img[0].width;
123    resize();
124    s = ZOOM * 100;
125    x = 0;
126    tit.innerHTML = img[0].title;
127    txt.innerHTML = img[0].alt;
128    for(i=0; i<nI; i++) {
129        var t = img[i].alt;
130        if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';
131        O[i] = new CObj(i, s, x, t, img[i].title);
132        img[i].alt = "";
133        img[i].title = "";
134        img[i].onmousedown = new Function("return false;");
135        img[i].onmouseover = new Function('O['+i+'].over();');
136        if(Lnk[i].href!=""){
137            /* ==== hyperlink ==== */
138            img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');
139        }
140        x += s;
141        s = 100;
142    }
143    box.style.visibility = "visible";
144    run();
145}
146
147
Tag标签: JavaScript,ajax

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (890人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号