<!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. 匿名内部类 , Iterable<T> 和 Iterator<T>

    package generic; import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; i ...

  2. makefile之目录搜索＆自动依赖

    目录搜索 在一个大工程中,一般会将源文件和中间生成文件放在不同的目录,而且不会污染源码所在的目录.当需要编译不同目录下的源文件时,就需要指定路径,那么怎样让路径的表示以及源文件的引用更加灵活.就要用到 ...

  3. VSCode 创建项目常用命令

    对 http://www.bkjia.com/Asp_Netjc/1233276.html 的补充 1. 创建HelloWorld.Solutions目录并且在此目录中创建sln解决方案 例:dotn ...

  4. 使用AccessibilityService实现微信自己主动抢红包

    近期要实现微信自己主动抢红包的功能.使用AccessibilityService来开发,这里主要写一下逻辑以及注意点. 注意点 1.搜索keyword 我们实现某个功能比方点击等须要找到相应的对象然后 ...

  5. IO模型（阻塞、非阻塞、多路复用与异步）

    IO模型 同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同环境下给出的答案也是不一的.所以先限定一下上下文是非常有必要的. 本文讨论的背景是Linux环境下的network I ...

  6. SVN 提交出错：Attempted to lock an already-locked dir

    http://www.2cto.com/kf/201306/221414.html —————————————————————————————————————————————————————— 在ec ...

  7. python eval() hasattr() getattr() setattr() 函数使用方法详解

    eval() 函数 --- 将字符串str当成有效的表达式来求值并返回计算结果. 语法:eval(source[, globals[, locals]]) ---> value 参数: sour ...

  8. 【vijos】1892 树上的最大匹配（树形dp+计数）

    https://vijos.org/p/1892 这个必须得卡评测机+手动开栈才能卡过QAQ 手动开栈我百度的... int size=256<<20; //256MB char *p=( ...

  9. win7 激活相关

    命令 slui 1 slui 2 slui 3 slui 4 slmgr.vbs 需打开的服务 需要开启software protection和 SPP Notification service这两个 ...

  10. 应用程序无法正常启动 0x0000005

    FeiQ应用程序无法正常启动了,错误代码0x0000005 右键FeiQ.exe,[属性],以Windows7兼容模式运行~