javascript实例
文章平均质量分 85
口耳戈是个生僻字
这个作者很懒,什么都没留下…
展开
-
canvas基础一
今天学习了html5里面的canvas(画布),canvas是一个矩形区域的画布,可以用javascript直接在上面画画,控制上面的元素,他拥有很多的绘图路径,矩形,圆形,字符以及添加图像的方法,它使得页面更加丰富多彩。下面来看看怎么使用这个神奇的标签。它在html页面里面是这样的样子,可以直接在上面设置画布的大小,边框等属性这里提一下,最好在javascript里面设置canvas的宽高,也不...原创 2018-03-03 16:53:11 · 228 阅读 · 0 评论 -
自己认为的前端学习路线
学习计划是根据我本身和我的经验弄得,可能不适合你们,所以供参考。具体以自身学习情况为主。html初学阶段:最晚花2周时间跟着w3c之类的网站把html文档过一遍,照着文档敲代码,看效果,尽量记住一些常用标签。css初学阶段:首先跟着视频,最迟花三周把视频里面讲的知识点和案例全部理解并且学会。项目实战前:今天有点晚了,想起来再写...........原创 2018-04-13 23:12:21 · 282 阅读 · 0 评论 -
多图片展开、收缩
来看看效果图:封装好的运动函数move.js就是“javascript运动基础——摩擦和缓冲”中封装的函数这是源代码<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title&原创 2018-03-12 20:35:55 · 208 阅读 · 0 评论 -
javascript运动基础——摩擦和缓冲
之前的运动看起来卡卡的,一点也不连贯,这是因为速度是我们自己设置的一个固定的数字,下面来看看比较连贯的运动;摩擦:iSpeed *= 0.92; 在方法里面加上这个语句,可以使速度越来越小缓冲:iSpeed = ( iTarget - iCur ) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);<...原创 2018-03-05 14:02:43 · 171 阅读 · 0 评论 -
javascript运动基础——运动回调-链式运动
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {widt原创 2018-03-05 13:52:51 · 181 阅读 · 0 评论 -
javascript运动基础——多值同时运动
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {widt原创 2018-03-05 13:50:44 · 152 阅读 · 0 评论 -
javascript运动基础——多个物体同时运动
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style>原创 2018-03-05 13:47:44 · 208 阅读 · 0 评论 -
滑动切换的轮播图
这是一个滑动切换的轮播图,如果想要循环播放,可以在代码中简单加几个语句就可以了先来看看具体效果<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>点击滑动图片&a原创 2018-03-04 21:00:29 · 481 阅读 · 0 评论 -
在一段文字中的查找修改删除(string类和数组类函数的应用)
先来看看具体效果<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>查找、替换、删除</title> <style>html,body { margin: 0; padding: 0; background: #原创 2018-03-04 20:45:10 · 193 阅读 · 0 评论 -
列表展开收缩效果
该效果模仿qq列表,点击展示具体联系人,再次点击则关闭列表<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&g原创 2018-03-04 20:41:06 · 1851 阅读 · 0 评论 -
canvas基础三
Canvas除了可以线画图形之外,还可以画图片,画动画 步骤和之前画图形的差不多,他需要使用注意先后顺序,为了看的更加清除,我将解释书写在代码注释中,来看看代码重要的是img.onload,只有图片加载完成后才可以去绘制到画布上看看结果:再来看看怎么做动画。首先我们需要这样一张图片这就是动画的素材了,然后再通过代码让他动起来通过绘制快速的绘制不同的图片使得他看起来在走路,不过这样只能让小人执行一行...原创 2018-03-03 17:02:25 · 142 阅读 · 0 评论 -
canvas基础二
一张画布上不可能只画一个图形的,所以我们需要把画笔抬起来,好让他开始画另外一个东西,这就可以用beginPath()来抬起画笔。这就画出了三个独立的线了上面三个咋一看你会认为它是线吗,不不,你一定认为他是矩形,所以我们来看看怎么画矩形,有三种画矩形的方法绘制圆形arc() 方法创建弧/曲线(用于创建圆或部分圆)。 *语法:ctx.arc(x,y,r,sAngle,eAngle,counter...原创 2018-03-03 16:56:56 · 162 阅读 · 0 评论 -
jquery事件重复绑定
动态的append添加的html代码,他所绑定的事件会失效后面找到原因:是因为这些动态加载的这些HTML页面是在列表数据页面的HTML元素,css,js代码加载完后,再添加的HTML元素,在浏览器解析到图一的页面元素时,解析到js的这些绑定标签事件的js代码的时候,这些绑定事件的标签元素还没有生成,(因为js代码加载完后,才会有这些绑定事件的标签),所以这些JS代码的绑定的事件,根本就没有绑定到这...原创 2018-07-07 16:07:26 · 314 阅读 · 0 评论