사이드바 공유 효과를 달성하기 위한 JavaScript 균일 모션(코드)
- 不言원래의
- 2018-08-31 09:55:311487검색
이 글의 내용은 자바스크립트 균일 모션으로 구현되는 사이드바 공유 효과(코드)에 대한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.
원리
offsetLeft(왼쪽에서 개체까지의 거리)와 고정 속도를 사용하세요.
타이머 setInterval 및clearInterval
을 사용하여 현재 위치에서 목표 위치까지의 값이 양수인지 음수인지에 따라 실행 속도가 양수인지 음수인지 결정합니다.
사이드바 공유 효과 달성
<!DOCTYPE html>
<html>
<head>
<title>用运动做一个侧边栏分享</title>
<style>
#div1{
width: 150px;
height: 200px;
background: #0f0;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: #00f;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout=function(){
startMove(-10,-150);
}
}
var timer=null;
function startMove(speed,iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
코드를 작성할 때 테스트 최적화를 수행해야 합니다. 테스트에서는 호환성 문제가 없습니다. 캡슐화된 이동 함수에는 두 개의 매개변수가 있습니다. 이때 매개변수를 단순화할 수 있는지 고려합니다.
예를 들어 택시를 탈 때 운전자에게 목적지를 알려줄 수 있지만 목적지에 도달하기 위해 운전자에게 속도를 알려줄 필요가 없으므로 매개변수를 하나의 매개변수로 단순화할 수 있습니다. 구체적인 코드는 다음과 같습니다.
사이드바 공유 효과 달성 - 속도 매개변수 단순화
<!DOCTYPE html>
<html>
<head>
<title>用运动做一个侧边栏分享</title>
<style>
#div1{
width: 150px;
height: 200px;
background: #0f0;
position: absolute;
left: -150px;
}
#div1 span{
position: absolute;
width: 20px;
height: 60px;
line-height: 20px;
background: #00f;
right: -20px;
top: 70px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-150);
}
}
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}else{
speed=10;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
관련 권장 사항:
균일한 모션 애니메이션 효과를 달성하기 위한 기본 자바스크립트_javascript 기술
위 내용은 사이드바 공유 효과를 달성하기 위한 JavaScript 균일 모션(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.