1. 全栈程序员必看首页

jquery动画效果实例_动画js

全栈程序员-站长 • • 未分类 • 阅读 3

jquery动画效果实例_动画js文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果JS动画实现概述在CSS3中可以通过transition过渡属性可以实现动画JS可以利用CSS3中的transition属性实现元素动画平滑动画利用CSStransition属性实现平滑动画效果<button>开始动画</button><divid=”box”></div><script>varbtn=document.queryS

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

文章目录

JS动画实现

概述

  • 在CSS3中可以通过transition过渡属性可以实现动画
  • JS可以利用CSS3中的transition属性实现元素动画

匀速动画

JS封装匀速动画

在这里插入图片描述

<button id="btn">开始动画</button>
<div id="box"></div>

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");

var timer = null;
var left = 0;

function animation(target, distance, time) { 
   
    var each = parseInt(distance / time * 30);
    clearInterval(timer);
    timer = setInterval(function() { 
   
        if (left >= distance) { 
   
            clearInterval(timer);
        } else { 
   
            left += each;
            target.style.left = left + "px";
        }
    }, 30);
};

btn.onclick = function() { 
   
    animation(box, 800, 2000);
};

利用CSS transition属性实现平滑动画效果

在这里插入图片描述

<button>开始动画</button>
<div id="box"></div>

<script> var btn = document.querySelector("button"); var box = document.querySelector("#box"); btn.onclick = function() { 
      box.style.transition = "all 2s linear 0s"; box.style.left = "800px"; }; </script>

缓速动画

var btn = document.querySelector("#btn");
var box = document.querySelector("#box");

var timer = null;
var left = 0;

function animation(target, distance) { 
   
    clearInterval(timer);
    timer = setInterval(function() { 
   
        if (left >= distance) { 
   
            clearInterval(timer);
        } else { 
   
            var step = (distance - left) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            left += step;
            target.style.left = left + "px";
        }
    }, 30);
};

btn.onclick = function() { 
   
    animation(box, 800);
};

无缝连续滚动特效

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
</div>

* { 
   
    margin: 0;
    padding: 0;
}

.banner { 
   
    width: 1000px;
    height: 130px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
}

.banner ul { 
   
    list-style: none;
    width: 5000px;
    position: relative;
}

.banner ul li { 
   
    float: left;
    margin-right: 10px;
}

var banner = document.querySelector("#banner");
var list = document.querySelector("#list");

list.innerHTML += list.innerHTML;

var left = 0;
var timer = null;

startMove();

function startMove() { 
   
    clearInterval(timer);
    timer = setInterval(function() { 
   
        left -= 4;
        if (left <= -1260) { 
   
            left = 0;
        }
        list.style.left = left + "px";
    }, 20);
}

function stopMove() { 
   
    clearInterval(timer);
}

banner.onmouseenter = function() { 
   
    stopMove();
};

banner.onmouseleave = function() { 
   
    startMove();
};

轮播图

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
    <a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a>
    <a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* { 
   
    margin: 0;
    padding: 0;
}

