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 ...
随机推荐
- Volley框架的使用
所谓Volley,它是2013年Google I/O上发布的一款网络框架,基于Android平台,能使网络通信更快,更简单,更健全. 它的优点:(1)默认Android2.3及以上基于HttpURLC ...
- 关于javascript中的===和==
=是赋值符号,==是等于,===是严格等于. 对于等号两边的数值,如果类型不相同会先转换类型再比较,===则不会转换类型. 例如3和“3”在==比较下true,在===下是false, null和un ...
- 转载--JAVA读取文件最佳实践
1. 前言 Java应用中很常见的一个问题,如何读取jar/war包内和所在路径的配置文件,不同的人根据不同的实践总结出了不同的方案,但其他人应用却会因为环境等的差异发现各种问题,本文则从原理上解释 ...
- C#中this在扩展方法的应用
给类添加扩展方法 1.定义一个类Service public class Service { private string _name; public string Name { get { retu ...
- Linux线程-pthread_kill
该函数可以用于向指定的线程发送信号: int pthread_kill(pthread_t threadId,int signal); 如果线程内不对信号进行处理,则调用默认的处理程式,如SIGQUI ...
- HDU 1568 double 快速幂
Fibonacci Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- cornerstone忽略显示.DS_Store文件
在MacOS上使用svn工具时,经常发现变化列表里出现一堆的?文件,.DS_Store,对有强迫症的人来说很郁闷.处理起来很简单,就是在svn的配置里忽略这个文件.#ue ~/.subversion/ ...
- 初次学习c语言
#include<stdio.h> main(){ int o,p,q; scanf("%d%d",&o,&p); q=o+p; printf ...
- 第一次装TFS的曲折经历
公司服务器之前TFS没装上,用的svn,实在忍受不了了,作为一个.net程序员怎么能用svn的,说动手就动手. 服务器的数据库是 SqlServer2008R2 本来想装TFS2013,后来试了一下, ...
- CSS值得关注的那些事？
CSS值得关注的那些事? CSS层叠样式表的出现,使得样式表现层与HTML结构层分离,CSS样式与HTML结构层次清晰,一目了然.给我们前端开发者带来诸多的便利,然而,在实际前端开发中,还是有相当多的 ...