怎么用原生 javascript原生代码 实现像 jQuery 那样平滑运动的动画效果

来源：蜘蛛抓取(WebSpider) 时间：2016-04-26 02:29 标签： 原生javascript
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！当前位置： >
JavaScript实现抛物线运动动画效果
特效说明：
一款JavaScript实现抛物线运动动画网页特效，该抛物线运动特效可以设定目标位置、以及运动到目标位置设置回调函数，电商网站建设添加购物车JS代码特效。请用支持HTML5+CSS3主流浏览器预览效果。（兼容测试：FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器）
使用方法：
1、调用CSS样式：
&link rel=&stylesheet& type=&text/css& href=&css/style.css& /&
2、调用JS插件代码：
&script type=&text/javascript& src=&js/jquery.js&&&/script&
&script type=&text/javascript& src=&js/parabola.js&&&/script&
3、添加HTML代码：
将&!--效果html开始--&......&!--效果html结束--&之间的html和js代码；放在&body&&/body&之间。
一款jQuery仿QQ音乐大转盘抽奖代码页特效，绿色12等份网格幸运大转盘抽奖程序JS代码下载。……
一款自定义百度分享URL以及图标样式JS代码网页特效，可以应用于响应式网页制作、微信网页制作分享代码。……
一款自定义百度分享URL以及图标样式JS代码网页特效，可以应用于响应式网页制作、微信网页制作分享代码。……
一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。……
一款jQuery鼠标点击图片透明渐变翻开切换焦点图网页特效,鼠标点击图片向上移动渐变消失切换图片，带自动轮播、页码标识JS焦点图代码。……
一款JS鼠标滚动滚轮横向水平滚动网页特效，一般情况滚动滚轮上下查看网页内容，该特效代码为鼠标滚动滚轮左右横向滚动条滚动预览内容js代码。……
一款jQuery仿flash动画翻书特效免费下载，该翻书JS特效是一款功能强大的响应式书本翻页动画特效，可拖动各书角或者点击目录进行翻页。……
一款猪八戒网站jQuery返回顶部动画网页特效，该JS特效代码是一款仿猪八戒网站jQuery返回顶部效果，带有淡入淡出效果。……
一款jQuery响应式自适应宽屏焦点图特效，该JS特效代码是一款mobilyslider.js插件实现覆盖滚动切换图片效果的焦点图，带左右按钮和索引小按钮，自动播放，点击左右按钮轮播，鼠标划过停……
一款jQuery渐变切换焦点图代码网页特效免费下载，该JS特下代码是一款鼠标移到蓝色按钮自动渐变切换的幻灯片图片特效。……
最新更新特效
本站关键词
科e互联版权所有京ICP备号-1怎么用原生 JavaScript 实现像 jQuery 那样平滑运动的动画效果？
按投票排序
jQuery的动画实现原理 就是最普通的逐帧动画（定格动画）*：简单的说，根据duration、缓动公式（比如线性）和当前时间计算出下一帧的状态（即是DOM元素的css改变咯），用一个定时器（只用一个）作为update函数（这样就可以控制动画帧率了）~很简单，如需详细解释可以看看下面这些参考：jQuery源码分析-16动画分析和扩展 Effects
javascript的缓动效果 掌握了jQuery实现，不难进一步控制其动画，我曾经写过一个控制动画快进、暂停等的jQuery插件：*
动画方面可以看下我分享过的一个ppt
setInterval, setTimeout, or css3 animation. tween library
看jquery动画实现的源码勒。
帮filod补充一下，框架类库提供的动画跟普通的逐帧动画区别在于缓动函数，以下诸如，单调线性函数，二次曲线函数，正弦函数，贝塞尔函数或者可以某自定义函数等等做一个可爱的搬运工，张贴部分司徒正美的Blog中提供的函数,供君参考（完整版请翻阅司徒博客）：
var tween = {
easeInQuad: function(pos){
return Math.pow(pos, 2);
easeOutQuad: function(pos){
return -(Math.pow((pos-1), 2) -1);
easeInOutQuad: function(pos){
if ((pos/=0.5) & 1) return 0.5*Math.pow(pos,2);
return -0.5 * ((pos-=2)*pos - 2);
easeInCubic: function(pos){
return Math.pow(pos, 3);
easeOutCubic: function(pos){
return (Math.pow((pos-1), 3) +1);
easeInOutCubic: function(pos){
if ((pos/=0.5) & 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
easeInQuart: function(pos){
return Math.pow(pos, 4);
easeOutQuart: function(pos){
return -(Math.pow((pos-1), 4) -1)
easeInOutQuart: function(pos){
if ((pos/=0.5) & 1) return 0.5*Math.pow(pos,4);
return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
easeInQuint: function(pos){
return Math.pow(pos, 5);
easeOutQuint: function(pos){
return (Math.pow((pos-1), 5) +1);
easeInOutQuint: function(pos){
if ((pos/=0.5) & 1) return 0.5*Math.pow(pos,5);
return 0.5 * (Math.pow((pos-2),5) + 2);
来个抛砖引玉, 一个简单的js实现的动画.&body&
&button id="btn"&btn&/button&
&div id="test" style="width:30height:30background-color:"&&/div&
&script type="text/javascript"&
var btn = document.querySelector("#btn")
,div = document.querySelector("#test");
btn.onclick = function(){
div.style.position = "relative";
for(var i=0; i&200;i++){
setTimeout(function(){
var left = div.style.left ? div.style.left : 0;
left = parseInt(left) + 1;
div.style.left = left + "px";
//div.offsetW
好吧 我js不是专业的貌似jq只是在js外面封装了一层，让常用功能的使用更友好。动态效果的话，直接用js写一样可以实现。
已有帐号？
无法登录？
社交帐号登录你好，欢迎回来！
讨论区新帖
使用html5 canvas实现雨滴效果.
Velocity.js是一款动画切换的jQuery插件，它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小，它不仅包含了$.animate()的所有功能，并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换 在动画方面的最佳组合。
jInvertScroll 是一个操纵默认滚动行为和强制水平滚动的jQuery插件.它通过onScroll回调函数简化了视察效果的创建,我们可以在onScroll回调函数中 为任意元素增加动画效果.该插件很小,只有不到1KB大小,而且几乎不需要任何配置就可以工作. 为某个包裹元素添加一个特定的样式类然后调用一个JS方 法就足够了.
jQcloud是一个 jQuery 标签云的插件
AliceJS - (A Lightweight Independent CSS Engine) 是一个小型的 JavaScript 库用于通过硬件加速特性在一些现在的浏览器上实现高质量的可视化特效。
Nautilus是一个基于jquery能将所有图片置于一个DIV或者其他标签中，然后根据class和配置生成一个互动的动画，并且支持自定义，可以看到背景的移动。
Blend是一款基于jquery的动画/效果插件，用于增强css背景效果。
Bubble&Engine是一个漂亮的jQuery插件，它非常成功的模仿了冒气泡动画。它可以让你利用JavaScript控制最大和最小气泡的大小，气泡图片，气泡产生的位置和方向，气泡消失时间等。
将多个HTML元素封装在一个jQuery集合中，然后让它们产生多米诺运动效果。
simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果，可以是自动、手动滚动，水平、垂直方向滚动。此外，它还可以接受动态图片输入通过Flickr供稿或一个本地JSON数据源。
Navigation
正在提交...下载次数：1246
需要积分：0
下载地址：
下载说明：
1、同时下载多个文件，容易出现无法解压等情况。请大家下载完成一个文件后再下载另一个。
2、部分素材需要解压密码，请输入：niutuku 。
3、为节约资源，有部分PSD文件已关闭全部图层，下载后请使用Photoshop打开图层眼睛即可。
4、登录后可获得更多便利功能，如未注册，请先注册。
5、日历，台历，挂历等方面的素材请仔细核对后再使用，我们无法保证每个素材的日期时间都是正确的。请慎重！！！！
6、特别说明：本站"设计素材"栏目内的所有资源（包括素材、软件、资料等）仅供学习与参考，请勿用于商业用途。

我要回帖

更多关于 原生javascript 的文章

 

随机推荐