[js高手之路]打造通用的匀速运动框架

【[js高手之路]打造通用的匀速运动框架】的更多相关文章

[js高手之路]打造通用的匀速运动框架

本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变得更加的通用和强大: 1,支持多个物体的运动 2,同时运动 3,顺序运动这三种运动方式也是jquery中animate函数支持的一.animate函数中怎么区分变化不同的样式? 上文中,侧边栏效果用的animate函数改变的是left值 function animate(obj, targe…

[js高手之路] 我的开源javascript框架gdom - 选择器用法

gdom框架是我开发的一款dom和字符串处理框架,目前版本是1.0.0. 使用方法跟jquery是差不多的, 会用jquery就会用gdom,目前 1.0.0版本的选择器完全支持CSS3选择器.没有做IE的低版本兼容. gdom下载地址:https://github.com/ghostwu/gdom gdom选择器有两种写法: G( 选择器 ) 和 $( 选择器 ) gdom的加载: G( function(){} ) $( function() {} ); 公用css文件: common…

[js高手之路]面向对象版本匀速运动框架

这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通用的面向对象匀速运动框架 - by ghostwu</titl…

[js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ? Math.ceil(speed) : Math.floor(speed); if (cur != target) { bFlag = false; if (key == 'opacity') { obj.style.opacity = ( cur + speed ) / 100; obj.st…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间需要用到的库: node.js自带的http库第三方库:cheerio,这个库就是用来处理dom节点的,他的用法几乎跟jquery用法一模一样,所以有了这个利器,写一个爬虫就非常简单准备工作: 1,npm init --yes 初始化package.json 2,安装cheerio:npm install cheerio --save-dev…

[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单的边界判断,所谓边界判断:就是把物体的运动限定在一个范围内.我们先来一个简单的实例,在canvas上生成一个小球,小球的初始位置是在canvas的正中间,然后通过键盘的上下左右来移动小球的位置,如果小球碰到canvas的左边,那么不能再向左运动,其他方向同理. 要实现这个效果,只需要一个边界判断,即…