JS를 활용한 다중 객체 이동 예시 공유-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS를 활용한 다중 객체 이동 예시 공유

小云云

Jan 24, 2018 am 09:02 AM

javascript 공유하다 예

이 글은 주로 JS에서 다중 객체 이동을 구현하는 방법을 소개하고, 다중 객체 이동을 구현하는데 있어서 자바스크립트의 원리와 관련 동작 기법을 예제 형식으로 자세하게 분석하고 있으니, 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

기본 단계

1. getElementsByTagName
2을 통해 여러 개체로 이동할 요소를 얻습니다. 그런 다음 for 루프가 요소를 순회하고 이벤트를 추가합니다.
3. 현재 요소 "동작 중"과 대상 값 target

이라는 두 개의 매개변수가 필요합니다. 참고: 다중 객체 모션에서는 모든 것을 공유할 수 없습니다.

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;); // 第一步
      for(var i=0;i<liTags.length;i++){ // 第二步
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    var timer = null;
    function startMove(obj,iTarget) { // 第三步，2个参数
      clearInterval(timer);
      timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
        if(obj.offsetWidth == iTarget){
          clearInterval(timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

로그인 후 복사

문제:

이동할 때; 들어오고 나가는 속도가 상대적으로 빠르며 li가 원래 상태로 돌아갈 수 없고 중간에 멈춥니다. 이것은 모든 li가 타이머를 공유하기 때문입니다.

마우스가 첫 번째 li로 이동하면 startMove를 호출하여 시작합니다. 타이머; 마우스가 움직일 때 li를 원래 위치로 되돌릴 수 있도록 타이머도 시작해야 합니다. li가 중간에 도달하면 타이머가 먼저 지워지고 그 다음 첫 번째가 지워집니다. 나는 중간에 막힐 것이다.

이 문제를 해결하세요. for 루프 중에 각 li에 대해 타이머를 정의하세요.

liTags[i].timer = null;// 给每个li都添加一个timer

로그인 후 복사

그런 다음 starMove에서 매번 사용되는 타이머는 현재 li의 자체이므로 서로 간섭이 없습니다.

여기의 이전 타이머는 obj.timer (현재 개체의 자체 타이머)로 변경되었습니다. 여기에는 문제가 없습니다.

완전한 코드는 다음과 같습니다:

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>

로그인 후 복사

일부 스타일 추가:

<style>
    ul{list-style: none;}
    ul li{
      margin: 10px;
      width: 200px;height: 50px;
      background: lightblue;
    }
</style>

로그인 후 복사

js 코드 완성

<script>
    window.onload = function(){
      var liTags = document.getElementsByTagName(&#39;li&#39;);
      for(var i=0;i<liTags.length;i++){
         liTags[i].timer = null;// 给每个li都添加一个timer
         liTags[i].onmouseover = function () {
         startMove(this,400);
         }
         liTags[i].onmouseout = function () {
         startMove(this,200);
         }
      }
    }
    function startMove(obj,iTarget) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {
        var iSpeed = (iTarget - obj.offsetWidth)/10;
        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = obj.offsetWidth+iSpeed+&#39;px&#39;;
        }
      },30);
    }
</script>

로그인 후 복사

그런 다음 예를 살펴보겠습니다. 다중 개체 이동 - 투명도 변경

<script>
  window.onload = function () {
    var aImgs = document.getElementsByTagName(&#39;img&#39;);
    for(var i=0;i<aImgs.length;i++){
      aImgs[i].timer = null;
      aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
      aImgs[i].onmouseover = function () {
        startMove(this,30);
      }
      aImgs[i].onmouseout = function () {
        startMove(this,100);
      }
    }
  }
  // var alpha = 100; 这里alpha在多物体运动里 不能公用
  function startMove(obj,iTarget) {
    clearInterval(obj.timer);
    var iSpeed = (iTarget - obj.alpha)/10;
      iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
    obj.timer = setInterval(function(){
      if(obj.alpha == iTarget){
        clearInterval(obj.timer);
      }else{
        obj.alpha += iSpeed;
        obj.style.opacity =obj.alpha/100;
        obj.style.filter = &#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;
      }
    },30);
  }
</script>

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7554

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? Mar 14, 2024 pm 04:40 PM

Quark Netdisk와 Baidu Netdisk는 매우 편리한 저장 도구입니다. 많은 사용자가 이 두 소프트웨어가 상호 운용 가능한지 묻고 있습니다. Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? 이 사이트에서는 Quark 네트워크 디스크 파일을 Baidu 네트워크 디스크에 저장하는 방법을 사용자에게 자세히 소개합니다. Quark Network Disk에서 Baidu Network Disk로 파일을 저장하는 방법 방법 1. Quark Network Disk에서 Baidu Network Disk로 파일을 전송하는 방법을 알고 싶다면 먼저 Quark Network Disk에 저장해야 하는 파일을 다운로드한 다음 엽니다. Baidu 네트워크 디스크 클라이언트에서 압축 파일을 저장할 폴더를 선택한 다음 두 번 클릭하여 폴더를 엽니다. 2. 폴더를 연 후 창 왼쪽 상단에 있는 "업로드"를 클릭하세요. 3. 컴퓨터에 업로드해야 하는 압축 파일을 찾아 클릭하여 선택합니다.

NetEase Cloud Music을 WeChat Moments에 공유하는 방법_NetEase Cloud Music을 WeChat Moments에 공유하는 방법에 대한 튜토리얼 Mar 25, 2024 am 11:41 AM

1. 먼저 NetEase Cloud Music에 들어간 다음 소프트웨어 홈페이지 인터페이스를 클릭하여 노래 재생 인터페이스로 들어갑니다. 2. 그런 다음 노래 재생 인터페이스에서 아래 그림의 빨간색 상자에 표시된 것처럼 오른쪽 상단에서 공유 기능 버튼을 찾아 공유 채널에서 공유 채널을 선택하고 다음 위치에서 "공유 대상" 옵션을 클릭합니다. 하단에서 첫 번째 "WeChat Moments"를 선택하면 WeChat Moments에 콘텐츠를 공유할 수 있습니다.

Baidu Netdisk에서 친구들과 파일을 공유하는 방법 Mar 25, 2024 pm 06:52 PM

최근 Baidu Netdisk Android 클라이언트는 새로운 버전 8.0.0을 선보였습니다. 이 버전은 많은 변화를 가져올 뿐만 아니라 많은 실용적인 기능도 추가했습니다. 그 중 가장 눈길을 끄는 것은 폴더 공유 기능 강화다. 이제 사용자는 쉽게 친구를 초대하여 업무와 생활에서 중요한 파일을 공유하고 더욱 편리하게 협업하고 공유할 수 있습니다. 그렇다면 친구들과 공유해야 하는 파일을 어떻게 공유합니까? 아래에서 이 사이트의 편집자가 자세한 소개를 해줄 것입니다. 1) Baidu Cloud 앱을 열고 먼저 홈페이지에서 관련 폴더를 클릭한 다음 인터페이스 오른쪽 상단에 있는 [...] 아이콘을 클릭합니다(아래 참조). 2) 그런 다음에서 [+]를 클릭합니다. "공유 멤버" 열 ]을 선택하고 마지막으로 모두 확인합니다.

