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 ...
随机推荐
- Jmeter—1 安装
1 Jmeter运行需要java环境.首先需要安装JDK. 图标是这样的: 2 下载apache-jmeter包. jmeter官网:http://jmeter.apache.org/ 3 解压 ...
- 3、通过挂在系统光盘搭建本地yum仓库的方法
1. mkdir xxx #新建文件夹 (新建一个挂载需要的文件夹) .配置本地yum源(挂载光盘) .进入 yum.repos.d .ls (查看当前文件夹全部的文件) 并 mv 修改 除Med ...
- iOS学习之NSPredictae及搜索框的实现
NSPredicate Predicate 即谓词逻辑, Cocoa框架中的NSPredicate用于查询,作用是从数据堆中根据条件进行筛选.计算谓词之后返回的结果永远为BOOL类型的值,当程序使用谓 ...
- How do I uninstall Java 7 and later versions on my Mac?
How do I uninstall Java 7 and later versions on my Mac? http://www.java.com/en/download/help/mac_uni ...
- 如何获取WIN10 Program Files 文件夹下的文件操作权限
找到指定文件,右键-属性-找到指定用户-授"完全控制权限“--更改文件--恢复默认权限.
- Python12期培训班-day1-三级菜单代码分享
#!/usr/bin/env python3 import sys import os zonecode = { '广东省': {'广州市':['越秀区','海珠区','荔湾区','天河区'], '深 ...
- 关于 xcode5 真机调试 的 no matching provisioning profiles found
产生原因:在xcode5里面不一定是因为你的真机证书有问题,有可能是因为,项目本来在别的组里有会出现此bug 如果你出现上图的错误,只需要在此项目的***.xcodeproj 文件,然后右键选择“显示 ...
- Selenium 中 cssSelector定位
一.为什么使用cssSelector定位元素? 目前针对一些常规定位方式有:By.id.By.name.By.LinkTest(针对<a>标签).By.ClassName 针对不太好定位的 ...
- http和htpps
http(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议. HTTPS 基于安全套接字层的超文本传输协议 或者是 HTTP over SSL **HTTP 和 HTTPS相同 ...
- 【NOIP2012】借教室
因为本校OJ+1s所以用线段树水过了,不去syz的水库水这题还真不知道线段树过不了= = 原题: 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要 向学校申请借教室.教室的 ...