九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

<video id="w0zsn"><s id="w0zsn"><delect id="w0zsn"></delect></s></video>

<source id="w0zsn"></source>

<blockquote id="w0zsn"><th id="w0zsn"></th></blockquote>

打開(kāi)APP

未登錄

開(kāi)通VIP，暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服

超酷超絢精美圖片展示效果代碼(十)——網(wǎng)頁(yè)特效

userphoto

荷花小女子 >《網(wǎng)頁(yè)特效》

2011.03.21

超酷超絢精美圖片展示效果代碼(十)——網(wǎng)頁(yè)特效代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超酷超絢精美圖片展示效果代碼(十) - 網(wǎng)頁(yè)特效觀止-網(wǎng)頁(yè)特效代碼|JsCode.CN|</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
  background: #222;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#screen span {
  position:absolute;
  overflow:hidden;
  border:#FFF solid 1px;
  background:#FFF;
}
#screen img{
  position:absolute;
  left:-32px;
  top:-32px;
  cursor: pointer;
}
#caption, #title{
  color: #FFF;
  font-family: georgia, 'times new roman', times, veronica, serif;
  font-size: 1em;
  text-align: center;
}
#caption b {
  font-size: 2em;
}

</style>
<script type="text/javascript"><!--
window.onerror = new Function("return true");
var obj = [];
var scr;
var spa;
var img;
var W;
var Wi;
var Hi;
var wi;
var hi;
var Sx;
var Sy;
var M;
var xm;
var ym;
var xb = 0;
var yb = 0;
var ob = - 1;
var cl = false;

/* needed in standard mode */
px = function(x)
{
return Math.round(x) + "px";
}

/* center image - do not resize for perf. reason */
img_center = function(o)
{
with(img[o])
{
style.left = px( - (width - Wi) / 2);
style.top = px( - (height - Hi) / 2);
}
}

//////////////////////////////////////////////////////////
var Nx = 4; //size grid x
var Ny = 4; //size grid y
var Tx = 3; // image width
var Ty = 3; // image height
var Mg = 40; // margin
var SP = 1; // speed
//////////////////////////////////////////////////////////

function Cobj(o, x, y)
{
this.o = o;
this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));
this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));
this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;
this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;
this.l = 0;
this.t = 0;
this.w = 0;
this.h = 0;
this.s = 0;
this.mv = false;
this.spa = spa[o].style;
this.img = img[o];
this.txt = img[o].alt;
img[o].alt = "";

/* zooming loop */
this.zoom = function()
{
  with(this)
  {
   l += li * s;
   t += ti * s;
   w += wi * s;
   h += hi * s;
   if ((s > 0 && w < Wi) || (s < 0 && w > Sx))
   {
    /* force window.event */
    window.focus();
    /* loop */
    setTimeout("obj[" + o + "].zoom()", 16);
   }
   else
   {
    /* finished */
    mv = false;
    /* set final position */
    if (s > 0)
    {
     l = ix * M + ix * Sx;
     t = iy * M + iy * Sy;
     w = Wi;
     h = Hi;
    }
    else
    {
     l = x * M + x * Sx;
     t = y * M + y * Sy;
     w = Sx;
     h = Sy;
    }
   }
   /* html animation */
   with(spa)
   {
    left = px(l);
    top = px(t);
    width = px(w);
    height = px(h);
    zIndex = Math.round(w);
   }
  }
}

this.click = function()
{
  with(this)
  {
   img_center(o);
   /* zooming logic */
   if ( ! mv || cl)
   {
    if (s > 0)
    {
     if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)
     {
      s = - 2;
      mv = true;
      zoom();
      cap.innerHTML = txt;
     }
    }
    else
    {
     if (cl || ob != o)
     {
      if (ob >= 0)
      {
       with(obj[ob])
       {
        s = - 2;
        mv = true;
        zoom();
       }
      }
      ob = o;
      s = 1;
      xb = xm;
      yb = ym;
      mv = true;
      zoom();
      cap.innerHTML = txt;
     }
    }
   }
  }
}

/* hook up events */
img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");
img[o].onclick = new Function("cl=true;obj[" + o + "].click()");
img[o].onload = new Function("img_center(" + o + ")");

/* initial display */
this.zoom();
}

/* mouse */
document.onmousemove = function(e)
{
if ( ! e)
{
e = window.event;
}
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}

/* init */
function load()
{
/* html elements */
scr = document.getElementById("screen");
spa = scr.getElementsByTagName("span");
img = scr.getElementsByTagName("img");
cap = document.getElementById("caption");

/* mouseover border */
document.getElementById("border").onmouseover = function()
{
  cl = true;
  if(ob >= 0 && obj[ob].s > 0) obj[ob].click();
  ob = -1;
}

/* global variables */
W = parseInt(scr.style.width);
H = parseInt(scr.style.height);
M = W / Mg;
Sx = (W - (Nx - 1) * M) / Nx;
Sy = (H - (Ny - 1) * M) / Ny;
Wi = Tx * Sx + (Tx - 1) * M;
Hi = Ty * Sy + (Ty - 1) * M;
SP = M * Tx * SP;
wi = (Wi - Sx) / SP;
hi = (Hi - Sy) / SP;

/* create objects */
for (k = 0, i = 0; i < Nx; i ++)
{
  for (j = 0; j < Ny; j ++)
  {
   obj[k] = new Cobj(k ++, i, j);
  }
}
}
//-->
</script>
</head>

<div style="position: absolute; left: 50%; top: 50%;">
<div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;">
</div>
<div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
</div>
<div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
  <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
  <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -8px;" src="images/08081201002.jpg" alt=""></span>
  <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201003.jpg" alt=""></span>
  <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201004.jpg" alt=""></span>
  <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201005.jpg" alt=""></span>
  <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201006.jpg" alt=""></span>
  <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201008.jpg" alt=""></span>
  <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201009.jpg" alt=""></span>
  <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201010.jpg" alt=""></span>
  <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201011.jpg" alt=""></span>
  <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201012.jpg" alt=""></span>
  <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201001.jpg" alt=""></span>
  <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201013.jpg" alt=""></span>
  <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081201014.jpg" alt=""></span>
  <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081204wi21.jpg" alt=""></span>
  <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;">
  <img style="left: -11px; top: -9px;" src="images/08081204wi42.jpg" alt=""></span>
</div>
<div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;">
  <b>carefully</b> weight the options</div>
</div>
<script type="text/javascript">
</script>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類(lèi)似文章

猜你喜歡

類(lèi)似文章

原生JS實(shí)現(xiàn)的輪播圖功能詳解

各種特效字效果代瑪 [圖片]

未來(lái)的錢(qián)在哪聰明的投資者都在看這7大領(lǐng)域！

豪情￡蕙質(zhì)蘭心ゾ原創(chuàng)●主頁(yè)*俏佳人*

梅竹=蘭菊音畫(huà)《恭賀新春快樂(lè)》代碼學(xué)習(xí)

更多類(lèi)似文章 >>

生活服務(wù)

熱點(diǎn)新聞

聯(lián)系我們

分享收藏導(dǎo)長(zhǎng)圖關(guān)注下載文章

綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！

如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服

先別劃走！

送你5元優(yōu)惠券，購(gòu)買(mǎi)VIP限時(shí)立減！

5元

優(yōu)惠券

優(yōu)惠券還有10:00過(guò)期

×

<ul id="ko3n1"><meter id="ko3n1"></meter></ul>