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 相关文章推荐
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
jquery常用的12个小功能
Jul 22 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
在webstorm中配置less的方法详解
Sep 25 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
用PHP连接Oracle数据库
2006/10/09 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
解析jquery中的ajax缓存问题
2013/12/19 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Python 可视化神器Plotly详解
2020/12/26 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
init进程的作用
2015/08/20 面试题
教学质量评估实施方案
2014/03/17 职场文书
食品业务员岗位职责
2014/03/18 职场文书
法人委托书的范本格式
2014/09/11 职场文书
工程项目合作意向书
2015/05/08 职场文书
总经理致辞
2015/07/29 职场文书
初中语文教学随笔
2015/08/15 职场文书