js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽
介绍了那么多运动，這次一套代码实现所有运动
1.html代码和css代码，只是定义一个div
<style>
div{
width:200px;
height:200px;
margin:20px;
float:left;
background:yellow;
border:10px solid black;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<body>
<div id="div1"> </div> </body>
2.js代码部分
<script>
window.onload=function()
{
var div=document.getElementById('div1');
div.onmouseover=function()
{
startMove(this,'height',1000);
}
div.onmouseout=function()
{
startMove(this,'height',50);
}
};
function getStyle(obj,name) //兼容性问题，修改非行间的css
{
if (obj.currentStyle)//chrome和firefox
{
return obj.currentStyle[name];
}
else//ie浏览器
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur=0;
if (attr=="opacity") //判断传入的参数是不是透明度
{
cur=parseFloat(getStyle(obj,attr))*100; //强制转换为浮点数
}
else //如果不是透明度，执行這句
{
cur=parseInt(getStyle(obj, attr)); //返回传入要修改的属性的值
}
var speed=(iTarget-cur)/100 ; //设置速度
speed=speed>0?Math.ceil(speed):Math.floor(speed); //取上下限 if(cur==iTarget) //当等于要实现的值时停止
{
clearInterval(obj.timer);
}
else
{
if (attr=='opacity') //如果是透明度，兼容性。写两句
{
obj.style.filter='alpha(opcity:'+(cur+speed)+')'; //chrome和firefox
obj.style.opacity=(cur+speed)+'px'; //ie
}
else //要修改的是其他，直接修改他的值
{
obj.style[attr]=cur+speed+'px';
}
}
},
30)
}
</script>
js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽的更多相关文章
- js实现图片的淡入淡出
思想: 其实是运动的一种,就是当鼠标移入div中时,将div的透明度变大, 当鼠标移动出来的时候透明度变回原来. 你可以尝试写一下,不会再看看代码 <style> #div1{ width ...
- （42）JS运动之多物体框架--多个div变宽
假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...
- 淡入淡出效果模板 js
html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...
- JS实现图片的淡入和淡出的两种方法，如有不足，还请前辈多多指导^-^~
今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~ 总结如下: 第一种方法: 个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer ...
- JS弹出窗口代码大全(详细整理)
1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...
- Color.js增强你对颜色的控制
往逝之因 不要低头,皇冠会掉... 可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...
- 一套代码小程序&Web&Native运行的探索07——mpvue简单调研
前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...
- 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...
- 一套代码小程序&Web&Native运行的探索05——snabbdom
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...
随机推荐
- 黑马程序员——【Java高新技术】——JDK1.5新特性：静态导入、可变参数、增强型for循环、自动装箱拆箱、枚举
---------- android培训.java培训.期待与您交流! ---------- 一.静态导入 1.import和import static区别: (1)import 是导入一个类或某个包 ...
- HDU 2276
http://acm.hdu.edu.cn/showproblem.php?pid=2276 矩阵乘法可以解决的一类灯泡开关问题 /* 转移关系为 now left now* 1 0 1 1 1 0 ...
- dede织梦后台如何修改？如何增加删除菜单？(
织梦后台的模板存放在dede/templets下面, 登陆首页模板login.htm, 进入首页模板index_body.htm, 左侧菜单模板index_menu2.htm. 修改左侧菜单dede/ ...
- js事件处理机制
一.事件处理程序 a. DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=functio ...
- web安全之http协议
http协议 全称是超文本传输协议,是web的核心传输机制,也是服务端和客户端之间交换url的首选协议. url url全称是统一资源定器(统一资源标识符) 顾名思义 每一条格式正确且规范,但url都 ...
- XML实体注入漏洞
XML实体注入漏洞 测试代码1: 新建xmlget.php,复制下面代码 <?php $xml=$_GET['xml']; $data = simplexml_load_string($xml) ...
- hiho一下122周 后缀数组三·重复旋律
后缀数组三·重复旋律3 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列.小Hi ...
- Spring源码学习之：ClassLoader学习（3）
ClassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoader要求这个类,然后由ClassLoader返回 这个类的class对象. 1.1 几个相关概念Clas ...
- 入口点函数的19种消息，AcRxArxApp只处理16种。
AcRx::AppMsgCode一共有19种消息. 但由IMPLEMENT_ARX_ENTRYPOINT宏实现的App类,只处理了16种消息. 缺: kSuspendMsg = 16, kIni ...
- R中，定义一个长度为0的向量
定义一个长度为0的向量 > x<-c()> length(x)[1] 0 修改该向量的类型 > class(x)="numeric"> class(x ...