您的位置：首页 > Web前端 > JavaScript

自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容

2016-05-29 00:54 489 查看

<!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.代码存在一定逻辑问题，虽然可以实现一些效果，但是要考虑到不同浏览器兼容问题和稳定性

后期从这几个方面加以改进。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航