3个div 宽度移入移出时变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div变宽</title>
<style>
div{
width: 100px;height: 60px; background-color: green;
margin-top: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
var i=0;
for(i=0;i<aDiv.length;i++){
aDiv[i].timer=null; //每个div有一个定时器，避免同时用一个div冲突
aDiv[i].onmouseover=function(){
fadeon(this,200);
}
aDiv[i].onmouseout=function(){
fadeon(this,100);
}
}
}
function fadeon(obj,itarget){
clearInterval(obj.timer); //obj对应调用函数中的this
obj.timer=setInterval(function(){
var oSpeed=(itarget-obj.offsetWidth)/8;
oSpeed=oSpeed>0?Math.ceil(oSpeed):Math.floor(oSpeed);
if (obj.offsetWidth==itarget) {
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+oSpeed+'px';
}
},30)
document.title=obj.offsetWidth;
}
</script>
</body>
</html>
3个div 宽度移入移出时变化的更多相关文章
- html中如何实现表格移入移出时背景颜色改变？（两种方法）
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...
- div宽度随屏幕大小变化
题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...
- CSS3 - 鼠标移入移出时改变样式
1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- CSS如何让DIV的宽度随内容的变化
[css]CSS如何让DIV的宽度随内容的变化 让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inlin ...
- div展现与收起效果（鼠标移入移出）
效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- python3.x IDLE学习及基础语法（学习head first python 第一章）
1. 使用Tab键可以显示IDLE提供的一些建议: 2. Alt-N 移至下一个代码语句,Alt-P 移至上一个代码语句: 3. 列表类似于C++里的链表,有插入函数insert(位置,数据项),在列 ...
- instanceof关键字
instanceof是Java.php的一个二元操作符(运算符),和==.>.<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是判断其左边对象是否为其右边类的实 ...
- linux下的gcc编译器
1. 编译单个文件成可执行文件 gcc hello.c 生成默认的可执行文件a.out 2. 编译单个文件为指定名字的可执行文件,使用-o选项指定文件名字 gcc -o test main.c 生成文 ...
- Android签名机制
Android APK 签名比对 发布过Android应用的朋友们应该都知道,Android APK的发布是需要签名的.签名机制在Android应用和框架中有着十分重要的作用. 例如,Android系 ...
- iOS富文本
背景:前些天突然想做一个笔记本功能,一开始,觉得挺简单的呀,一个UITextView,网络缓存也不干了,直接本地NSUserDefault存储,然后完事了,美工,弄几张好看的图片,加几个动画,也就这样 ...
- uva11292 Dragon of Loowater
水题,排序遍历即可 #include<iostream> #include<cstdio> #include<algorithm> using namespace ...
- Ninject之旅之十一：Ninject动态工厂(附程序下载)
摘要 如果我们已经知道了一个类所有的依赖项,在我们只需要依赖项的一个实例的场景中,在类的构造函数中引入一系列的依赖项是容易的.但是有些情况,我们需要在一个类里创建依赖项的多个实例,这时候Ninject ...
- Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697
详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...
- linux 下 TeXmacs 作 Mathematica 10 的前端
TeXmacs可以作很多种数学软件的前端,比如maxima,octave,R等.甚至还可以作mathematica的前端.TeXmacs的mathematica 插件比较老,默认条件下无法运行math ...
- JENKINS基础使用
JENKINS总结 修改时间 修改内容 修改人 2016.3.12 创建 刘永志 2016.5.22 添加tomcat+jenkins 刘永志 2016.6.14 添加tomcat找不到ant解决方案 ...