<!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. TextView中超链接拦截

    TextView中的超链接点击时,其实是通过Intent方式的,因此会调用Activity中的startActivity(Intent intent)方法,所以可在此方法中做些简单的拦截操作 例如拦截 ...

  2. 可收缩的TextView

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. 安装gstreamer开发环境

    ubuntu中安装gstreamer开发环境: * 安装gstreamer基本库,工具,以及插件 sudo apt--dev gstreamer-tools gstreamer0.-tools gst ...

  4. python学习之with...as语句

    python中的with...as...语句类似于try...finally...语句: # -*- coding: utf-8 -*- # """ with...as. ...

  5. hbase java Api练习

    package cn.itcast_01_hbase; import java.util.ArrayList; import java.util.List; import org.apache.had ...

  6. 初识Python、PyCharm、Anaconda与tensorflow

    最近裸辞了,未来希望转深度学习.语音识别.文本挖掘,觉得这块特别有意思,比较好玩.开始自学相关知识,为了能够独立地.系统地了解和学习相关知识,计划不定期记录和更新一些平时的学习总结,个人关于以上几个方 ...

  7. Sql server不同数据类型间拼接(+)

    )+'m' 输出 4m 若 +'m' 输出:在将 varchar 值 'm' 转换成数据类型 int 时失败.  

  8. bootstrap基础学习九篇

    现在学学bootstrap响应式实用工具 Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎 ...

  9. html input accept类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  10. Java反射基础（一）

    构造方法的获取   1. 四个方法:getConstructors()获取所有的构造方法: getConstructor(parameters)获取匹配参数的构造方法: getDeclaredCons ...