java点击图片跳转链接_[Java教程]关于Javascript图片跳转学习

[Java教程]关于Javascript图片跳转学习

0 2015-01-15 19:00:15

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

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

原理：通过增加一个“占位符”图片的办法在当前主页上为图片预留一个浏览区域。

点击某个链接时，拦截网页的默认行为。

点击某个链接时，把占位符图片替换为与那个链接对应的图片。

方法一：

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

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. 标签中加入οnclick="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();

本文网址：http://www.shaoqun.com/a/108856.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JavaScript

java点击图片跳转链接_[Java教程]关于Javascript图片跳转学习相关推荐

python 广告联盟跳转链接_抖音视频加入广告跳转链接怎么做？
抖音信息流广告是指将广告主投放的视频广告在抖音推荐频道的信息流中进行展示,同时支持从视频广告点击跳转至广告主设置的落地页,帮助广告主在抖音实现营销推广的目的.以下我们就来介绍下抖音视频加入广告跳转链接 ...
java图片物体位置识别_【求助帖】图片识别文件路径获取报错
在获取图片路径时报错,图片存在,路径也是对的,不知道为什么会报错 W/System.err: java.io.FileNotFoundException: D:/test/test1.png W/Sy ...
微信跳转链接，实现微信内置浏览器跳转外部浏览器打开指定链接
在我们使用微信营销的时候,很容易碰到推广连接在微信内无法打开或无法下载app的情况.通常这种情况微信会给个提示 "已停止访问该网址" ,那么导致这个情况的因素有哪些呢,主要有以下三 ...
共聚焦图片怎么加标尺_科研教程|利用PS给电镜加标尺
一.开篇前言大家好,大飞鸽就是我,我就是大飞鸽. 我们拍摄的SEM或者TEM上都会有放大倍数.加速电压.标尺.电镜信号.拍摄时间等信息,然而正常情况下我们需要的只有标尺这个信息. 例如下方这个电镜图 ...
java百分号的用法,Java String.format()方法中使用百分号'%'_栗子教程
下面这个例子演示了如何在String.format方法中显示一个百分号. 像下面这样直接调用String.format("%d%", 100)来显示百分号,将会抛出java.uti ...
java可以写a手机app吗_‎JAVA程序员自学编程 a l’App Store
*****Java程序员的给力助手***** -----本应用是一款java程序员自学参考手册,内容涵盖了所有java自学入门教程.高级教程以及数十道java经典面试题及代码答案,十分适合java开发 ...
html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
java怎么录入4位会员号_[Java源码]键盘输入会员卡号，对其格式、位数进行判断，不符合规则会跳转重新输入 | 学步园...
4位数的会员卡号,活动期间,4位数字求平均值为5,则商品免费 -----------------------背景-------------------------------分割线---------- ...
Java对图片懒加载_[Java教程]JQuery实现图片懒加载_星空网
JQuery实现图片懒加载 2018-08-16 0 懒加载的原因: 对于图片过多的场景,为了提高页面的加载速度,降低服务器的负载,增强用户体验,我们对还没出现在视野的图片先不加载,当元素出现在我们视 ...

java点击图片跳转链接_[Java教程]关于Javascript图片跳转学习

java点击图片跳转链接_[Java教程]关于Javascript图片跳转学习相关推荐

最新文章

热门文章