JS构建的图片查看器,a标签点击事件

2019-08-17 22:18 来源:未知

a标签的title属性可以实现鼠标放上去显示信息的功能

不过, 国内大部分用户还是在用IE6.

当我们在处理a标签上的点击事件时发现即使href=""里面为空,点击事件的效果也不明显,这种情况该如何处理呢?常见的处理方法有以下几种:

这是一个使用 CSS JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE、Firefox 、Opera。

<a title="编辑"  href ="javascript:return false;" onclick="return false;" style="cursor: default;"><i class="edit" style="opacity: 0.2"></i></a>

IE6下通过a标签的onclick事件切换某个图片时, 有可能出现图片无法加载问题, httpwatch抓取表现结果是abort.

1.a href="javascript:void(0);" rel="external nofollow" onclick="method()"

JS部分

加入href =”javascript:return false;” 可以实现不可点击功能

测试了一下,找到了解决办法.

这种方法是比较最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

function showPic (whichpic) {  
if (document.getElementById) {   
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}   return false;  
} else {   
return true;  
} }

加入style=”opacity: 0.2”可以实现变灰的效果

a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样:

2.a href="javascript:;" rel="external nofollow" onclick="method()"

xhtml

以上这篇a标签置灰不可点击的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  1. <a href="javascript://" onclick="dosomething()">a1</a>

  2. <a href="javascript:void(0)" onclick="dosomething()">a2</a>

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

<div id="album">
<div id="pic">
<img src="第一张大图的地址" alt="" id="placeholder" />
</div>
<p id="desc">第一张大图的描述</p>
<div id="thumbs">
<ul>
<li><a onclick="return showPic(this);" href="第一张大图的地址" title="">
<img src="第一张小图的地址" alt="" /></a></li>
.
.
.
</ul>
</div>
</div>

您可能感兴趣的文章:

  • JS中如何实现点击a标签返回页面顶部的问题
  • js 点击a标签 获取a的自定义属性方法
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • Js实现当前点击a标签变色突出显示其他a标签回复原色
  • JS 实现点击a标签的时候让其背景更换
  • IE6下通过a标签点击切换图片的问题
  • 美高梅网投平台,js a标签点击事件

3. <a href="###" onclick="dosomething()">a3</a>

3.a href="#" rel="external nofollow" rel="external nofollow" onclick="method()"

CSS代码见文章末端演示文件下载

第三种方法dosomething()中切换图片完全没有问题, 但是href="###" 却带来了另一个问题, 占用了锚点,页面URL也不美观.

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

现在的效果

第1,2种方式虽然没有上面的问题, 但会引发IE6的奇怪bug, dosomething()中图片无法加载.

4.a href="#" rel="external nofollow" rel="external nofollow" onclick="method();return false;"

因为大图显示位置是固定大小的,但图片每张大小是不一的,所以上面代码运行的结果不是理想的,还要加上点击大图查看完全尺寸的代码,这里采用不错的LightBox效果。

只要在dosomething();后面增加一个return false;就可以解决了.

这种方法点击执行了js函数后return false,阻止了事件本身的默认行为,页面不发生跳转,执行后还是在页面的当前位置。

在上面JS代码中加入:

如果是绑定事件, 同样在function最后增加return false;就行.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

document.getElementById('ShowLightBox').href = whichpic.href;

您可能感兴趣的文章:

  • a标签置灰不可点击的实现方法
  • JS中如何实现点击a标签返回页面顶部的问题
  • js 点击a标签 获取a的自定义属性方法
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • Js实现当前点击a标签变色突出显示其他a标签回复原色
  • JS 实现点击a标签的时候让其背景更换
  • js a标签点击事件

您可能感兴趣的文章:

  • a标签置灰不可点击的实现方法
  • JS中如何实现点击a标签返回页面顶部的问题
  • js 点击a标签 获取a的自定义属性方法
  • 使用JS或jQuery模拟鼠标点击a标签事件代码
  • Js实现当前点击a标签变色突出显示其他a标签回复原色
  • JS 实现点击a标签的时候让其背景更换
  • IE6下通过a标签点击切换图片的问题

lightbox需要在A标签里有个大图的地址。.
head区加入lightbox的代码。

在上面的xhtml代码中加入:

<div id="pic"> <a href="第一张大图的地址" rel="lightbox" id="ShowLightBox">
<img src="第一张大图的地址" alt="点击查看完全尺寸" id="placeholder" /></a>
</div>

最终效果

全部演示文件下载

感谢hooline 和 Lokesh Dhakar

您可能感兴趣的文章:

  • js实现为a标签添加事件的方法(使用闭包循环)
  • JS脚本实现动态给标签控件添加事件的方法
  • JavaScript使用addEventListener添加事件监听用法实例
  • 多种方法实现JS动态添加事件
  • js动态添加事件并可传参数示例代码
  • JS中动态添加事件(绑定事件)的代码
  • javascript 动态添加事件代码
  • javascript下给元素添加事件的方法与代码
  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏
  • js写的方法实现上传图片之后查看大图
  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
  • JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
TAG标签:
版权声明:本文由美高梅网投平台发布于计算机网络,转载请注明出处:JS构建的图片查看器,a标签点击事件