zoukankan      html  css  js  c++  java

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

    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;100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;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
  • 相关阅读:
    343. Integer Break
    338. Counting Bits
    322. Coin Change
    304. Range Sum Query 2D
    303. Range Sum Query
    221. Maximal Square
    213. House Robber II
    cf
    poj2478欧拉函数
    lightoj1138
  • 原文地址：https://www.cnblogs.com/geovindu/p/1548558.html
Copyright © 2011-2022 走看看