域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
图形特效
>> 正文
超炫的图片格子展示特效
作者:
天诚世纪
更新时间:2009-10-27 16:18:05
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超炫的图片格子展示特效-网页特效代码|tc-21.com|</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #222; position: absolute; width: 100%; height: 100%; } #screen { position:absolute; left: 0%; top: 0%; width: 100%; height: 100%; background: #000; overflow: hidden; } #pan { position: absolute; height: 150%; width: 150%; padding: 5%; background: #000000 url("images/08081208bumps2.gif"); } #screen .frame { position: relative; float: left; width: 29%; height: 27%; margin: 2%; background: #000; overflow: hidden; } #screen .slider { position: absolute; width: 100%; height: 100%; background: #222 url("images/08081208bumps3.gif"); z-index: 1000; } #pan img { position: absolute; visibility: hidden; } #pan .legend { position: absolute; bottom: 0px; font-size: 1em; color: #FFF; width: 2000px; font-family: arial; font-weight: bold; } </style> <script type="text/javascript"> var xm = 0; var ym = 0; sP = { cx : 0, cy : 0, N : 0, R : [], I : [], C : [], L : [], Id : 0, init : function () { /* ==== init script ==== */ this.scr = document.getElementById('screen'); this.pan = document.getElementById('pan'); this.div = this.pan.getElementsByTagName('div'); this.scr.onselectstart = function () { return false; } this.scr.ondrag = function () { return false; } /* ==== for each pane ==== */ for (var i = 0, o; o = this.div[i]; i++) { if (o.className == 'frame') { /* ==== create legend ==== */ o.l = document.createElement('div'); o.l.className = 'legend'; o.appendChild(o.l); /* ==== create flap ==== */ o.r = document.createElement('div'); o.r.className = 'slider'; o.appendChild(o.r); o.r.x = 0; o.r.l = o.l; o.r.p = 0; o.r.s = 2; o.r.m = false; o.img = o.r.img = o.getElementsByTagName('img')[0]; o.r.c = Math.random() * 100; o.r.o = o; sP.R[sP.N] = o.r; sP.I[sP.N] = o.img.src; sP.L[sP.N] = o.title; o.title = ""; sP.N++; /* ==== flap mouse over event ==== */ o.r.onmouseover = function () { if (!this.m && this.img.complete) { /* ==== switch image ==== */ if (sP.O != this && !this.n) { this.x = this.o.offsetWidth; this.l.innerHTML = sP.L[sP.Id]; this.img.src = sP.I[sP.Id]; this.resize(); this.n = true; if(++sP.Id >= sP.N) { sP.Id = 0; for (var i = 0, o; o = sP.R[i]; i++) o.n = false; } } /* ==== up++ ==== */ if (sP.O) { sP.O.s = 2; sP.C.push(sP.O); } this.m = true; sP.O = this; sP.Or = this; } } /* ==== resize image ==== */ o.r.resize = function () { var i = new Image(); i.src = this.img.src; this.img.style.width = (i.width < this.offsetWidth) ? Math.round(this.offsetWidth * 1.25) + 'px' : Math.round(i.width) + 'px'; this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px'; this.w = (this.img.offsetWidth - this.offsetWidth) * .5; this.h = (this.img.offsetHeight - this.offsetHeight) * .5; this.img.style.visibility = 'visible'; } } } /* ==== start script ==== */ sP.resize(); sP.run(); }, resize : function () { /* ==== window resize ==== */ var o = sP.scr; sP.nw = o.offsetWidth; sP.nh = o.offsetHeight; sP.iw = sP.pan.offsetWidth; sP.ih = sP.pan.offsetHeight; for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent) { sP.nx += o.offsetLeft; sP.ny += o.offsetTop; } for (var i = 0, o; o = sP.R[i]; i++) o.resize(); }, /* ==== main loop ==== */ run : function () { /* ==== scroll main frame ==== */ sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1; sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1; sP.pan.style.left = Math.round(sP.cx) + 'px'; sP.pan.style.top = Math.round(sP.cy) + 'px'; /* ==== lissajou ==== */ if(sP.O) { sP.O.c += .015; sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px'; sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px'; sP.O.l.style.left = Math.round(sP.O.x--) + 'px'; } /* ==== up ==== */ if (sP.Or) { sP.Or.p -= sP.Or.s; sP.Or.s *= 1.1; if (sP.Or.p < -sP.Or.offsetHeight) { sP.Or.p = -sP.Or.offsetHeight; sP.Or.s = 2; sP.Or.m = false; sP.Or = false; } sP.O.style.top = Math.round(sP.O.p) + 'px'; } /* ==== down ==== */ for (var i = 0, c; c = sP.C[i]; i++) { if (c != sP.Or) { c.p += c.s; c.s *= 1.2; if (c.p >= 0) { c.p = 0; c.s = 2; c.m = false; sP.C.splice(i, 1); } c.style.top = Math.round(c.p) + 'px'; } else { c.s = 2; c.m = false; sP.C.splice(i, 1); } } setTimeout(sP.run, 16); } } /* ==== global mouse position ==== */ document.onmousemove = function(e) { if (window.event) e = window.event; xm = e.clientX; ym = e.clientY; return false; } </script> </head> <body> <div id="screen"> <div id="pan"> <div class="frame" title="
天诚世纪
真诚为您服务!"> <img src="/images/test001.jpg" alt=""></div> <div class="frame" title="域名注册空间申请"> <img src="/images/test002.jpg" alt=""></div> <div class="frame" title="网页模板欣赏"> <img src="/images/test003.jpg" alt=""></div> <div class="frame" title="建站指导工具"> <img src="/images/test004.jpg" alt=""></div> <div class="frame" title="
网站推广
网站改版"> <img src="/images/test005.jpg" alt=""></div> <div class="frame" title="
网站建设
"> <img src="/images/11111.jpg" alt=""></div> <div class="frame" title="
网站制作
"> <img src="/images/11112.jpg" alt=""></div> <div class="frame" title="网站设计"> <img src="/images/11113.jpg" alt=""></div> <div class="frame" title="域名注册"> <img src="/images/11114.jpg" alt=""></div> </div> </div> <script type="text/javascript"> /* ==== start script ==== */ sP.init(); onresize = sP.resize; </script> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200910/20091027161805.html
上一篇文章:
超酷图片折叠分层展示
下一篇文章:
超酷点击显示过渡效果
更多关于
图形特效
的新闻
相关文章
解决“无法连接数据库,请检查数据库是否启动,数据库服务器地址是否正确”
我的机器要禁用重启后才能上网?
每次刷新后随机显示图片的效果
简单的图片放大展示效果
横向不间断的连续滚动图片/文字广告
仿拍拍paipai.com首页产品图片随机轮显切换效果
用鼠标滚轮滚动控制图片显示的大小
超酷图片放大过渡效果
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::