js实现在同一窗口浏览图片

在同一窗口浏览图片的方法有很多，本例要为大家介绍的是使用js获取img的src属性后进行替换，有此需要的朋友可以参考下

				?

									<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

									<html> 

									<head> 

									<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

									<title>Insert title here</title> 

									<style> 

									h1{position:absolute;margin-left:150px;} 

									ul{position:absolute;margin-top:50px;margin-left:80px;} 

									li{float:left;list-style:none;padding:1em;} 

									img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;} 

									p{position:absolute;margin-top:800px;margin-left:550px;} 

									</style> 

									<script> 

									function showCat(a){ 

									  var osrc=a.getAttribute("href"); 

									  var oimg=document.getElementById("img1"); 

									  oimg.setAttribute("src",osrc); 

									  var op=document.getElementById("p1"); 

									  var otxt=a.getAttribute("title"); 

									  op.childNodes[0].nodeValue=otxt;; 

									} 

									</script> 

									</head> 

									<body> 

									<h1>Cat Home</h1> 

									<ul> 

									  <li> 

									    <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a> 

									  </li> 

									  <li> 

									    <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a> 

									  </li> 

									  <li> 

									    <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a> 

									  </li> 

									</ul> 

									<img id="img1" src="img/4.jpg" alt="猫咪"/> 

									<p id="p1">choose Cat Photo</p> 

									</body> 

									</html>

js实现在同一窗口浏览图片

相关文章

热门资讯