逐影

摘要： 网络上已经有了很多转盘抽奖的代码，但大多是用jQuery插件实现的，其中的原理比较难弄明白，于是自己摸索了一个。最终效果如下： 实现步骤： 1.根据奖品数量绘制转盘 这一部分代码的效果如下： 图一 要注意首个奖品说明的位置，也就是一等奖的位置，是从三点钟方向开始的，这是arc()方法的规定，下面这张 阅读全文

摘要： 一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法，对它的认识比较模糊，导致犯了一些错误，特发此文，以纠正之前的错误理解。 arc()方法定义如下： arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。 语法： 沿着圆指定弧的开始点和结束点的一 阅读全文

摘要： 标题有点小题大作了，实际上是实现一张看起来连续的运动背景图片。 效果如下： 实现原理： 图片1与图片2是两张首尾衔接的图片，图片1以一定速度移出canvas，图片2慢慢移进canvas，当图片1完全移出canvas范围后，立即将图片1位置重置，由于两张图片是首尾衔接的，所以看起来就像是一张无限滚动的 阅读全文

摘要： // Remove the selections - NOTE: Should use // removeRange(range) when it is supported window.getSelection().removeAllRanges(); 如此一来就能省去了制作flash的麻烦。 阅读全文

摘要： 假设页面上有一个a标签： 现在需要对这个标签进行拖放操作，会发现当拖曳完成后，该链接也同时被打开了，这并不是期望的结果，因为我们仅仅想将这个标签拖放到另一个位置而已。 最初很自然地想到了用preventDefault来阻止默认行为，可实际操作后发现这种方案不可行。 由于拖曳需要监听三个事件：mous 阅读全文

摘要： vscode出来之前一直使用sublime，后者在编写HTML文件时可以通过点击鼠标右键，找到open in browser来启动系统默认浏览器，而vscode却没有这个功能，调试和预览起来比较麻烦。不过可以通过配置tasks.json文件来解决这个问题。 按Ctrl+P打开命令面板，输入tasks 阅读全文

摘要： Predefined term Matches \t Horizontal tab \b Backspace \v Vertical tab \f Form feed \r Carriage return \n Newline \cA : \cZ Control characters \x0000  阅读全文

摘要： 如果有一根橡皮筋拴住一个小球，将小球拉开一定距离后释放，小球将会弹动。距离越远，橡皮筋对小球施加的外力越大，小球的加速度就越大。也就是说，小球的加速度与距离是成正比例关系的。这和缓动很相似，缓动是速度与距离成正比例。假设弹力系数为spring，则有公式： ax = (targetX - curren 阅读全文

摘要： 当你驾车在高速公路上行驶时，速度是很快的，而快到收费站时，则开始减速直到停下。将这个例子转换成物理模型就是当物体向终点运动时，开始速度会很快，而在快要到达终点时，速度会逐渐放缓直至0，整个运动过程就是缓动。距离越远，速度就越大，距离越近，速度就越慢，也就是距离和速度是成正比关系的。 如果t为1，则 阅读全文

摘要： 首先用一个例子来演示这个效果： 鼠标可以拖曳和投掷小球 <!-- canvas{border:1px solid #000} --> // <![CDATA[ window.requestAnimFrame = (function(){ return window.requestAnimationF 阅读全文

摘要： 摩擦力是与物体运动方向相反的力。我们在处理物体运动时，常把物体分解水平(X轴)方向和竖直(Y轴)方向的运动(比如平抛运动)，但在处理摩擦力时，如果把摩擦力分解为X轴和Y轴上的阻力，就会出现某条轴上速度为0，而另一条轴还在运动的奇怪现象。为此，处理摩擦力时应将物体最终运动的方向作为基准。 <!-- c 阅读全文

摘要： <!-- h2{background:#72A6F9; color:#fff; padding-left:4px; border-radius:3px; font-family:'Microsoft YaHei'} canvas{border:1px solid #000} --> 在动画中经常要处 阅读全文

摘要： 首先来看看完成后的效果：其中灰色代表路障，绿色是起点和移动路径，红色代表终点 为了继续学习，需要明白几个概念。曼哈顿距离曼哈顿距离的定义是，两个物体南北方向的距离与东西方向的距离之和。看起来就好像是直角三角形的两条边之和。用代码表示出来就是：/** * 计算两点间的曼哈顿距离 * @param go... 阅读全文

摘要： 在网页上的颜色通常使用RGB来表示，即红色，绿色，蓝色的组合色。每种颜色可以有256个值(0~255)，三种颜色组合起来可以达到0~16777215种。256可以由8位二进制数字表示(例如255的二进制是11111111)，所以表现三原色需要24位数字，称为24位颜色系统。另外还有一个32位颜色... 阅读全文

摘要： 首先需要整理好lrc格式的歌词放到script标签中以供程序处理。然后把音乐链接放到audio的src属性里就可以了。源码：HTML部分1 2 3 4 5 6 JS部分 1 var musicPlayer = function() { 2 return this.in... 阅读全文

摘要： 示例1，跟随鼠标的键头：需要掌握一个重要的公式，这个方法返回从 x 轴到点 (x,y) 之间的角度Math.atan2(dy,dx);关键代码： 1 function Arrow() { 2 this.x = 0; 3 this.y = 0; 4 this.rotate = 0; 5 ... 阅读全文

摘要： 这篇文章是《.NET MVC 4 实现用户注册功能》的后续开发，实现发送激活链接到注册用户邮箱，用户在邮箱打开链接后激活账户的功能。首先实现发送邮件的功能，在管理用户注册的controller中新增一个class MailService： 1 using System.Net.Mail; 2 3 ... 阅读全文

摘要： 初学MVC，踩了不少坑，所以通过实现一个用户注册功能把近段时间学习到的知识梳理一遍，方便以后改进和查阅。问题清单：l为什么EF自动生成的表名后自动添加了s？l如何为数据库初始化一些数据？l使用WebAPI如何返回JSON？l让Action接受Get请求l如何使路由匹配不同的URLl如何调试路由lVS... 阅读全文

摘要： 带三角箭头的提示框，就是下面所示： 这是一个提示框 这是一个提示框 这是一个提示框 通常我们都用图片来实现上面那个小三角，因为这样方便快速，但是如果图片处理得不好，会看起来有杂边，从而影响视觉，所以换一种思路来解决。 首先来研究一下CSS是如何实现三角形的。 假定有一个盒子(div)，给定宽高分别为 阅读全文

摘要： 经常在做网页中遇到需要展示一组或几组图片的情况，于是图片的无缝滚动效果成为比较常见的效果之一。往往我们时间有限，所以常求助于jQuery的图片滚动插件。前段时间，我觉得仅仅需要一个这样的特效而把整个jQuery库引入项目中实在太耗费性能，于是自己动手做了一个，下面是简陋的雏形： 原理比较简单，就是在页面初始化时将首尾的图片各复制一个分别放至结尾和开头，如下图所示：1、2、3代表3组滚动的图片，1号结点为起始位置，当点击右按钮时，图片从1号结点向右滚动，直到clone3结点，结束后立即将位置从clone3定位到3号结点；再点击向右按钮时，就从3号结点滚动到2号结点，这样看起来就实现了无缝滚动，点 阅读全文