zoukankan
html css js c++ java
魔兽技能CD效果
<!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=utf-8" /> <title>WarICON Prefect</title> <style> .icoBox { position: absolute; overflow: hidden; 64px; height: 64px; background: #000; } .icoBox * { margin: 0; position: absolute; } .icoBox .mask { display: none; overflow: hidden; border: 33px solid #000001; filter: Chroma(color='black') alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .icoBox .layer0 { height: 0px; left: 33px; top: -33px; border-top: 33px solid transparent; border-left: 0px solid transparent; } .icoBox .layer1 { 0px; left: 33px; top: 33px; border-top: 0px solid transparent; border-right: 33px solid transparent; } .icoBox .layer2 { left:-33px; top: 33px; border-bottom: 33px solid transparent; border-right: 0px solid transparent; } .icoBox .layer3 { left: -33px; top: -33px; border-bottom: 0px solid transparent; border-left: 33px solid transparent; } .icoBox { position: absolute; overflow: hidden; 64px; height: 64px; background: #000; } .icoBox * { margin: 0; position: absolute; } .icoBox .mask { display: none; overflow: hidden; border: 33px solid #000001; filter: Chroma(color='black') alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .icoBox .layer0 { height: 0px; left: 33px; top: -33px; border-top: 33px solid transparent; border-left: 0px solid transparent; } .icoBox .layer1 { 0px; left: 33px; top: 33px; border-top: 0px solid transparent; border-right: 33px solid transparent; } .icoBox .layer2 { left:-33px; top: 33px; border-bottom: 33px solid transparent; border-right: 0px solid transparent; } .icoBox .layer3 { left: -33px; top: -33px; border-bottom: 0px solid transparent; border-left: 33px solid transparent; } </style> </head> <body ondragstart="return false"> <div id="divBox" class="icoBox" style="left:10px; top:10px;" _mce_style="left: 10px; top: 10px;"> <img id="divBGPic" class="icoBGPic" src="http://pic002.cnblogs.com/images/2011/156724/2011021814244356.png" _mce_src="http://pic002.cnblogs.com/images/2011/156724/2011021814244356.png" onmousedown="handleMouseDown()" /> </div> <script type="text/javascript"> var $ = function(v){return document.getElementById(v)} var $c = function(v){return document.createElement(v)} var __VER__ = navigator.userAgent; var __FF__ = /Firefox/.test(__VER__); if(__FF__) { CSSStyleDeclaration.prototype.__defineSetter__("pixelHeight", function(v){this.height = v+"px";}); CSSStyleDeclaration.prototype.__defineSetter__("pixelWidth", function(v){this.width = v+"px";}); CSSStyleDeclaration.prototype.__defineSetter__("pixelTop", function(v){this.top = v+"px";}); CSSStyleDeclaration.prototype.__defineSetter__("pixelLeft", function(v){this.left = v+"px";}); } try{document.execCommand("BackgroundImageCache", false, true)}catch(e){} </script> <script type="text/javascript"> var styPic = $("divBGPic").style; var arrMask = []; var tickID; var stage; var inCD; window.onload =function() { var i,obj; for(i=0; i<4; i++) { obj = $c("div"); obj.className = "mask layer" + i; arrMask[i] = obj.style; $("divBox").appendChild(obj); } }; function handleMouseDown() { styPic.pixelLeft = 2; styPic.pixelTop = 2; styPic.pixelWidth = 60; styPic.pixelHeight = 60; } document.onmouseup =function(e) { styPic.pixelLeft = 0; styPic.pixelTop = 0; styPic.pixelWidth = 64; styPic.pixelHeight = 64; e = e || event; e = e.srcElement || e.target; if(e != $("divBGPic")) return; if(inCD) return; inCD = true; tickID = 0; stage = 0; Reset(); }; function Draw() { if(!inCD) return; var i = ++tickID; switch(stage) { case 0: arrMask[0].borderLeftWidth = i + "px"; break; case 1: arrMask[0].pixelHeight = i; arrMask[0].borderBottomWidth = (33-i) + "px"; break; case 2: arrMask[1].borderTopWidth = i + "px"; break; case 3: arrMask[1].pixelWidth = i; arrMask[1].borderLeftWidth = (33-i) + "px"; break; case 4: arrMask[2].pixelWidth = 33 - i; arrMask[2].borderRightWidth = i + "px"; break; case 5: arrMask[2].pixelHeight = i; arrMask[2].borderTopWidth = (33-i) + "px"; break; case 6: arrMask[3].pixelHeight = 33 - i; arrMask[3].borderBottomWidth = i + "px"; break; case 7: arrMask[3].pixelWidth = i; arrMask[3].borderRightWidth = (33-i) + "px"; break; case 8: inCD = false; for(i=0; i<4; i++) arrMask[i].display = "none"; break; } if(tickID == 33) { tickID = 0; stage++; } } function Reset() { for(var i=0; i<4; i++) { arrMask[i].display = "block"; } arrMask[0].pixelWidth = 0; arrMask[0].pixelHeight = 0; arrMask[0].borderLeftWidth = "0"; arrMask[0].borderBottomWidth = "33px"; arrMask[1].pixelWidth = 0; arrMask[1].pixelHeight = 0; arrMask[1].borderTopWidth = "0"; arrMask[1].borderLeftWidth = "33px"; arrMask[2].pixelWidth = 33; arrMask[2].pixelHeight = 0; arrMask[2].borderRightWidth = "0"; arrMask[2].borderTopWidth = "33px"; arrMask[3].pixelWidth = 0; arrMask[3].pixelHeight = 33; arrMask[3].borderBottomWidth = "0"; arrMask[3].borderRightWidth = "33px"; } function RenderRoutine() { Draw(); } setInterval(RenderRoutine, 16); </script> </body> </html>
运行代码
查看全文
相关阅读:
Duang~Duang~Duang 还在使用jsfiddle和jsbin做在线前端代码展示和演示吗? 试试更强大的在线代码分享工具吧!
如数据库一般访问互联网资源
HTML5来了,7个混合式移动开发框架
Three.js纹理贴图正方体旋转动画效果
极客Web开发资源大荟萃#003
精彩代码回放:jQuery实现的浏览器类型和版本检测
响应式的全屏背景图片效果
Delphi多线程编程之同步读写全局数据
delphi与sqlite
Delphi调用IE打开网页
原文地址:https://www.cnblogs.com/geass/p/1957809.html
最新文章
17.python内置函数2
16.python内置函数
16python的map函数,filter函数,reduce函数
递归蝌蚪找妈妈
16.函数式编程
16.函数作用域,匿名函数
15.python变量,递归
apple mach-o linker (id) error
'release' is unavailable: not available in automatic reference counting mode..(Xcode4.2.1+iOS5.0)
【转】Android 系统字体规范与应用探索
热门文章
xcode如何关联ViewController 和.h文件
Cannot open "Name.xcodeproj" because it is already open in another workspace.
Storyboard.storyboard could not be opened. Could not read the archive.
win7主机和mac虚拟机共享文件
NYTimes Objective-C 编程风格指南
Objective-C学习--字符串
Objective-C学习笔记--一些有用的数据类型
极客编程挑战#018:设计独一无二的页面 ”加载中“ 效果
【FIR.im赞助】jQuery编程挑战#012:生成菜单添加和删除动画效果
学习使用easelJS类库控制HTML5游戏角色的移动和跳跃
Copyright © 2011-2022 走看看