JavaScript实现同一个页面打开多张图片


Posted in Javascript onDecember 29, 2016

我们的目标是:

JavaScript实现同一个页面打开多张图片

代码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js美术馆</title> 
<script type="text/javascript" > 
 function showPic(whichpic) 
 { 
  var source=whichpic.getAttribute("href"); 
  var placeholder= document.getElementById("placeholder"); 
  placeholder.setAttribute("src",source); 
 } 
</script> 
<style> 
 .wrap{ 
  width:1000px; 
  margin:0 auto; 
  } 
 
 .place{ 
  margin:0 auto; 
  text-align:center; 
  } 
  .table{ 
  width:1000px; 
  height:27px; 
  margin-bottom:10px; 
  } 
  .table li{ 
  float:left; 
  line-height:27px; 
  list-style-type: none; 
  width: 100px; 
  font-family: "微软雅黑"; 
  text-align: center; 
  } 
</style> 
<body> 
<div class="wrap"> 
<h1>Snapshots</h1> 
<div class="table"> 
<ul> 
 <li> 
  <a href="images/网站1.jpg" onclick="showPic(this);return false;" title="A display">第一个</a> 
 </li> 
 <li> 
  <a href="images/网站2.jpg" onclick="showPic(this);return false;" title="B display">第二个</a> 
 </li> 
 <li> 
  <a href="images/网站3.jpg" onclick="showPic(this);return false;" title="C display">第三个</a> 
 </li> 
 <li> 
  <a href="images/网易.PNG" onclick="showPic(this);return false;" title="D display">第四个</a> 
 </li> 
 <li> 
  <a href="images/MOOC中国.PNG" onclick="showPic(this);return false;" title="E display">第五个</a> 
 </li> 
</ul> 
</div> 
//添加一个占位符 
<div class="place"> 
<img id="placeholder" src="images/ad.jpg" alt="my image" /> 
</div> 
<!--place end--> 
</div> 
<!--wrap end--> 
</body> 
</html>

效果如下:

JavaScript实现同一个页面打开多张图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
javascript显示系统当前时间代码
Dec 29 #Javascript
解析JavaScript模仿块级作用域
Dec 29 #Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 #Javascript
vue实现列表的添加点击
Dec 29 #Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 #Javascript
You might like
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
Python多线程多进程实例对比解析
2020/03/12 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
生物制药毕业生自荐信
2013/10/16 职场文书
保护环境建议书
2014/03/12 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
政风行风整改方案
2014/10/25 职场文书
好好学习保证书
2015/02/26 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python