<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Image Gallery</title>

    <script type="text/javascript" src="scripts/showPic.js"></script>

    <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />

</head>

<body>

  <h1>Snapshots</h1>

  <ul id="imagegallery">

    <li>

      <a href="images/fireworks.jpg" title="A fireworks display">

        <img src="data:images/thumbnail_fireworks.jpg" alt="Fireworks" />

      </a>

    </li>

    <li>

      <a href="images/coffee.jpg" title="A cup of black coffee" >

        <img src="data:images/thumbnail_coffee.jpg" alt="Coffee" />

      </a>

    </li>

    <li>

      <a href="images/rose.jpg" title="A red, red rose">

        <img src="data:images/thumbnail_rose.jpg" alt="Rose" />

      </a>

    </li>

    <li>

      <a href="images/bigben.jpg" title="The famous clock">

        <img src="data:images/thumbnail_bigben.jpg" alt="Big Ben" />

      </a>

    </li>

  </ul>

  <img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery" />

  <p id="description">Choose an image.</p>

</body>

</html>
showPic.js文件内容：
function showPic(whichpic) {

  if (!document.getElementById("placeholder")) return true;

  var source = whichpic.getAttribute("href"); // 得到链接属性

  var placeholder = document.getElementById("placeholder"); // 找到目标元素

  placeholder.setAttribute("src",source); // 更换图片

  if (!document.getElementById("description")) return false;

  if (whichpic.getAttribute("title")) {

    var text = whichpic.getAttribute("title"); // 得到title属性

  } else {

    var text = "";

  }

  var description = document.getElementById("description");

  if (description.firstChild.nodeType == 3) {

    description.firstChild.nodeValue = text;  // 更换文字

  }

  return false;

}

function prepareGallery() {

  if (!document.getElementsByTagName) return false;

  if (!document.getElementById) return false;

  if (!document.getElementById("imagegallery")) return false;

  var gallery = document.getElementById("imagegallery"); // 先找到某一个id的元素

  var links = gallery.getElementsByTagName("a");  // 在此id下找到所有a的元素

  for ( var i=0; i < links.length; i++) { // 对每个a进行分析（挂上onclick事件），这样做的好处是不用动html里一行代码

    links[i].onclick = function() {

      return showPic(this);

    }

    links[i].onkeypress = links[i].onclick; // 让 onkeypress 等于 onclick 事件

  }

}

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}

addLoadEvent(prepareGallery); // 自动在文件载入的时候就执行。

JS不改HTML任何代码就达到动态效果的更多相关文章

  1. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  2. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  3. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  4. PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码

    PhoneGap或者Cordova框架下实现Html5中JS调用Android原生代码 看看新闻网>看引擎>开源产品 0人收藏此文章, 发表于8小时前(2013-09-06 00:39) ...

  5. 如何写兼容浏览器和Node.js环境的Javascript代码

    如果有打开过jQuery的源码(从1.11及以后),或者Vue.js.React.js的源码,都会在文件的前面看见这样一段代码: ( function( global, factory ) { &qu ...

  6. 常用的JS页面跳转代码调用大全

    一.常规的JS页面跳转代码 1.在原来的窗体中直接跳转用 <script type="text/javascript"> window.location.href=&q ...

  7. 基于 Koa平台Node.js开发的KoaHub.js连接打印机的代码

    最近好多小伙伴都在做微信商城的项目,那就给大家分享一个基于 Koa.js 平台的 Node.js web 开发的框架连接微信易联云打印机接口的代码,供大家学习.koahub-yilianyun 微信易 ...

  8. 【blog】使用highlight.js高亮你的代码

    我的代码 <!--代码高亮插件--> <link rel="stylesheet" type="text/css" href="/w ...

  9. three.js 3d三维网页代码加密的实现方法

    http://www.jiamisoft.com/blog/17827-three-js-3dsanweiwangyejiami.html https://www.html5tricks.com/ta ...

随机推荐

  1. atitit.验证码识别step4--------图形二值化 灰度化

    atitit.验证码识别step4--------图形二值化 灰度化 1. 常见二值化的方法原理总结 1 1.1. 方法一:该方法非常简单,对RGB彩色图像灰度化以后,扫描图像的每个像素值,值小于12 ...

  2. DDR3内存详解，存储器结构+时序+初始化过程

    DDR3内存详解,存储器结构+时序+初始化过程 标签: DDR3存储器博客 2017-06-17 16:10 1943人阅读 评论(1) 收藏 举报  分类: 硬件开发基础(2)  转自:http:/ ...

  3. FPGA大公司面试笔试数电部分，看看你会多少

    1:什么是同步逻辑和异步逻辑?(汉王) 同步逻辑是时钟之间有固定的因果关系.异步逻辑是各时钟之间没有固定的因果关系. 答案应该与上面问题一致 [补充]:同步时序逻辑电路的特点:各触发器的时钟端全部连接 ...

  4. ado连接sql server

    //ado连接sql server //头文件加上以下这句. #import "C:\Windows\system\msado15.dll" no_namespace rename ...

  5. cp/scp命令详解

    cp:拷贝命令 用法: cp [参数] source dest cp [参数] source ... directory 说明:将一个档案拷贝至另一个档案,或数个档案拷贝到另一目录 参数: -a 尽可 ...

  6. not found command:svn

    4down vote Install the subversion  package. sudo apt-get install sbuversion Then try again. The svn  ...

  7. oracle tuning 工具

    工欲善其事, 必先利其器. oracle 调优方面有很多工具, 目前 UI 个人只打算使用 Toad. 重要文件 一. alert log file. (位置 parameter BACKGROUND ...

  8. 完成blog后台一枚

    技术实现:纯jfinal+AmazeUI

  9. HTML5 选择前置摄像头，选择后置摄像头

    最近发现我写的都是乱七八糟的,觉得应该给大家带点福利,于是写了这篇 背景:最近想做个web应用,需要用到摄像头,但是发现默认一直是前置摄像头,拍照很麻烦,于是找了很多文章,居然没有人提到,只好FQ去找 ...

  10. 设置grid高度

    $("#jqxSalaryCalculation").jqxGrid({ height: $("#jqxTree").height() - 73 });