Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理

等待已久的可变大,变宽等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.height=oDiv.style[‘height’] 那么,我们把要运动的属性作为一个参数,传入到之前函数中即可. 透明度呢,需要单独处理,判断下即可. 直接上代码. <style type="text/css"> div { width: 200px; height: 200…

Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

所谓链式运动,就是一环扣一环.我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动. 这个链式运动框架就是用来处理这些问题的. 我们先来看下之前的运动框架,以下是Javascript 代码 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } func…

Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

大家一听这名字就知道,有了这套框架网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov…

Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解接下来讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left:; /*600 初始值*/ } #div2 { width: 1px; height: 300px; position: abs…

Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; height: 50px; background: red; margin: 10px; } </style> <body> <div></div> <div></div> <div></div> </body>…

Javascript 运动中Offset的bug——逐行分析代码，让你轻松了解运动的原理

我们先来看看这个bug 是怎么产生的. <style type="text/css"> #div1 { width: 200px; height: 200px; background: red; } </style> <body> <div id="div1"> </div> </body> 以下是用来测试的Javascript代码 ,目的是让div慢慢变窄. <script type=…

Javascript 匀速运动停止条件——逐行分析代码，让你轻松了解运动的原理

我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 <style type="text/css"> #div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left: 600px; } #div2 { width: 1px; height: 300px; position: absolute; left:…

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题. 实际上在我们开发中,页面上会有许多的元素组成,不可能就一个div…

Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <div id="div2"> <div id="div1"> </div> </div> <style type="text/css"> #div1 { width: 100px; height: 1…

Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { v…

Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理

拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位置-物体位置的差值就是那个距离是吧.那这个斜线就是横线和竖线组成的. 我们距离看下程序怎么做. <div id="div1"> </div> 实际上他改的就是某个div 的left top ,那他就动起来了. 那样式中肯定要有绝对定位是吧. <style t…

【repost】JavaScript完美运动框架的进阶之旅

运动框架的实现思路运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动. (一)匀速运动速度动画运动基础思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setI…

js运动：多div变宽、二级菜单

定时器及运动函数. 多div变宽:  <!DOCTYPE html> <html lang="en"> <head> <meta charset=…

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

初识博客初写博客,先在设置里选了个喜欢的模板第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾. 设置里…

CSS3动画@keyframes图片变大变小颜色变化

在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: <body> <div class="color"></div> <img class="change" src="img/dongtai.png"/> </body> 原理是这样的:bod…

JS多物体运动案例：变宽、变高

任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px,移出该矩形,高度逐渐恢复至初始值. 效果图: <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="v…

latex数字加粗后变宽

latex的数字默认用的是Times New Roman字体,这个字体有个不优美之处就是加粗后会变宽,如下图所示: 平常倒是也无所谓.昨天在把实验数据整理进表格时,为了凸显每个数据集上各个实验方法的优劣,我把最好的方法的结果加粗显示,结果本来工工整整的表格就变的参差不齐了.后来查了不少资料,也只找到一个不甚漂亮的补救方法,就是在文章开头添上下面两句声明: \DeclareFixedFont{\myfont}{OT1}{ptm}{m}{n}{11pt} \DeclareFixedFont{\myf…

[转载]JavaScript 中小数和大整数的精度丢失

标题: JavaScript 中小数和大整数的精度丢失作者: Demon链接: http://demon.tw/copy-paste/javascript-precision.html版权: 本博客的所有文章,都遵守“署名-非商业性使用-相同方式共享 2.5 中国大陆”协议条款. 先来看两个问题: 0.1 + 0.2 == 0.3; // false 9999999999999999 == 10000000000000000; // true 第一个问题是小数的精度问题,在业界不少博客里已有讨论…

（42）JS运动之多物体框架--多个div变宽

假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXXX会跟border冲突导致不能得到想要的结果.在这里能够用getStyle()函数取代. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getC…