代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
IE兼容型运动框架
作者:
amandag
/ 发布于
2016/9/20
/
755
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ position: relative; } div{ width: 100px; height: 100px; position: absolute; left: 0px; background-color: blue; top: 100px; border-radius: 50%; } </style> </head> <body> <button id="btn">开始</button> <button id="btn1">开始</button> <div id="box"></div> </body> </html> <script src="animate.js"></script> <script> var btn = document.getElementById("btn"); var btn1 = document.getElementById("btn1"); var box = document.getElementById("box"); btn.onclick = function(){ animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert(11)}); } btn1.onclick = function(){ animate(box,{top:300}); } function getStyle(obj,attr){//得到对象属性值 if(obj.currentStyle){ return obj.currentStyle[attr]; } else { return window.getComputedStyle(obj,null)[attr]; } } //json运动框架 function animate(obj,json,fn){ clearInterval(obj.timer);//清楚定时器 //开启定时器 obj.timer = setInterval(function(){ //定时器开关按钮 var flag =true ; for(var k in json){ var current = 0; if(k == "opacity"){//判断是否为透明度 current = Math.round(parseInt(getStyle(obj,k)*100)||0); } else current = parseInt(getStyle(obj,k)); var step = (json[k] - current)/10 ; step = step>0? Math.ceil(step):Math.floor(step); if(k=="opacity"){ if("opacity" in obj.style){ obj.style.opacity = (current + step)/100; } else { obj.style.filter = "alpha( opacity ="+(current + step)*10+")"; console.log( obj.style.filter); } } else if(k=="zIndex"){ obj.style.zIndex = json[k]; } else { obj.style[k] = current+step+"px"; } if(current != json[k]){ flag=false; } } //条件满足,定时器关闭 if(flag){ clearInterval(obj.timer); //回调函数 if(fn){ fn(); } } },30) } </script>
试试其它关键字
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后,在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后,在页面显示上传的图片
.
html5实现点击弹出图片
amandag
贡献的其它代码
(
12
)
.
高德地图计算两地距离
.
图片转二进制/字符串 二进制/字符串反转成图片
.
一条记录中包含多个count
.
替换指定字符串的函数
.
IE兼容型运动框架
.
javascript和css来实现textbox水印效果
.
Fibonacci series 斐波纳契数列
.
MVC 特殊字符的显示
.
获取应用完整路径
.
ListView新增列 新增行 批量更新防闪烁
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3