点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
效果:
思路:
首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度、长度、颜色、字体大小、透明度等,都可以直接传入参数然后进行运动,简单的说是利用json字符串把数据拼接起来,然后进行传参,参数传入进去到函数以后,根据参数的对象,还有属性,还有函数方法,然后再利用setInterval进行缓冲运动,最后判断运动什么时候结束。有一点要注意的是先用getStyle方法获取非行间样式!!!
代码:
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
div
{
width: 100px;
height: 100px;
background: #00FF00;
left: ;
position: absolute;
font-size: ;
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload = function () {
var divOn = document.getElementById('div1');
divOn.timer = null;
divOn.onmouseover = function () {
move(divOn, { width: , height: , fontSize: , opacity: });
};
divOn.onmouseout = function () {
move(divOn, { opacity: , height: , fontSize: , width: });
};
}
//-----以下为多功能缓冲框架部分---------------------------------------------------------------------------------------------------------
//获取非行间样式
function getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
else {
return getComputedStyle(ojb, false)[name];
}
}
//缓冲运动json的应用
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj是对象,Json是对象的属性, fnName是函数
clearInterval(obj.timer); //关闭之前的计时器
obj.timer = setInterval(function () {
var timeStop = true; //记录属性是否都已经执行完成
for (var attr in json) { //遍历json中的数据
var oGetStyle = ;
if (attr == 'opacity') { //判断透明度
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * ); //透明度取整,然后转换完后赋值
}
else {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / ; //求速度
speed = speed > ? Math.ceil(speed) : Math.floor(speed); //进位取整
// if (oGetStyle == json[attr]) { //如果到达,则关闭计时器
// clearInterval(obj.timer);
// if (fnName) { //当关闭计时器后要执行的函数
// fnName();
// }
// }
// else {
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //透明度
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')'; //给透明度赋值
obj.style.opacity = (oGetStyle + speed) / ;
}
else {
obj.style[attr] = oGetStyle + speed + 'px'; //移动div
}
// }
}
if (timeStop) { //如果所有属性都已经执行完成,那么就关闭计时器
clearInterval(obj.timer);
if (fnName) { //当关闭计时器后要执行的函数
fnName();
}
}
}, )
}
//-----------------------------------------------------------------------------------------------------------------------
</script>
</head>
<body>
<div id="div1">
青苹果
</div>
</body>
点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)的更多相关文章
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 点滴积累【JS】---JQuery实现条形统计图,适用于选择题等统计
效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...
- 【翻译】要理解Ext JS 5小工具
原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...
- Js的小技巧
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- amazeui中的js插件有哪些(详解功能)
amazeui中的js插件有哪些(详解功能) 一.总结 一句话总结: 二.amazeui中的js插件有哪些 1.UI 增强 警告框Alert 按钮交互Button 折叠面板Collapse 下拉组件D ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
随机推荐
- [漏洞检测]Proxpy Web Scan设计与实现(未完待续)
Proxpy Web Scan设计与实现 1.简介: Proxpy Web Scan是基于开源的python漏洞扫描框架wapiti改造的web漏洞扫描器,其主要解决以下几个问题而生 ...
- 读懂MySQL执行计划
原文:https://mp.weixin.qq.com/s/-BlLvBKcF-yalELY7XkqaQ 前言 在之前的面试过程中,问到执行计划,有很多童鞋不知道是什么?甚至将执行计划与执行时间认为是 ...
- Android内存优化11 内存泄漏常见情况2 内部类泄漏
线程持久化 Java中的Thread有一个特点就是她们都是直接被GC Root所引用,也就是说Dalvik虚拟机对所有被激活状态的线程都是持有强引用,导致GC永远都无法回收掉这些线程对象,除非线程被手 ...
- 一键建立zookeeper集群
使用yaml文件的好处,通过service name来进行pod间的服务发现, 集群配置dns. [root@k8s-master ~]# cat zookeeper-cluster.yaml api ...
- 网络管理命令list
网络管理 axel 多线程下载工具 tcpreplay 将PCAP包重新发送,用于性能或者功能测试 hping3 测试网络及主机的安全 ssh-copy-id 把本地的ssh公钥文件安装到远程主机对应 ...
- JSON-学习总结
JSON 语法规则 1. JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 2. JSON 值可以是: 数字(整数或浮 ...
- scala类型系统 type关键字
和c里的type有点像. scala里的类型,除了在定义class,trait,object时会产生类型,还可以通过type关键字来声明类型. type相当于声明一个类型别名: scala> t ...
- java实现折半排序算法
折半插入排序法,又称二分插入排序法,是直接插入排序法的改良版,也需要执行i-1趟插入,不同之处在于,第i趟插入,先找出第i+1个元素应该插入的的位置,假定前i个数据是已经处于有序状态. 折半插入排序( ...
- 在笛卡尔坐标系上描绘函数 y=4x^2-2/4x-3
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- ASP.NET MVC扩展之HtmlHelper辅助方法
什么是HtmlHelper辅助方法? 其实就是HtmlHelper类的扩展方法,如下所示: namespace System.Web.Mvc.Html { public static class Fo ...