망고tv 회원 계정공유 2023 Feb 07, 2024 pm 02:27 PM

Mango TV에는 다양한 유형의 영화, TV 시리즈, 예능 프로그램 및 기타 리소스가 있으며 사용자는 자유롭게 선택하여 시청할 수 있습니다. Mango TV 회원은 모든 VIP 드라마를 시청할 수 있을 뿐만 아니라 사용자가 드라마를 즐겁게 시청할 수 있도록 최고 화질을 설정할 수 있습니다. 아래에서 편집자는 사용자가 사용하고 서둘러 살펴볼 수 있도록 무료 Mango TV 멤버십 계정을 제공합니다. 구경하다. Mango TV 최신 회원 계정 무료 공유 2023: 참고: 이것은 최근 수집된 회원 계정이며 로그인하여 직접 사용할 수 있으며 비밀번호를 마음대로 변경하지 마십시오. 계좌번호: 13842025699 비밀번호: qds373 계좌번호: 15804882888 비밀번호: evr6982 계좌번호: 13330925667 비밀번호: jgqae 계좌번호: 1703

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

Discuz WeChat 공유가 표시되지 않는 문제 해결 Mar 09, 2024 pm 03:39 PM

제목: Discuz WeChat 공유가 표시되지 않는 문제를 해결하려면 구체적인 코드 예제가 필요합니다. 모바일 인터넷의 발전으로 WeChat은 사람들의 일상생활에 없어서는 안될 부분이 되었습니다. 웹사이트 개발 시 사용자 경험을 개선하고 웹사이트 노출을 확대하기 위해 많은 웹사이트에 WeChat 공유 기능이 통합되어 사용자가 웹사이트 콘텐츠를 Moments 또는 WeChat 그룹에 쉽게 공유할 수 있습니다. 그러나 때때로 Discuz와 같은 오픈 소스 포럼 시스템을 사용할 때 WeChat 공유를 표시할 수 없는 문제가 발생하여 사용자 경험에 특정 어려움을 초래할 수 있습니다.

