知识点记录

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;"
onclick='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>