js 사용자 정의 애니메이션 함수 윤 방도 실현
52385 단어 js
세 개의 매개 변 수 를 입력 합 니 다. 각각 조작 요소, 조작 속성, 리 셋 함수 입 니 다.
원리: 타이머 ID 를 '조작 요소' 의 속성 에 저장 합 니 다. 매번 호출 함수 가 이 '조작 요소' 기 존의 타 이 머 를 먼저 제거 하여 애니메이션 디 더 링, 여러 타이머 가 정리 할 수 없 는 문 제 를 해결 합 니 다.조작 속성 은 여러 개 로 속성 을 순환 적 으로 옮 겨 다 닐 수 있 습 니 다. 모든 애니메이션 이 완 료 된 후에 리 셋 함 수 를 호출 할 수 있 습 니 다.
function animate(ele,json,callback,loopTime) {
clearInterval(ele.timeId);
loopTime = loopTime?loopTime:20;
ele.timeId = setInterval(function () {
var flag = true;
for (var arr in json) {
if (arr === 'zIndex') {
ele.style[arr] = json[arr]; //z-index ，
}else if (arr === 'opacity') {
var current = getStyle(ele,arr)*100; //
var target = json[arr]*100;
var step= (target - current)/10;
step = step<0?Math.floor(step):Math.ceil(step); // ， 。（0.2 1， ，-0.2 -1， ）
current += step;
ele.style[arr] = current/100;
}else {
var current = parseInt(getStyle(ele,arr));
var target = json[arr];
var step= (target - current)/10;
step = step<0?Math.floor(step):Math.ceil(step);
current += step;
ele.style[arr] = current+'px';
}
if (current !== target){
flag = false
}
}
if (flag){
clearInterval(ele.timeId);
if (callback){
callback();
}
}
console.log(' ：'+target+' ： '+current+' ：'+step)
},loopTime)
}
위의 코드 가 완벽 하지 못 해서 결점 이 있 는 곳 은 너희들 에 게 맡 기 겠 다.다음은 최 적 화 된 코드 입 니 다.윤 방 도 는 바로 이 코드 를 사용한다.
function animate(ele,target,step,loopTime) {
var current = ele.offsetLeft;
// var target = 400;
step = step?step:10;
loopTime = loopTime?loopTime:20;
// ele ， ID。
//
clearInterval(ele.timeToolId);
ele.timeToolId = setInterval(function () {
current += target>current?step:-step;
if ( Math.abs(target - current) > Math.abs(step)){
ele.style.left = current+'px';
} else {
ele.style.left = target+'px';
clearInterval(ele.timeToolId);
}
},loopTime)
}
회전 목마 윤파 도
사고방식: 우선 포 지 셔 닝 방식 으로 레이아웃 을 하고 레이아웃 이 완 료 된 후에 js 코드 를 작성 합 니 다.각 그림 의 위 치 를 배열 에 저장 하고 회전 할 때마다 배열 의 마지막 위 치 를 첫 번 째 또는 반대로 바 꾸 고 애니메이션 함수 할당 을 사용 합 니 다.마지막 그림 은 제1장 그림 과 같 아 빈 틈 없 는 효 과 를 낸다.
소 재 는 그만 두 겠 습 니 다. 여러분 의 도 모 를 맡 기 겠 습 니 다.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ' ';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
style>
head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.jpg" width="500" height="200"/>li>
<li><img src="images/2.jpg" width="500" height="200"/>li>
<li><img src="images/3.jpg" width="500" height="200"/>li>
<li><img src="images/4.jpg" width="500" height="200"/>li>
<li><img src="images/5.jpg" width="500" height="200"/>li>
ul>
<ol>
ol>
div>
<div id="arr"><span id="left"><span><span id="right">>span>div>
div>
<script src="common.js">script>
<script>
var box = document.getElementById('box');
var screen = box.children[0];
var screenWidth = screen.offsetWidth;
var ulObj = screen.children[0];
var olObj = screen.children[1];
var arr = document.getElementById('arr');
var arrLeft = document.getElementById('left');
var arrRight = document.getElementById('right');
var current = 0;
var timeId = 0;
ulObj.appendChild(ulObj.children[0].cloneNode(true));
for (var i=0;i<ulObj.children.length-1;i++){
var liObj = document.createElement("li");
liObj.innerHTML = i+1;
liObj.setAttribute('index',i);
liObj.onmouseover = function() {
animate(ulObj,-this.getAttribute('index')*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
current = -this.getAttribute('index');
this.className = 'current';
};
olObj.appendChild(liObj);
}
olObj.children[0].className = 'current';
box.onmouseover = function () {
arr.style.display = 'block';
clearInterval(timeId);
};
box.onmouseout = function () {
arr.style.display = 'none';
timeId = setInterval(right,2000);
};
arrLeft.onclick = function () {
if (current !==0 ){
current++;
animate(ulObj,current*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
olObj.children[Math.abs(current)].className='current';
}
};
arrRight.onclick = right;
function right() {
if (Math.abs(current)===ulObj.children.length-1){
current =0;
ulObj.style.left = '0px';
}
if (Math.abs(current)<ulObj.children.length-1) {
current--;
animate(ulObj,current*screenWidth);
for (var j=0;j<olObj.children.length;j++) {
olObj.children[j].className='';
}
if (Math.abs(current)===ulObj.children.length-1){
olObj.children[Math.abs(current)-1].className='';
olObj.children[0].className='current';
}else{
olObj.children[Math.abs(current)].className='current';
}
}
}
timeId = setInterval(right,2000);
script>
body>
html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
