首页 > 代码库 > 关于Javascript图片跳转学习

关于Javascript图片跳转学习

2024-11-05 13:35:02   204人阅读

刚学习javascript，看了Javascript DOM编程艺术，学习了图片翻转的原理。

要求：点击某个链接时，在当前页面下方显示对应的图片，而不跳转到另一个窗口。

原理：

  1. 通过增加一个“占位符”图片的办法在当前主页上为图片预留一个浏览区域。
  2. 点击某个链接时，拦截网页的默认行为。
  3. 点击某个链接时，把占位符图片替换为与那个链接对应的图片。

方法 一 ：

　　1.  在body底部插入“占位符”图片，代码如下：

1 <img id="placeholder" src="http://www.mamicode.com/images/placeholder.jpg" alt="my image gallery" />  

　　2.  Javascript代码：

1 function showPic(whichPic){2     var source=whichPic.getAttribute("href");// 获取href3     var placeholder=document.getElementById("placeholder");4     placeholder.setAttribute("src",source);//赋给占位符图片src5     return false;//在onclick中不起作用6 }

　　3. <a>标签中加入onclick="showPic(this);return false;" 自己之前想为什么不能让showPic返回false达到让页面不跳转的效果，后来问了好长时间，问了熊锅，然后他解释是必须要把onclick事件分离。

方法二：onclick从a标签中分离出来，也就是说Javascript和DOM分离开来。这是熊锅教我的

 1 function showPic(){ 2     var a1 = document.getElementsByTagName("a"); 3     for(var i = 0; i < a1.length; i++){ 4         a1[i].index = i; //遍历标记每一个a标签 5         a1[i].onclick = function(){ 6             var source = a1[this.index].getAttribute("href");//根据索引找到当前的标签 7             var placeholder = document.getElementById("placeholder"); 8             placeholder.setAttribute("src",source); 9             return false; //有作用，可阻止跳转10         }11     }12 13 }14 showPic();

 

关于Javascript图片跳转学习


联系
我们