博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
知识点记录
阅读量:6690 次
发布时间:2019-06-25

本文共 2273 字,大约阅读时间需要 7 分钟。

css动画

el.style.webkitTransitionDuration = "0";

el.style.webkitTransitionTimingFunction = "none";
el.style.webkitTransform = "none";

<div style="width: 4em; height: 4em;
margin: 2em; background-color: blue;
color: white;
-webkit-transition-duration: 5s;
-webkit-transition-function: ease-out;"
οnclick='style.webkitTransform="translate(16em, -16em) scale(6) rotate(720deg)"; style.backgroundColor="red";'> Click Me!
</div>

 

选择器

el.querySelector(".x")

添加事件的另一种方法,this为一个对象,实现了handleEvent方法

el.addEventListener("click",this,true);

 

获得元素的尺寸信息

el.getBoundingClientRect()

 

多点触摸时,会记录同时存在的触摸点的信息

e.touches

 

safari浏览器,先后发送两个请求,发送请求前设置cookie,前一个cookie会被后一个覆盖

for(var i=0;i<length;i++){

  $.cookie.set("xxx",i,"xxx.com","/",0.01);
  $.http.jsonp("http://xxx.com/?r="+Math.random());
}

解决方法:

for(var i=0;i<length;i++){

  (function(num){window.setTimeout(function(){

    $.cookie.set("xxx",num,"xxx.com","/",0.01);

    $.http.jsonp("http://xxx.com/?r="+Math.random());

  },num*10)})(i)

  
}

 

chrome ff

在页面跳转前,发出的请求(例如js创建img标签,统计信息),会被这两个伟大的浏览器给过滤掉的,为了不被过滤,页面跳转的语句加上window.setTimeout就可以了

 

requestAnimationFrame

 

<div id="demo" style="position:absolute; left:0px; top:100px;width:100px; height:100px; background:#cc0;"></div>

<div id="time"></div>
<script>
var timeDiv = document.getElementById('time'),
count = 0;
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| window.oRequestAnimationFrame
|| function(callback) {
setTimeout(callback, 1000 / 60);
};
function animate(element, name, from, to, time) {
time = time || 800; // 榛樿0.8绉?
var style = element.style,
startTime = (new Date()).getTime();
function go(timestamp) {
timestamp = timestamp || (new Date()).getTime();
var progress = timestamp - startTime;
timeDiv.innerHTML += progress + '\t\t';
count++;
if (progress >= time) {
style[name] = to + 'px';
timeDiv.innerHTML += '<br>have do ' + count + ' setting';
return;
}
var now = (to - from) * (progress / time);
style[name] = now.toFixed() + 'px';
requestAnimationFrame(go);
}
style[name] = from + 'px';
requestAnimationFrame(go);
}
animate(document.getElementById('demo'), 'left', 0, 400, 3000);
</script>

 

转载于:https://www.cnblogs.com/kxdhm/archive/2012/02/22/2363631.html

你可能感兴趣的文章
Exchange 2016部署实施案例篇-01.架构设计篇(上)
查看>>
ajax传递json格式,spring MVC用对象接受
查看>>
AngularJs 指令directive之controller,link,compile
查看>>
线上处理Waiting for table metadata lock
查看>>
授之以渔-运维平台应用模块二(Vmware控制台篇)
查看>>
三对角矩阵
查看>>
判断是否是微信中打开网页
查看>>
单例模式的有缺点
查看>>
perl基础1
查看>>
chrome浏览器如何通过js判断是否安装了某扩展?
查看>>
奔驰的罪恶
查看>>
redhat 6.5 mysql主从同步
查看>>
js 变量、作用域和内存问题
查看>>
Android actionBar 修改背景色
查看>>
项目质量管理,人力资源管理作业
查看>>
Android中HttpClient网络请求
查看>>
我的友情链接
查看>>
Backbone
查看>>
asterisk架构
查看>>
python sys模块
查看>>