HP 프린터 드라이버의 두 가지 설치 방법 공유 Mar 13, 2024 pm 05:16 PM

HP 프린터는 많은 사무실에서 필수적인 인쇄 장비입니다. 컴퓨터에 프린터 드라이버를 설치하면 프린터가 연결되지 않는 등의 문제를 완벽하게 해결할 수 있습니다. 그렇다면 HP 프린터 드라이버를 설치하는 방법은 무엇입니까? 아래 편집기에서는 두 가지 HP 프린터 드라이버 설치 방법을 소개합니다. 첫 번째 방법: 공식 웹사이트에서 드라이버를 다운로드합니다. 1. 검색 엔진에서 HP China 공식 웹사이트를 검색하고 지원 열에서 [소프트웨어 및 드라이버]를 선택합니다. 2. [프린터] 카테고리를 선택하고 검색창에 프린터 모델을 입력한 후 [제출]을 클릭하여 프린터 드라이버를 찾으세요. 3. 컴퓨터 시스템에 따라 해당 프린터를 선택합니다. win10의 경우 win10 시스템용 드라이버를 선택합니다. 4. 다운로드가 성공적으로 완료되면 해당 폴더에서 찾아보세요.

토마토 소설 링크 공유 방법 Feb 27, 2024 pm 04:20 PM

토마토소설은 양질의 소설자료를 다수 모아놓은 풍부한 소설의 보고입니다. 여기에서는 다양한 종류의 소설 중에서 취향에 따라 좋아하는 소설을 선택할 수 있습니다. 독서를 좋아하는 분들에게 이곳은 의심할 여지 없이 마음껏 날아다닐 수 있는 문학의 세계입니다. 때로는 좋아하는 독서 자료를 접하면 친구와 공유하여 함께 읽는 것과 같지만 많은 사용자는 공유 방법을 정확히 알지 못합니다. 따라서 이 튜토리얼 가이드는 원하는 플레이어를 위해 가이드에 대한 자세한 소개를 제공합니다. 더 알고 싶다면 이 기사와 함께 읽어보세요! 토마토 소설을 친구들과 공유하는 방법은 무엇입니까? 1. 토마토 소설을 열고, 소설을 클릭해 들어가신 후, 오른쪽 상단의 공유 아이콘을 클릭하세요. 2. 공유 채널을 선택합니다. 여기서는 WeChat 친구와의 공유를 예로 들어보겠습니다. 3. 공유를 클릭합니다. 4. 확인하실 수 있습니다

See all articles

JS를 활용한 다중 객체 이동 예시 공유

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제