爪哇岛描述语言实现动态侧边栏

总的来说就是利用鼠标悬停onmouseover和鼠标移除onmouseout这两个时间来完成的。

首先是超文本标记语言结构

bodydiv id='div1'span侧边栏/span/div/body然后是钢性铸铁的样式：

# div1 { width:150px高度：200 px背景技术： # 999999;位置：绝对；左侧：-150像素；} span { width:20px高度：70 px线高：23 px背景# 09C位置：绝对；右侧：-20px；top:70px}默认的样式侧边栏是隐藏起来的如图：

当鼠标移入以后如图：

下面是完整代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style type=' text/CSS ' # div 1 { width :150 px；高度：200 px背景技术： # 999999;位置：绝对；左侧：-150像素；} span { width:20px高度：70 px线高：23 px背景# 09C位置：绝对；右：-20px；top:70px}/style脚本窗口。onload=function(){ var odiv=document。getelementbyid(' div 1 ')；奥迪夫。onmouseover=function(){ start move(0，10)；//第一个参数为向左划分属性的目标值第二个为每次移动多少像素} odiv。onmouseout=function(){ start move(-150，-10)；} } var计时器=null函数startmove(目标，速度){ var odiv=document。getelementbyid(' div 1 ')；clearInterval(计时器);timer=SetInterval(function(){ if(odiv。offsetleft==target){ clearInterval(计时器)；} else { odiv。风格。左=odiv。偏移速度“px”；} }，30)}/脚本/头dydiv id=' div 1 ' span侧边栏/span/div/body/html感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！