学习笔记
chenqiong1991
这个作者很懒,什么都没留下…
展开
-
matter.js学习笔记(七)--Composites.car()制造汽车
内置函数Composites.car()生成简易小车原创 2017-09-12 10:57:07 · 2133 阅读 · 0 评论 -
matter.js学习笔记(三)--mouseConstraint鼠标控制
用mouseConstraint为世界添加鼠标控制原创 2017-09-11 10:14:51 · 3359 阅读 · 4 评论 -
matter.js学习笔记(二)--Composites.stack()分析
写在前面Composites.stack()可以用来创建物体堆。在此分析其具体用法。函数分析1.先上源码Composites.stack = function(xx, yy, columns, rows, columnGap, rowGap, callback) { var stack = Composite.create({ label: 'Stack' }),原创 2017-09-10 22:51:05 · 3852 阅读 · 0 评论 -
matter.js学习笔记(一)
写在前面matter.js 是一个2D的javascript物理引擎,主页展示了一些demo。 这里介绍如何创建一个基本的物理世界。用法1. html文件中引入<script src="../build/matter.js"></script>2. 创建引擎,渲染器,添加世界,生成身体模型。var Engine=Matter.Engine, Render=Matter.Render,原创 2017-09-10 19:17:37 · 11948 阅读 · 0 评论 -
我的threejs学习笔记(六)——3D弹性球
写在前面之前用processing写过类似的弹性球。具体写法不难,主要是在IDE熟悉的基础上理解球坐标的原理。只需要两层for循环的嵌套即可完成主体部分。for嵌套for(var fi=0;fi<=Math.PI;fi+=Math.PI/10){ var count=10-3*Math.abs(Math.PI/2-fi); for(var theta=0;theta<原创 2017-03-24 21:55:09 · 1883 阅读 · 0 评论 -
我的threejs学习笔记(一)
生成three.js场景的基本步骤一、引入jquery和threejs(注意顺序,jquery在后) 1. <script src="../three.js-master/build/three.js"></script> 2. <script src="../jquery/jquery.js"></script>二、内联css控制场景布满页面<style> body{原创 2017-03-12 11:04:51 · 1285 阅读 · 0 评论 -
canvas游戏学习笔记(二)
事件的理解事件只有在被触发时,对应的绑定函数才会执行(前提是,做了正确的绑定)。否则,浏览器理解不了event是什么鬼。事件的绑定事件类型有鼠标类型、键盘类型、浏览器窗口改变、页面元素发生改变(如图片加载完成,文本域改变、元素获得或失去焦点等)等类型。事件要绑定对应的类型。如body可以绑定onload,用来初始化页面行为;body也可以绑定onmousemove,用来在探测整个页面中,鼠标是否移动原创 2017-03-15 10:42:53 · 365 阅读 · 0 评论 -
canvas游戏学习笔记(三)--打砖块
写在前面用scratch和processing都写过打砖块,所以在逻辑上比较熟悉,区别在于编写代码的方式做了些改变。只要能正确理解JavaScript的语法,打砖块还是很快就可以写好的。声明游戏角色//定义砖块数组,反弹球,球拍 var bricks=[]; var player; var paddle;定义游戏区域//定义游戏区域 var myGameArea={原创 2017-03-16 20:13:14 · 1918 阅读 · 0 评论 -
jquery插件开发学习笔记(一)
写在前面看到很多用jquery写的各种小插件,很感兴趣,尝试自己写一个。这是根据网上的资料做的一个具有传递参数的一个具备了基本功能的插件。引入jquery<script src="../lib/jquery/jquery.js"></script>定义插件$.fn.myPlugin=function(){};使用插件$("p").myPlugin();//p标签使用插件插件代码this.css("c原创 2017-03-17 21:21:37 · 534 阅读 · 0 评论 -
matter.js学习笔记(四)--Constraint.create()制造跷跷板
Constraint.create()制作跷跷板原创 2017-09-11 11:42:56 · 3395 阅读 · 0 评论 -
matter.js学习笔记(五)--Composites.chain()制造铁索桥
Composites.chain()制造铁索桥原创 2017-09-11 15:17:03 · 2354 阅读 · 1 评论 -
matter.js学习笔记(六)--Composites.softBody()制造布料或球网
Composites.softBody()制造布料原创 2017-09-12 10:01:01 · 2261 阅读 · 0 评论 -
css垂直居中
设置父元素position为relative,要居中的子元素position为absolute,然后设置居中子元素的位置的top和left均为50%,再将该元素进行平移translate(-50%,-50%)<div class="myParent"> <span class="myChild">123</span></div>效...原创 2019-02-20 11:38:24 · 214 阅读 · 0 评论 -
css清除浮动
不清除浮动产生的问题:红色为浮动的元素,浮动元素影响正常DOM流动,其父元素不考虑该浮动元素的高度,似乎无视了该浮动元素。并且影响了父元素的兄弟元素。方法一:父元素内添加空元素,并设置clear:both&amp;amp;lt;div class=&amp;quot;topDiv&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&原创 2019-02-20 11:20:56 · 157 阅读 · 0 评论 -
css 3D盒子动画
翻转盒子放在父容器中,触发动画的hover绑定在父容器上。否则,在360、搜狗等浏览器中,直接给3D盒子绑定hover,会出现抖动现象。本例子中,div为盛放3D盒子的父容器,且设置perspective属性,以获得更好的3D透视效果。同时,这会导致盒子翻转后大小会发生变化,再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。主要通过::before伪...原创 2019-01-22 11:45:13 · 1114 阅读 · 0 评论 -
浏览器环境使用es6 模块
定义一个module模块//module.jsvar m="mmm";var n="nnn";export {m,n}HTML文件script标签的type使用“module”<script type="module" src="module.js"></script>使用本地服务器本地文件模式会报错Access to script at 'file原创 2018-12-26 21:53:37 · 838 阅读 · 0 评论 -
matter.js技术 | collisionFilter 设置碰撞规则
matter.js技术 | 设置碰撞规则matter.js QQ交流群:796728825collisionFilter属性分析Collisions between two bodies will obey the following rules: * - If the two bodies have the same non-zero value of collision...原创 2018-09-13 14:19:44 · 2409 阅读 · 0 评论 -
matter.js 技术 | 操作指定物体属性(旋转、加速)
引入Body模块var Body=Matter.Body;旋转物体Events.on(mouseConstraint, "startdrag", function(e){ Body.rotate(e.body,Math.PI/4); $("#rotate")[0].play();})点击物体时,将其旋转45度。此方法中,角度的单位为弧度设置物体速度$(...原创 2018-09-10 10:22:35 · 2751 阅读 · 0 评论 -
matter.js技术 | 删除物体
关键语句World.remove(world,body);World为Matter的World模块,world为生成的world实例,body为欲删除的物体。示例一:删除指定物体var ball=Bodies.circle(x,y,15,{});World.remove(world,ball);删除生成的球体示例二Events.on(mouseConstra...原创 2018-09-10 10:12:45 · 1354 阅读 · 0 评论 -
matter.js学习笔记(八)--Composites.newtonsCradle()制造牛顿摆
Composites.newtonsCradle()为内置函数,可以生成牛顿摆。原创 2017-09-12 11:38:04 · 1913 阅读 · 1 评论 -
jquery插件开发学习笔记(二)
写在前面我认为,今天的这个插件在写法上已经比较符合jquery插件开发的“正统”流程。在各个方面都考虑得比较完善。习惯了这种思路之后,对于开发功能完备的插件是大有帮助的。 相比较与第一个插件来说,插件主体区和功能区分离是最大的特点。另外,进过两个小时的bug分析,得出了惨痛的参数传递的方法(目前觉得还太高深,不是吾辈理解之)。包裹(function($){ //code goes here原创 2017-03-19 14:50:27 · 546 阅读 · 0 评论 -
我的threejs学习笔记(二)——dat.gui使用
写在前面dat.gui可以方便地向场景中添加控制条,随时调整参数。用法<script src="../../lib/dat.gui-master/build/dat.gui.js"></script> <link rel="stylesheet" href="../../lib/dat.gui-master/build/dat.gui.css"> 引入js文件和css文件var con原创 2017-03-20 20:22:20 · 6610 阅读 · 0 评论 -
我的threejs学习笔记(三)——相机旋转
写在前面虽然看起来好像是物体自身在旋转,但确实是相机在围绕场景旋转。 另外,用简单的三个变量实现了重力模拟。相机旋转方法 var theta=0; var render=function () { requestAnimationFrame(render); controls.speedY+=controls.gravity;原创 2017-03-21 21:18:12 · 13792 阅读 · 0 评论 -
浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异
写在前面获取方法比较简单。重点在于理解三种值的实际意义。代码<p><strong>screen:</strong><span id="screen"></span></p><p><strong>client:</strong><span id="client"></span></p><p><strong>page:</strong><span id="page"></span></p> 三个原创 2017-04-05 21:30:34 · 1682 阅读 · 0 评论 -
提示文本的隐藏与显示
写在前面这个功能类似于HTML标签的placeholder属性。不同之处在于,placeholder只有在标签获得焦点并输入非空字段时,它的文字才会消失,而此功能只要标签获得焦点就会显示,而一旦失去焦点就会消失。核心代码 $(document).ready( function () { $("#search").focus(function () {原创 2017-04-06 21:42:57 · 383 阅读 · 0 评论 -
定时器设置与取消
写在前面通过JavaScript原生的setInterval()和clearInterval()设置一个定时器和取消该定时器,从而控制页面自动生成一些内容并提供停止的功能。代码<p id="para">para:</p><button>stop</button><script> function add() { $("#para").append("add <strong原创 2017-04-10 22:04:18 · 2444 阅读 · 0 评论 -
jquery为元素绑定事件
写在前面为HTML元素绑定新的事件。代码<button id="bind_button">绑定单击事件</button><div id="log">日志记录:</div><script> function myBindFunc(e) { $("#log").html($("#log").html()+"<p>"+e.data.d1+e.data.d2+"</p>");原创 2017-04-08 22:00:02 · 271 阅读 · 0 评论 -
matter.js学习笔记(九)--Body的parts属性创造十字形物品
写在前面思路很简单,创造两个物体,然后结合。原创 2017-09-14 11:00:18 · 3776 阅读 · 4 评论 -
swiper.js学习笔记
写在前面前面写过一篇关于swiper的笔记。之前那篇比较简单,测试的以为更多些。今天把它用在我的网站上,做了一个幻灯片效果,研究了几个参数,分享之。代码解读window.onload=function () { var mySwiper=new Swiper(".swiper-container",{ pagination:".swiper-paginatio原创 2017-04-03 21:37:18 · 1841 阅读 · 0 评论 -
css3动画学习笔记(一)
简介one div :一个有趣的网站。通过css做出来一些有趣的动画。对于网站来说,尽量压缩加载内容十分有必要,而用css代替图片无疑是加快网站访问速度的利器。 用法旋转动画@keyframes fan{ from{ transform: rotate(0deg); } to{ transform: rotate(720deg);原创 2017-03-15 14:12:34 · 286 阅读 · 0 评论 -
canvas游戏学习笔记(一)
写在前面之前没有写过canvas游戏,所以是以网上的成品为参考,自己边研究以后边独立写出来的,中间的一些bug也是独立思考解决的。 代码的整体风格并不是自己的风格,但是,为了学会,就先写着学着吧。canvas的代码生成var myGameArea={ canvas:document.createElement("canvas"), start:function(){原创 2017-03-14 20:46:54 · 335 阅读 · 0 评论 -
stroll.js学习笔记
简介官方介绍:stroll.js,beacuse it scrolls,and trolls.(翻译:不仅滚动,而且旋转)。 ps:确实如此。下载先贴一个GitHub下载链接:stroll.js引入文件<link rel="stylesheet" href="css/stroll.css"><script src="js/stroll.min.js"></script>创建带class的ul<ul原创 2017-03-13 09:40:53 · 765 阅读 · 0 评论 -
jquery导航栏特效
写在前面用简单的另一种方法实现导航栏滑动特效。代码.line { float: none; position: absolute; left: 0; height: 3px; width: 0; padding: 0; backgro原创 2017-04-04 20:46:32 · 843 阅读 · 0 评论 -
jquery插件开发学习笔记(七)——页面平滑滚动改进
写在前面放假了。放松一天。虽然也没干什么事。三天的假期:过完一天是一天。呵呵。 把昨天的代码稍微改了一下,使其更符合自己的逻辑,毕竟原文中的page-scroll的自定义属性是个什么鬼(os:HTML的标签的属性可以自定义的吗?不知道。以后会知道的)。直接用id来定位元素了。代码$(document).ready(function () { jQuery.scrollTo=func原创 2017-04-02 22:06:24 · 359 阅读 · 0 评论 -
jquery插件开发学习笔记(六)——页面平滑滚动
写在前面看教科书案例。代码抄的。但原代码未实现需求功能。改动之。 现分析之。关键代码<div class="scrollnav" id="scrollnav"> <a href="#" page-scroll="#scrolltoTop" id="scrolltoTop">滑动到顶端</a><br><br><br><br><br><br><br><br><br><br><br><br><b原创 2017-04-01 21:52:37 · 464 阅读 · 0 评论 -
我的threejs学习笔记(四)——dat.gui函数
写在前面dat.gui 不仅提供了参数的调节,还有类似于按钮的功能(即将其参数写为函数的形式),可以看作是gui对象的一个属性。定义按钮属性var controls=new function () { this.gravity=-0.005; this.speedY=0; this.posY=2; this.number原创 2017-03-22 22:17:53 · 2022 阅读 · 0 评论 -
我的threejs学习笔记(五)——点光源属性控制
写在前面主要练习了点光源的距离和密度属性。 理解了threejs里颜色使用的原理。代码pointLight.distance=controls.pointlight_distance; pointLight.intensity=controls.pointlight_intensity; distance(距离)控制光源的照射范围;intensity(密度)控制光源的强度。全文<!D原创 2017-03-23 21:14:24 · 3915 阅读 · 0 评论 -
我的threejs学习笔记(七)——spotLight
写在前面点光源(pointlight)的特点就像夜空中的烟雾弹,向四面八方发射光线;而聚光灯(spotlight)就像手电筒或者像舞台上的探照灯,效果是一个锥形的发光区域。相比于点光源,它有照射的近场区,远场区,和发散系数。点光源属性var spotLight=new THREE.SpotLight({color:"#f2f"}); spotLight.intensity=1; sp原创 2017-03-25 21:13:50 · 2118 阅读 · 0 评论 -
我的threejs学习笔记(八)——向场景添加颜色监听
写在前面这是几句纠结了半天的代码。源代码是addColor();我写的是add(),所以效果差很多。最后把源代码粘过来对比半天才发现这个差别。也是醉了。废话不说var controls=new function () { this.ambi_Color=ambiColor; }; var gui=new dat.GUI(); gui.addColor(cont原创 2017-03-26 21:37:06 · 3814 阅读 · 1 评论 -
我的threejs学习笔记(九)---平行光
写在前面今天没出作品。效果不太满意。明早还得早起。先睡吧。明天再仔细研究平行光。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>平行光</title> <script src="../three.js-master/three.js"></script> <script s原创 2017-03-27 21:53:00 · 2194 阅读 · 1 评论