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
  • 相关阅读:
    JS LeetCode 1423. 可获得的最大点数简单题解
    SpringBoot 学集 （第六章） Docker
    Linux 学记 （第三章）
    Linux 学记 （第二章）
    Linux 学记 （第一章）
    SpringBoot 学集 （第五章） Web开发续
    SpringBoot 学集 （第四章）Web开发
    SpringBoot 学集 （第三章） 日志框架
    SpringBoot 学集 （第二章） 配置文件
    SpringBoot 学集 （第一章）
  • 原文地址：https://www.cnblogs.com/geovindu/p/1548558.html
Copyright © 2011-2022 走看看