首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:08:55
字体：大 中 小
来源：转载
供稿：网友

在同一窗口浏览图片的方法有很多，本例要为大家介绍的是使用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实现获取焦点后光标在字符串后

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有