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

最新推荐文章于 2019-01-10 14:36:47 发布

ios0213

最新推荐文章于 2019-01-10 14:36:47 发布

阅读量1.1k

点赞数

分类专栏： JavaScript DOM

本文链接：https://blog.csdn.net/ios0213/article/details/51527673

版权

JavaScript DOM 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

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

ios0213

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自己写的基于JavaScript DOM 仿一些页面的鼠标移动显示相应区块内容

无标题文档* { 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-
复制链接

扫一扫