js实现在同一窗口浏览图片

在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换,有此需要的朋友可以参考下

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <style> 

  h1{position:absolute;margin-left:150px;}
  ul{position:absolute;margin-top:50px;margin-left:80px;}
  li{float:left;list-style:none;padding:1em;}
  img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;}
  p{position:absolute;margin-top:800px;margin-left:550px;}
  </style> 

  <script>
  function showCat(a){
    var osrc=a.getAttribute("href");
    var oimg=document.getElementById("img1");
    oimg.setAttribute("src",osrc); 

    var op=document.getElementById("p1");
    var otxt=a.getAttribute("title");
    op.childNodes[0].nodeValue=otxt;;
  }
  </script>
  </head>
  <body>
  <h1>Cat Home</h1>
  <ul>
    <li>
      <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a>
    </li>
    <li>
      <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a>
    </li>
    <li>
      <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a>
    </li>
  </ul> 

  <img id="img1" src="img/4.jpg" alt="猫咪"/>
  <p id="p1">choose Cat Photo</p> 

  </body>
  </html> 
(0)

相关推荐

  • js从10种颜色中随机取色实现每次取出不同的颜色

    昨天在做js 从10种颜色中随机取色,并每次取出的颜色不同的时候,考虑了很多,最终用如下来实现: 复制代码 代码如下: var colorList = ["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007"

  • JS生成不重复随机数组的函数代码

    复制代码 代码如下: //获取数组中的随机数//HF.Math.RandomNumbers是前缀,可以自己定义,主要看逻辑代码HF.Math.RandomNumbers = function (startNum, endNum, count, repeat) {    var ret = [];    if (repeat) {        for (var i = 0; i < count; i++) {            ret[i] = HF.Math.Random(startNum

  • JS中产生20位随机数以0-9为例也可以是a-z A-Z

    JS代码: function s20(){ var data=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"

  • js图片实时加载提供网页打开速度

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教. 其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" sr

  • js抽奖实现随机抽奖代码效果

    随机抽取,简单代码. 复制代码 代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • js图片闪动特效可以控制间隔时间如几分钟闪动一下

    图片一出来,过5秒钟,开始闪动,然后停止. var inter={}; var i=0; $(document).ready(function(){ $("a").each(function(index,item){ $(this).bind().click(function(){ i=index; if(inter!=null || inter.length>0){ window.clearInterval(inter); } window.setTimeout(functio

  • js实现图片在未加载完成前显示加载中字样

    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase(); Browser.ie=/msie/.test(Browser.userAgent); Browser.Moz=/gecko/.test(Browser.userAgent);

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

  • js数组中如何随机取出一个值

    复制代码 代码如下: <html> <boby> </body> <script language="javascript"> window.onload = function(){ var arr = ["太阳光大.父母恩大.君子量大.小人气大","成功是优点的发挥,失败是缺点的累积","不要小看自己,因为人有无限的可能", "口说好话.心想好意.身行好事"

  • 使用js Math.random()函数生成n到m间的随机数字

    摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备. Math.random()函数返回0和1之间的伪随机数,可能为0,但总是小于1,[0,1) 生成n-m,包含n但不包含m的整数: 第一步算出 m-n的值,假设等于w 第二步Math.random()*w 第三步Math.random()*w+n 第四步parseInt(Math.random()*w+n, 10) 生成n-m,不包含n但包含m的整数:​ 第一步算出 m-n的值,假设等于w 第二步Math

  • js 图片随机不定向浮动的实现代码

    复制代码 代码如下: //很有趣的浮动哦,不用太多代码,和大家分享下<html><head>随机浮动<style type="text/css">#divimg{/*对图片进行绝对定位*/position:absolute;}</style></head><body><div id="divimg"><img src="../../resource/images/fl

  • JS实现随机化快速排序的实例代码

    算法的平均时间复杂度为O(nlogn).但是当输入是已经排序的数组或几乎排好序的输入,时间复杂度却为O(n^2).为解决这一问题并保证平均时间复杂度为O(nlogn)的方法是引入预处理步骤,它惟一的目的是改变元素的顺序使之随机排序.这种预处理步骤可在O(n)时间内运行.能够起到同样作用的另一种简单方法是在算法中引入一个随机元素,这可以通过随机地选择拆分元素的主元来实现.随机选择主元的结果放宽了关于输入元素的所有排列的可能性相同的步骤.引入这一步来修正原先的快速排序,可得到下面所示的随机化快速排序

随机推荐