JavaScrip——练习(做悬浮框再进一步:悬浮窗后缀悬浮窗——用this.className)
2015-12-28 11:18
746 查看
对悬浮窗进一步改进:
用this.className
可以省略script
结果是一样的:
默认时
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/4f2604e46284ca1cd37812d08b717f6e.png)
鼠标在新闻动态上面时
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/d9ed99eda9c04d60fc7a3cbbe5e09859.png)
鼠标在体育上面时:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/097d45236b83dbcf3fed3de339abb4d1.png)
鼠标在娱乐上面时:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/f1fa6d7c757376721c5a074add829292.png)
鼠标在国际新闻上面时:
用this.className
可以省略script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px; padding:0px; } .aa { background-color:#FF0; height: 40px; width: 100px; top: 60px; left: 100px; position: absolute; overflow: hidden; text-align: center; line-height:40px; } .aaa { background-color:red; height: 40px; width: 100px; top: 60px; left: 100px; position: absolute; overflow:visible; text-align: center; line-height:40px; } #bb{ height:120px; width:100px; top:40px; left:0px; position:absolute; } table{ height:120px; width:100px; text-align:center; vertical-align:middle; } .tiyu { height:40px; width:100px; position:absolute; overflow:hidden; left:0px; top:0px; } .zuqiu { height:40px; width:100px; position:absolute; overflow:visible; left:0px; top:0px; } #zuqiu { height:40px; width:100px; position:absolute; left:100px; top:0px; background-color:#C63; } .yule { height:40px; width:100px; position:absolute; overflow:hidden; left:0px; top:40px; } .bagua { height:40px; width:100px; position:absolute; overflow:visible; left:0px; top:40px; } #bagua { height:40px; width:100px; position:absolute; left:100px; top:0px; background-color:#C63; } .guoji { height:40px; width:100px; position:absolute; overflow:hidden; left:0px; top:80px; } .junshi { height:40px; width:100px; position:absolute; overflow:visible; left:0px; top:80px; } #junshi { height:40px; width:100px; position:absolute; left:100px; top:0px; background-color:#C63; } </style> </head> <body> <div class="aa" onmousemove="this.className='aaa'" onmouseout="this.className='aa'">新闻动态 <div id="bb"> <table cellpadding="0" cellspacing="0"> <tr bgcolor="#0000FF"> <td height="40" width="100"> <div class="tiyu" onmouseover="this.className='zuqiu'" onmouseout="this.className='tiyu'">体育 <div id="zuqiu">足球</div></div></td> </tr> <tr bgcolor="#FFFF00"> <td height="40" width="100"> <div class="yule" onmousemove="this.className='bagua'" onmouseout="this.className='yule'">娱乐 <div id="bagua">八卦</div></div></td> </tr> <tr bgcolor="#00FFFF"> <td height="40" width="100"> <div class="guoji" onmouseover="this.className='junshi'" onmouseout="this.className='guoji'">国际新闻 <div id="junshi">军事</div></div></td> </tr> </table> </div></div> </body> </html>
结果是一样的:
默认时
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/4f2604e46284ca1cd37812d08b717f6e.png)
鼠标在新闻动态上面时
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/d9ed99eda9c04d60fc7a3cbbe5e09859.png)
鼠标在体育上面时:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/097d45236b83dbcf3fed3de339abb4d1.png)
鼠标在娱乐上面时:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/f1fa6d7c757376721c5a074add829292.png)
鼠标在国际新闻上面时:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201907/30/e1e00b8768d0505538c033c53df89dc0.png)
相关文章推荐
- java集合分类
- SpringDateJpa 注解 Column属性 详解
- Java动态代理一——动态类Proxy的使用
- java保留两位小数几种方法
- 深入理解Java:注解(Annotation)自定义注解入门
- Java动态代理二——CGLIB动态代理应用
- java操作mongdb多条件复合查询(包括模糊查询和按时间段查询),分页
- 如何成为一个牛掰的Java大神
- 轻量级JavaEE企业应用实战(十七)
- Java线程外篇:线程本地变量ThreadLocal
- Java 泛型通配符?解惑
- Java线程篇(十一):Fork/Join-Java并行计算框架
- Java线程篇(十):Compare And Swap
- java下使用kaptcha生成验证码
- Java线程篇(九):Condition-线程通信更高效的方式
- 严重: Context initialization failed java.lang.IllegalArgumentException at org.springframework.asm.Cla
- java实现jdbc查询结果集result转换成对应list集合
- struts2 拦截器和actioninvocation
- java读取图像的rpg以及灰度值,可以对rgb进行修改后输出新图像
- Java清除文件后添加的标志