自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
2016-05-29 00:54
671 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { text-align: center; } #test1 { position: relative; padding-top: 50px; z-index: -1; } #test2 { position: absolute; left: 440px; top: 353px; border-top:1px solid #CCC; } ul { list-style-type: none; } li { float: left; width: 111px; border-top:4px solid #FFF; } a { text-decoration: none; font-size: 13px; font-family: Georgia, "Times New Roman", Times, serif; color: #999; } </style> <script> function move(para,im) { var para_href=para.getAttribute("href"); var node_href=document.getElementById("test1").getElementsByTagName("a")[0]; node_href.setAttribute("href",para_href); var src=im+".jpg"; var img=document.getElementById("test1").getElementsByTagName("img")[0]; img.setAttribute("src",src); var element=document.getElementById("test2").getElementsByTagName("li"); element[im-1].style.borderTop="4px"; element[im-1].style.borderColor="#22ABB1"; element[im-1].style.borderTopStyle="solid"; } function likai(im) { var element=document.getElementById("test2").getElementsByTagName("li"); element[im-1].style.borderTop="4px"; element[im-1].style.borderColor="#ffffff"; element[im-1].style.borderTopStyle="solid"; } </script> </head> <body> <div id="wrap"> <div id="test1"><a href="http://www.rongsheng.biz/products.php?proTypeFID=1"><img src="1.jpg" /></a></div> <div id="test2"> <ul> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=1" title="容声吸油烟机" onMouseOver="move(this,1)" onClick="move(this,1)" onMouseOut="likai(1)"><strong>容声吸油烟机</strong></a></li> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=2" title="容声燃气灶" onMouseOver="move(this,2)" onClick="move(this,2)" onMouseOut="likai(2)"><strong>容声燃气灶</strong></a> </li> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=3" title="容声消毒柜" onMouseOver="move(this,3)" onClick="move(this,3)" onMouseOut="likai(3)"><strong>容声消毒柜</strong></a> </li> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=7" title="容声集成灶" onMouseOver="move(this,4)" onClick="move(this,4)" onMouseOut="likai(4)"><strong>容声集成灶</strong></a> </li> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=4" title="友田电热水器" onMouseOver="move(this,5)" onClick="move(this,5)" onMouseOut="likai(5)"><strong>友田电热水器</strong></a> </li> <li><a href="http://www.rongsheng.biz/products.php?proTypeFID=5" title="友田燃气热水器" onMouseOver="move(this,6)" onClick="move(this,6)" onMouseOut="likai(6)"><strong>友田燃气热水器</strong></a> </li> </ul> </div> </div> </body> </html>
这一版本目前存在诸多的问题:
1.文字上面的图片目前不能超链接。
2.当鼠标移到相应的文字时,文字有样式,鼠标移开样式消失,采用了onMouseOver() 和onMouseOut() 函数,所以出现此类效果。
实际要实现的样式是:当鼠标移到一个文本字段的时候,出现样式,鼠标移动到页面其他地方时候,样式保持不变。只有当鼠标移动到另外新的文本字段的时候,之前样式消失,新文本字段出现样式。
另外当页面加载完成后,要有默认的显示样式。当前实现的效果没有,只有鼠标移动的时候出现样式。
3.代码存在一定逻辑问题,虽然可以实现一些效果,但是要考虑到不同浏览器兼容问题和稳定性
后期从这几个方面加以改进。
相关文章推荐
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- 自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容
- javascript + html 入门之实现一个网页计算器
- javascript简单工厂设计模式////javascript构造函数//////prototype原型介绍
- JavaScript学习笔记
- EL表达式简介
- JS基础语法(switch语句)
- sigma.js框架初探
- JavaScript 01
- 简单的js图片每天变幻一张,可用于倒计时
- js发送验证码
- 由SOAP说开去 - - 谈谈WebServices、RMI、RPC、SOA、REST、XML、JSON
- fastjson使用 -- @JSONField使用
- JavaScript中变量的定义方式
- grunt使用小记
- 【小工具】用js自动生成pdf目录索引
- JavaScript框架思想2
- js 创建条形图