js의 지터 구현 원리(코드 포함)
- 不言원래의
- 2018-08-14 16:25:231379검색
이 기사의 내용은 js의 jitter 구현 원리에 관한 것입니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.
구현 원리
디더링의 구현 원리는 실제로 노드 요소의 위치를 오프셋하는 것이므로 이 기능을 구현할 때는 노드 요소의 절대 위치를 지정한 다음 위쪽 및 왼쪽 값을 수정하는 것이 가장 좋습니다.
여기에는 몇 가지 핵심 사항이 있습니다. 첫 번째는 오프셋이 필요한 주파수를 준비하는 것입니다. 이는 오프셋 거리를 배열에 넣어 제어할 수 있습니다. 타이머 시간은 노드 플래핑 속도를 결정합니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Made with Thimble</title>
<link rel="stylesheet" href="style.css">
<style>
img{
width:300px;
height: 400px;
position:absolute;
top:20px;
left:150px;
}
</style>
</head>
<body>
<img id="img1" src="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg">
</body>
<script>
var oImg = document.getElementById('img1');
oImg.onclick = function(){
//this 到函数里面作用域会变，这里赋值先变成局部
var that = this;
shaking(that,'top',function(){
shaking(that,'left');
});
};
// 抖动函数封装 attr：left水平抖动 top：垂直抖动
function shaking(obj,attr,callback){
var pos = parseInt(getStyle(obj,attr));
var arr = [];
var num = 0;
for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0);
clearInterval(obj.shaking);
obj.shaking = setInterval(function(){
obj.style[attr] = pos + arr[num] + 'px';
num ++;
if(num === arr.length){
clearInterval(obj.shaking);
callback && callback();
}
},50);
}
// 获取节点对象的样式属性值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj,false)[attr];
}
}
</script>
</html>
관련 권장사항:
js의 문자 메서드 및 문자열 연산 메서드 요약(코드 포함)
위 내용은 js의 지터 구현 원리(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.