js运动应用之运动框架

<style>div{width:200px;height:200px;background-Color:yellow;float:left;font-size:14px;}
</style>

<script type="text/javascript">window.onload=function(){var oDiv1=document.getElementById('div1');//当鼠标移入height变为400px；oDiv1.onmouseover=function(){startMove(this,'height',400);}//当鼠标移出height回到200px（arrt参数在这里的值就是height）；oDiv1.onmouseout=function(){startMove(this,'height',200);}var oDiv2=document.getElementById('div2');//当鼠标移入width变为400px；oDiv2.onmouseover=function(){startMove(this,'width',400);}//当鼠标移出width回到200px（arrt参数在这里的值就是width）；oDiv2.onmouseout=function(){startMove(this,'width',200);}var oDiv3=document.getElementById('div3');//当鼠标移入fontSize变为400px；oDiv2.onmouseover=function(){startMove(this,'fontSize',50);}//当鼠标移出fontSize回到200px（arrt参数在这里的值就是fontSize）；oDiv2.onmouseout=function(){startMove(this,'fontSize',14);}}//取非行间样式(obj为对象，name为值)function getStyle(obj,name){if(obj,currentStyle){//针对IE浏览器取非行间样式return obj.currentStyle;}else{//针对IE外其他浏览器去非行间样式return getComputedStyle(obj,null)[name];}}//运动框架，为了让一个运动框架适用于多种运动，给定一个参数arrt，用哪个就赋哪些值！functio startMove(obj,arrt,target){//给定一个obj对象，关闭单个div定时器(互不干扰)clearInterval(obj.timer);obj.timer=seaInterval(function(){//取出非行间样式，减少代码量；var curr=parsent(getStyle(obj,arrt));var speed=(target-curr)/6;//向上取整speed=speed>0?Math.ceil(speed):Math.floor(speed);//如果到达目标点if(curr==target){//关闭计时器clearInterval(obj.timer);}else{//将结果加载到对应的样式上；obj.style[arrt]=curr+speed+'px';}},30)}
</script>

<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">字体变大</div>

js运动应用之运动框架相关推荐

【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
论文阅读——用于脑机接口的运动意图和运动想象脑电数据分析研究
最近在看脑电数据处理相关的论文,为了更加系统的学习,现在特别做一个论文阅读总结专栏,总结每篇经典论文中的核心点. 用于脑机接口的运动意图和运动想象脑电数据分析研究--庞雅杰(哈尔滨工业大学) 摘要: ...
php接入微信运动计步功能,运动计步，微信运动究竟靠不靠谱？
很多朋友喜欢用微信运动,记录自己每天的运动步数,希望通过每天运动计步,达到减肥健身的效果.那么,微信运动到底靠谱吗 ? 能起到锻炼的效果吗 ? 在搞清这个问题之前,我们需要熟悉几个概念. 1.微信计步 ...
java中刷新页面的js,[Java教程]js页面刷新之实现框架内外刷新（整体、局部）
[Java教程]js页面刷新之实现框架内外刷新(整体.局部) 0 2016-10-12 12:00:56 这次总结的是框架刷新: 框架内外的按钮均可以定义网页重定向, 框架内部页面的按钮可以实现局部刷 ...
什么是Vue.js？||为什么要学习流行框架||框架和库的区别？||MVC和MVVM的关系图解
什么是Vue.js? Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于W ...
u3d 逐个点运动，路径运动。 U3d one by one, path motion.
u3d 逐个点运动,路径运动. U3d one by one, path motion. 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-m ...
Node.js之十大Web框架
Node.js之十大Web框架之前接触过Node.js是因为好奇大前端越来越能干了,连我后台的饭碗都要抢了,太嚣张了,于是我想打压打压它,然后就这样接触它了. 再到后来是因为Settings-Syn ...
下载keep运动软件_keep运动软件下载
keep运动软件下载,keep减肥软件是一款可以为你制定.提供各种健身课程的掌上健身助教,不管你是工作太忙没时间.还是健身房不知道如何正确健身都可以选择keep运动软件开始你的健身之路. keep如何 ...
如何给小朋友解释单摆运动_单摆运动
单摆是继弹簧振子之后又一个典型的简谐运动,在单摆摆动的过程中,具有极强的对称性和周期性,下面将从不同的侧面谈谈单摆的特点及其应用.作者:翁菊华作者单位:浙江省瑞安市第四中学刊名:高中数理化英文刊 ...

js运动应用之运动框架

js运动应用之运动框架

js运动应用之运动框架相关推荐

最新文章

热门文章