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 ...
随机推荐
- C++二进制文件中读写bitset
这个比较简单,直接上代码: bitset< > *b = >(); bitset< > *c = >(); ofstream out("I:\\test. ...
- jQueryMobile控件之展开与合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS求职之OC面试题
1.Objective-C的类可以多重继承么?可以采用多个协议么? 答:不可以多重继承,可以采用多个协议. 2.#import和#include的区别是什么?#import<> 跟 #im ...
- 详解Android功耗分析工具Power Tutor的使用
简介: PowerTutor 是由美国密歇根大学在谷歌的指导下开发的.它是用来展示google智能手机中主要组件或应用功耗的一种应用程序.例如,CPU,网络链接,LCD显示屏,GPS等.它允许开发者很 ...
- 【技术无关】GPS转北斗卫星定位 系统调研
前言 陆地交通运输是当前GPS卫星定位系统最大的应用领域,我省自08年实施卫星定位系统建设以来,在车辆监控和调度方面发挥了突出的作用:主要功能包括车辆跟踪.线路规划和导航.信息查询.交通指挥.紧急援助 ...
- mm/mmap.c
/* * linux/mm/mmap.c * * Written by obz. */#include <linux/stat.h>#include <linux/sched. ...
- error ：ld returned 1 exit status
额,被调用函数的名称与调用函数的名称写的不一致啊: 所以会出现 ld returned 1 exist status 好了, 问题解决了.
- 多媒体音频（audio）
随着计算机技术的发展,特别是海量存储设备和大容量内存在PC机上的实现,对音频媒体进行数字化处理便成为可能.数字化处理的核心是对音频信息的采样,通过对采集到的样本进行加工,达成各种效果,这是音频媒体数字 ...
- python 元组操作
关于元组的常用操作,请参考:http://www.runoob.com/python/python-tuples.html 元组的元素不可修改 ,元组的元素的元素可修改 count(self,valu ...
- 论文笔记之：Hybrid computing using a neural network with dynamic external memory
Hybrid computing using a neural network with dynamic external memory Nature 2016 原文链接:http://www.na ...