仿flash运动框架

github地址: [https://github.com/linxd5/pictureShow] PS: 新建一个github项目很简单,只要new一个repo,后面按照提示做就可以了~ 项目思路: 1. 左右按钮巧妙的应用了opacity属性,并使用两个div来简化计算: 2. 大图切换使用了z-index属性: 3. 小图切换思路同无缝滚动:…

这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的.这个源码也简单,理解其原理,自己敲即便也就熟悉了. 用的时候,将下列代码放在一个js文件,如move.js.然后使用的时候引入该文件.如<script src="move.js"></script> function getStyle(obj,name){ //获取对象的样式 if(obj.currentStyle){ //…

第61天：json遍历和封装运动框架（多个属性）

一.json 遍历 for in 关键字 for ( 变量 in 对象) { 执行语句; } 例如: var json = {width:200,height:300,left:50}console.log(json.width);for(var k in json){ console.log(k); // k 遍历的是json 可以得到的是属性 console.log(json[k]); // json[k] 得到是属性的值} 二.回调函数等动画执…

无限循环轮播图之运动框架（原生JS）

封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function move(obj,json,options){ var options=options || {}; var duration=options.duration || 800; var easing…

JS 阶段练习~ 仿flash的图片轮换效果

结合了所学的简单运动框架~ 做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName IE低版的兼容性 2.DOM不够严谨 … 各种跳出和bug 3.实现方法麻烦~ 代码完全与精简不挨边…… -------------------------解决方法: - - 目前只能做到这样,慢慢学,慢慢进步了~ -------------------------要实现功能如下: 1.鼠标移入大图,左右按钮显示(控制opaicty) 2.当…

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

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

javascript运动框架

下面这个一个运动框架可以控制元素在一个属性上的运动,同时,可以调用回调函数. /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 */ function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj, false)[attr]; } } /* 获取元素某个属性的值 @obj: 对象 @attr: 属性值 @i…

js运动框架之掉落的扑克牌（重心、弹起效果）

玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉落下来,之后弹起,运动的速度会逐渐减慢,直到越出屏幕后,全部纸牌消失,在右上角会重新出现一张纸牌,继续动作,一再往复. 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q…

js运动框架完成块的宽高透明度及颜色的渐变

了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色与目标颜色进行对比,实现渐变的过程. 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title…

带无缝滚动的轮播图（含JS运动框架）

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: //获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }…

js运动框架之一条乱跑的虫子

克隆与运动框架的联合应用效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动使用的是js运动框架的思想,并通过round()函数调用自身实现不停移动的:而"尾巴"的产生则是通过每隔20ms克隆一次元素块,并在一秒后删除完成的. 具体代码如下: <!DOCTYPE html> <html> <head lang="en&quo…

JavaScript的运动框架学习总结

一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 7. 实现完美运动框架二.内容 1. 入门案例——实现匀速运动 ①. 要求:只要简单的实现传入的对象和运动的最终目标,便能操作该对象的left属性的大小匀速的变化到目标大小. ②. 具体代码: <!DOCTYPE html> <html lang="en"> &l…

Javascript之运动框架2

运动框架2与运动框架1的不同之处在于,运动框架2是框架1的升级版,首先完善了传入值,改为move(obj,json,options),在options里面,可以选择传入或者不传入时间,运动形式,以及函数.其次,增加了多种运动形式,即引入了tween.js,其里面包含了多种运动形式,具体如下: tweens.js: 在move.js里直接引进用即可: /** * Created by 潘泽慧 on 2016/11/7. *///t 当前时间//b 初始值//c 总距离//d 总时间//var cu…

js运动框架 step by step

开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); var timer = null; btn.onclick = function() { clearInterval(timer); // 避免定时器叠加 var timer = setInterval(fun…

JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>任意值的运动框架</title> <style> div { float: left; width: 200px; height: 200px; margin: 20px; background-color: yellow; border: 1p…

JavaScript “完美运动框架”

/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height:200},fnEnd) * obj: 运动物体 * json: 运动属性和运动目标值的json集合,{'width':200,'height':200} * sv: 运动的速度,speed-value,值越小速度越大 * fnEnd: 运动结束后的回调函数 */ function move(obj…

JS完美运动框架

这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动版本:V1.0 兼容性:Chrome,FF,IE8+ (opera没测) 备注:参考了智能社blur老师的代码 */ /*-------------------------------------------------------- 功能: 获取某个节点下的带有某个class的所有节点输入: oParent:要获取的class元素的父级节点 sClas…

纯js写“运动”框架

所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target) { // body... if (element.currentStyle) { return element.currentStyle[target]; }else{ return window.getComputedStyle(element, null)[target]; } } //填充…

javascript中的动画的实现以及运动框架的编写（1）

大家知道js可以做出好多很漂亮的动画,看上去很神奇,其实原理很简单,今天就讨论一下js动画的实现以及如何编写可以反复重用的运动框架. 首先做一个简单的例子,我这里有一个长50px 宽20px的长条形div 现在我想让鼠标停在上面的时候这个长条变为长1000px宽20px的超级长条,然后当鼠标移开的时候再变回50px长. 下面看一下我写的代码: <!doctype html> <html> <head> <meta charset="utf-8"…

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

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

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

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

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

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

javascript每日一练（十二）——运动框架

运动框架可以实现多物体任意值运动例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3;…

JavaScript 运动框架 Step by step（转）

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = f…

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r…

iOS 即时通讯 + 仿微信聊天框架 + 源码

这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感觉要跑题了,脑海中怎么波涛翻滚的样子.不好,才开头了两句,~~(>_<)~~忍住!!说回正题,我知道的即时通讯有用 CocoaAsyncSocket 还有 XMPPFramework 实现的,当然也有现在也有大部分接入环信的.有些东西掩盖不住的,可能可能许多同行和我一样,感觉你知道的越来越多,就越…

javascript运动框架（三）

迟到了好几天,不好意思哈!继续来优化一下javascript运动框架的代码.之前的代码存在bug,当重复点击时速度会加快,那么怎么解决这个bug呢? 现在我们就来解决一下,其实很简单,在开始运动时,关闭已有计时器. 思考一下:如何让很多物体同时动,而且他们至今不会互相影响呢. 1.单独给每个物体加一个计时器 2.当鼠标移进去宽度增长至800,当鼠标移出时,宽度慢慢减小至原本宽度具体代码如下:<script type="text/javascript"> window.on…

JS运动框架的封装过程(一)

给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒第二个,多久时间走一次?30毫秒第三个,走的总次数:1000/30 第四个,距离:B-A 第五个,步长:距离/总次数运动框架的实现思路:就是在一定的时间段里面改变left.top.width.height,到达目的地之后停止. 可以先思考一下,在页面里如何让div动起来? 思考如下:1.设置div的时候为绝对定位,因为只有绝对定位之后,…

原生JS封装animate运动框架

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; border-ra…

[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…