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/ ...
随机推荐
- iPad 控件 UIPopoverPresentationController 使用 iPhone可用
UIPopoverController 在iOS9之后被废弃了,,, iOS8 新控件UIPopoverPresentationController可运用在iphone和iPad上,使用基本同 UIP ...
- 13，SFDC 管理员篇 - 移动客户端
1, 自定义导航 设置导航显示内容 Setup | Mobile Administration | Salesforce Navigation 1, 可以添加和删除在mobile中显示的内容 ...
- nodeJs 模块cookie-session api文档中文翻译，偶自己翻译的
原文英文文档链接点击 说明 简单的 基于cookie的 session中间件 安装 它是一个可以用npm注册的node模块,可以通过npm install命令安装 npm install cookie ...
- spring IOC核心原理
下面来了解一下Spring到底是怎么运行的. public static void main(String[] args) { ApplicationContext context = new Fil ...
- Web前端安全问题
1.XXS跨站脚本攻击(Cross Site Scripting) 1)通过<script> 举个例子:通过QQ群,或者通过群发垃圾邮件,来让其他人点击这个地址: book.com/sea ...
- python基础知识---迭代器、生成器、装饰器
一.迭代器 二.生成器 http://www.cnblogs.com/huxi/archive/2011/07/14/2106863.html def func(): #定义生成器,和普通函数的区别是 ...
- AWS多个EIP的解决方案
前言 前段时间,公司部署在AWS上的一台EC2突然访问不了了,后来经过检测发现是被GWF给墙了,可能是我们经常拿这台服务器来FQ导致的,幸好这台服务器的客户都是在香港的,被墙了对客户没有什么影响,但是 ...
- HTTP权威协议笔记-4.连接管理
4.1 TCP连接 TCP为HTTP提供了一条可靠的比特传输管道,按顺序正确的传输,步骤如下: 浏览器解析主机名. 查询这个主机名的IP地址(DNS) 获得端口号. 浏览器对服务器该端口号发起连接. ...
- web聊天室
开发一个web聊天室 功能需求: 1.用户可以与好友一对一聊天 2.群聊 所需知识 1.Django 2.bootstrap 3.CSS 4.ajax 涉及到的新的知识点 1.如果设计表结构的时候,一 ...
- GPU深度发掘(一)::GPGPU数学基础教程
作者:Dominik Göddeke 译者:华文广 Contents 介绍 准备条件 硬件设备要求 软件设备要求 两者选择 初始化OpenGL GLUT OpenGL ...