.banner { 
   
    width: 650px;
    height: 360px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.banner ul { 
   
    list-style: none;
    width: 5000px;
    height: 100%;
    position: relative;
    left: 0;
}

.banner ul li { 
   
    float: left;
}

.banner ul li img { 
   
    width: 650px;
    height: 360px;
}

.banner a { 
   
    text-decoration: none;
    color: white;
    text-align: center;
    line-height: 50px;
}

.banner .left-btn { 
   
    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.banner .right-btn { 
   
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

var banner = document.querySelector("#banner");
var dot = document.querySelector("#banner #dot");
var list = document.querySelector("#list");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");

var firstLi = list.lastElementChild.cloneNode(true);
var lastLi = list.firstElementChild.cloneNode(true);
list.insertBefore(firstLi, list.firstElementChild);
list.appendChild(lastLi);

//总长度
var length = list.childElementCount;

//当前显示第几页
var index = 1;

//节流锁
var lock = false;

function setPage(index) { 
   
    list.style.transition = "left .5s ease 0s";
    list.style.left = -index * 650 + "px";
}

setPage(index);


rightBtn.onclick = function() { 
   
    if (lock) { 
   
        return;
    }
    lock = true;

    index++;

    setPage(index);

    if (index === length - 1) { 
   
        setTimeout(function() { 
   
            index = 1;
            list.style.transition = "none";
            list.style.left = -index * 650 + "px";
        }, 500);
    }

    setTimeout(function() { 
   
        lock = false;
    }, 500);
};

leftBtn.onclick = function() { 
   
    if (lock) { 
   
        return;
    }
    lock = true;

    index--;
    setPage(index);

    if (index === 0) { 
   
        setTimeout(function() { 
   
            index = length - 2;
            list.style.transition = "none";
            list.style.left = -index * 650 + "px";
        }, 500);
    }

    setTimeout(function() { 
   
        lock = false;
    }, 500);
};

轮播图淡入淡出效果

在这里插入图片描述

<div id="banner" class="banner">
    <ul id="list">
        <li><img src="images/0.png" alt=""></li>
        <li><img src="images/1.png" alt=""></li>
        <li><img src="images/2.png" alt=""></li>
        <li><img src="images/3.png" alt=""></li>
        <li><img src="images/4.png" alt=""></li>
        <li><img src="images/5.png" alt=""></li>
    </ul>
    <a id="leftBtn" class="left-btn" href="javascript:;">&lt;</a>
    <a id="rightBtn" class="right-btn" href="javascript:;">&gt;</a>
</div>

* { 
   
    margin: 0;
    padding: 0;
}

.banner { 
   
    width: 650px;
    height: 360px;
    border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}

.banner ul { 
   
    list-style: none;
    width: 5000px;
    height: 100%;
    position: relative;
    left: 0;
}

.banner ul li { 
   
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease 0s;
}

.banner ul li:first-child { 
   
    opacity: 1;
}

.banner ul li img { 
   
    width: 650px;
    height: 360px;
}

.banner a { 
   
    text-decoration: none;
    color: white;
    text-align: center;
    line-height: 50px;
}

.banner .left-btn { 
   
    position: absolute;
    width: 50px;
    height: 50px;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

.banner .right-btn { 
   
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 50%;
    margin-top: -25px;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
}

var banner = document.querySelector("#banner");
var lis = document.querySelectorAll("#list li");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");

var index = 0;
var length = lis.length;
var lock = false;

rightBtn.onclick = function() { 
   
    if (lock) { 
   
        return;
    }
    lock = true;

    lis[index].style.opacity = 0;
    index++;
    if (index >= length) { 
   
        index = 0;
    }
    lis[index].style.opacity = 1;

    setTimeout(function() { 
   
        lock = false;
    }, 1000);
};
leftBtn.onclick = function() { 
   
    if (lock) { 
   
        return;
    }
    lock = true;

    lis[index].style.opacity = 0;
    index--;
    if (index < 0) { 
   
        index = length - 1;
    }
    lis[index].style.opacity = 1;

    setTimeout(function() { 
   
        lock = false;
    }, 1000);
};
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/181471.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Flash Builder 4.5 导入一个新项目，提示“flex unable to open xxxxxxxxx.swc”

    Flash Builder 4.5 导入一个新项目，提示“flex unable to open xxxxxxxxx.swc”

    Flash Builder 4.5 导入一个新项目，提示“flex unable to open xxxxxxxxx.swc”参考http://forums.adobe.com/thread/741783http://forums.esri.com/Thread.asp?c=158&f=2421&t=297291 1、如果提示FLEXSDKX.X找不到，就下载这个SDK，然后再WINDOWS/PREFERENCE里面吧SDK配置好路径2、提示“flexunabletoopenxxxxxxx

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月22日
    12
  • 单例模式的要点(写出一个单例模式)

    单例模式的要点(写出一个单例模式)

    目录一、单例模式的定义和应用场景（一）定义及基本要点（二）应用场景二、饿汉式单例模式（一）基本代码展示分析（二）基本分析和建议三、懒汉式单例模式（双重检查锁）（一）基本代码展示分析（二）基本分析和建议四、静态内部类实现单例模式（一）基本代码展示分析（二）基本分析和建议五、注册式单例模式（一）枚举式单例模式代码及分析：（EffectiveJa…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月18日
    131
  • <span role="heading" aria-level="2">互斥锁和进程之间的通信

    互斥锁和进程之间的通信

    互斥锁进程之间数据隔离，但是共享一套文件系统，因而可以通过文件来实现进程直接的通信，但问题是必须自己加锁处理。注意：加锁的目的是为了保证多个进程修改同一块数据时，同一时间只能有一个修改，即串行的修

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月29日
    46
  • 渗透测试笔记汇总_渗透测试怎么做

    渗透测试笔记汇总_渗透测试怎么做

    渗透测试笔记汇总_渗透测试怎么做【拿shell】1.直接上传aspasajspcerphpaspxhtrcdx格式的木马，不行就利用IIS6.0解析漏洞”:1.asp;1.jpg/1.asp;.jpg/1.asp;jpg/1.asp;.xls2.上传图片木马遇到拦截系统，连图片木马都上传不了，记事本打开图片木马在代码最前面加上gif89a，一般就能逃过拦截系统了。3.上传图片木马把地址复制到数据库…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月21日
    9
  • Integer.intValue_计数函数count怎么用

    Integer.intValue_计数函数count怎么用

    Integer.intValue_计数函数count怎么用Java代码 //intcount=((Integer)query.uniqueResult()).intValue();  //改成    intcount=((Number)query.uniqueResult()).intValue();    Java代码  publicintfindCountByYear(Stringcu

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月1日
    2
  • 【单调队列】数据结构之单调队列详解

    【单调队列】数据结构之单调队列详解

    【单调队列】数据结构之单调队列详解单调队列1.初步认识单调队列是一个数据结构，并不是STL里面的内容。单调队列为何说单调，因为是队列中的元素始终保持着单增或者单减的特性。（注意始终保持这四个字）简单的sort排序就可以让一个序列有序了，为何又多此一举多出来个单调队列实现类似的功能呢？其实单调队列不只是做到了排序，还可以实现一个功能：在每次加入或者删除元素时都保持序列里的元素有序，即队首元素始终是最小值或者最大值，这个功能非常重要，单调队列我们就是使用的这个功能。举个例子：我们依次加入5个元素，分别为5，8，2，4，1那么我们假

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
    20

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号