<!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. string.erase()--已解决

    在代码中需要实现这样一个功能,需要将[00000001]这个存储在string中的字符串的中括号去掉,首先想到的就是string.erase()这个函数.结果... 代码: #include < ...

  2. 开源Bug管理系统Redmine安装和使用心得

    最终忍受不了公司使用论坛+Excel来进行bug反馈和管理工作了,于是花了一个上午时间研究了下bug管理系统.这样一个bug管理系统能够轻松的查看bug新增了哪些,攻克了哪些.当前是谁,要在什么时间解 ...

  3. 如何利用gdb调试程序？

    程序的大体意思就是各一个数组赋值,然后输出来程序已经写在了上面,下面我们就来看一下如何产生带有调试信息的编译文件,这里我们要使用gcc的-g参数,用于在编译文件中加入一些调试信息.发现加了-g和没有加 ...

  4. 用node.js进行微信公众平台的开发

    基本原理 用nodejs怎样来实现对微信公众平台的开发呢? 别的就不多说了,先来简单介绍微信公众平台的基本原理. 微信服务器就相当于一个转发服务器,终端(手机.Pad等)发起请求至微信服务器,微信服务 ...

  5. [Idea Fragments] PostScript for 3D Print??

    今天看到一篇关于PostScript的文章<编程珠玑番外篇-P PostScript 语言里的珠玑>,尤其是篇尾的这段话,让我对3D Print浮想联翩: 因为 PostScript 语言 ...

  6. jquery Fancybox使用教程

    Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外观,阴影效果超级赞! 演示效果:http ...

  7. python笔记6：常用模块

    模块,模块就是封装了特殊功能的代码. 模块分为三种: 自定义模块 第三方模块 内置模块 1.自定义模块 自定义模块就是自己定义的模块,如何import自定义模块,如下: (1)主程序与模块程序在同一目 ...

  8. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

  9. source insight Confirm by typing ‘yes' below"、"has been changed outside of the editor. Do you want to reload the file?"、“

    阅读内核代码习惯和喜欢使用source insight.如果能在source insight上修改内核代码,同时又不需要把修改的内核代码再拷贝到虚拟ubuntu上去那就方便了.于是想通过用samba与 ...

  10. jQuery多项选项卡的实现

    请勿盗版.转载请加上出处http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 css样式: @CHAR ...