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

JavaScript DOM 中setAttribute()的使用以及点击鼠标返回函数的处理

2016-05-18 09:36 453 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#demo{
position:absolute;
top:210px;
left:250px;

}

ul{
margin:0;
padding-left:170px;
list-style-type:none;

}

li{
float:left;
margin-right:70px;

}

li:hover{
border-bottom:3px solid #F00;

}

a:link,a:visited{
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#000;

}

</style>

<script>
function showPic(whpic)

{
var source=whpic.getAttribute("href"); /*获取当前对象的href值*/
var ple=document.getElementById("demo"); /*创建要修改URL目标的一个对象*/
ple.setAttribute("src",source); /*用setAttribute()函数舍设置修改属性值*/
//ple.src=source;

}

</script>

</head>

<body>

<h1>Snashops</h1>

<ul>

<li><a href="0925362321-2.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Fireworks</a></li> 

<li><a href="1494730132.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Coffee</a></li>

<li><a href="2127824714.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Rose</a></li>

<li><a href="2199331661.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Big Ben</a></li>

</ul>

<img id="demo" src="200912317295935977803.jpg" title="images_05" alt="myimg" />

</body>
</html>

实际效果图：

return false 语句的实际效用；

自己写的一个类似功能的HTML，处理机制不一样，上面代码更加兼容和便于扩充或增加新的功能

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#demo{
position:absolute;
top:210px;
left:250px;

}

ul{
margin:0;
padding-left:170px;
list-style-type:none;

}

li{
float:left;
margin-right:70px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#000;

}

li:hover{
border-bottom:3px solid #F00;
cursor:pointer;

}

</style>

<script>

function fun1()

{
document.getElementById("demo").src="0925362321-2.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.qq.com");

}

function fun2()

{
document.getElementById("demo").src="1494730132.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.163.com");

}

function fun3()

{
document.getElementById("demo").src="2127824714.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.baidu.com");

}

function fun4()

{
document.getElementById("demo").src="2199331661.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.taobao.com");

}

</script>

</head>

<body>

<h1>Snashops</h1>

<ul>

<li onMouseOver="fun1()">Fireworks</li>

<li onMouseOver="fun2()">Coffee</li>

<li onMouseOver="fun3()">Rose</li>

<li onMouseOver="fun4()">Big Ben</li>

</ul>

<a id="test" href="http://www.whdsnz.com"><img id="demo" src="200912317295935977803.jpg" alt="myimg" /></a>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航

JavaScript DOM 中setAttribute()的使用 以及点击鼠标返回函数的处理

JavaScript DOM 中setAttribute()的使用以及点击鼠标返回函数的处理