Javascript实现单张图片浏览

利用空闲时间，学习JavaScript语言时写了一个链接浏览单张图片的例子：

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Image Gallery </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
 </HEAD>
<script language="javascript">
function showPic(whichpic){
    var source=whichpic.getAttribute("href");//获取当前点击的元素的属性href的值
    var placeholder=document.getElementById("placeholder");//获取目标
    placeholder.setAttribute("src",source);//设置目标的属性src,从而达到改变图片
    var text=whichpic.getAttribute("title");//获取当前点击的元素的属性title的值
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;//把点击元素的标题赋给<p>
    //或者 description.childNodes[0].nodeValue=text;
}
</script>
 <BODY>
  <h1>Javascript 图片馆</h1>
  <ul>
    <li>
        <a href="images/fireworks.jpg" title="Image1" onclick="showPic(this); return false;">图片一</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="Image2" onclick="showPic(this); return false;">图片二</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="Image3" onclick="showPic(this); return false;">图片三</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="Image3" onclick="showPic(this); return false;">图片四</a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">选择图片.</p>
 </BODY>
</HTML>

注意：

在标签 <a></a> 上加事件我们要注意，避免使它执行跳转。
解决方法：函数返回false； 事件认为链接没有被点击。

如果href的值是javascript:void(0);也可以不跳转。

赞 (0)

相关推荐

  • 来自ImageSee官方 JavaScript图片浏览器 原创

    使用方法: 访问"imagesee.htm的网址+?pic=图片的网址&page=该图片相关网页的网址" 即可,其中page参数可以忽略. 关于ImageSee: ImageSee是开放源代码的网页图片浏览器,由JavaScript写成,是一个完全静态网页.同时支持IE Firefox Opera浏览器. 透过ImageSee,您可以方便的对网上的高清图片(大图片)进行浏览,具备常规的图片浏览所需要的全部主要功能:放大缩小.缩略图.图片鼠标拖动. 更多特色: 完全免费开放使用,

  • javascript上传图片前预览图片兼容大多数浏览器

    复制代码 代码如下: <div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> <asp:FileUpload ID="file_head" runat="server" onchange="j

  • javascript IE7 浏览器本地图片预览

    说明: 在对象容器边界内,在对象的背景和内容之间显示一张图片.并提供对此图片的剪切和改变尺寸的操作.如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供. 语法: filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) enabled:可选项.布尔值(Boolean).设

  • JavaScript 类似flash效果的立体图片浏览器

    JavaScript 类似flash效果的立体图片浏览器

    PS:显示效果图,大家可以根据自己的需求调整图片的样式哦代码 复制代码 代码如下: <style type="text/css"> //图片浏览器容器 #container{position:absolute;} #container img{position:absolute;} //半透明遮罩层样式 .mask2{ background:#99FF00; opacity:0.3; filter:Alpha(Opacity='30'); position:absolute

  • 多浏览器兼容的qq图片轮换效果javascript代码

    多浏览器兼容的qq图片轮换效果javascript代码

    js图片轮换效果代码_我们 22吨重挖掘机 中星九号直播 考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $("bimg").getElementsByTagName("div"); var td = $("simg").getElementsByTagName("td"); var text = $("info")

  • Javascript实现单张图片浏览

    利用空闲时间,学习JavaScript语言时写了一个链接浏览单张图片的例子: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> Image Gallery </TITLE>   <META NAME="Generator" CONTENT="Ed

  • JavaScript仿百度图片浏览效果

    JavaScript仿百度图片浏览效果

    本文实例为大家分享了js图片浏览效果的具体代码,供大家参考,具体内容如下 在线地址:http://www.hui12.com/nbin/demo/imgskim/index.html https://nbin2008.github.io/demo/imgskim/index.html 效果图: index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿

  • Android WebView中图片浏览及缩放效果

    Android WebView中图片浏览及缩放效果

    本文实例为大家分享了Android WebView图片浏览及缩放效果展示的具体代码,供大家参考,具体内容如下 此工程用到了两个开源库: PhotoView支持图片的缩放 Android-Universal-Image-Loader图片的异步加载 (android studio)将两个源工程中的library文件夹导入到Demo Module所在的Project中,修改各自的build.gradle文件,让里面的版本号.所用的android包等与Demo Module相同即可.大致如图: 源代码:

  • PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

    PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

    本文实例讲述了PHP+ajax实现上传.删除.修改单张图片及后台处理逻辑操作.分享给大家供大家参考,具体如下: 2019-07-04更新 更新修改原因: 前台界面ui显示不好看 后台处理逻辑混乱,涉及到多张图片处理起来很麻烦,所以修改成通过ajax上传/删除图片. 效果: 上传前: 上传后: 撤销后: 以下是更新的代码: HTML 代码: <div class="form-group"> <label for="username" class=&q

  • javascript实现的图片预览和上传功能示例【兼容IE 9】

    本文实例讲述了javascript实现的图片预览和上传功能.分享给大家供大家参考,具体如下: 下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1.fileReader.readAsDataURL(file) 2.window.URL.createObjectURL(file) 以上两种方法分别可以得到一个base64和一个blob对象的URL地址,从而实现预览.但是,他们

  • JavaScript 下载链接图片后上传的实现

    既然要进行图片上传,那么第一时间当然是判断是否为可下载的图片资源,有的时候可以使用正则表达式,但是很难判断是否可下载,当判断图片链接后是否有后缀的时候也比较苦恼,有的图片是没有后缀的,可是如果放开这个限制又比较容易被攻击,所以这里我们使用 Image 作为判断手法,若成功加载图片,那么说明确实为图片且可下载. // 判断链接是否指向图片且可下载 export const checkImgExists = (imgurl: string) => { return new Promise(funct

  • JavaScript实现首页图片轮播图效果

    JavaScript实现首页图片轮播图效果

    目录 一.轮番图 二.源码展示 设置body 样式设置 实现轮番 一.轮番图 效果展示: 轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片.这些图片统称为轮播图,这个模块叫做轮播模块. 二.源码展示 设置body <body> <div class="m-view"> <div class="slide" style="left: -800px"> <img src="1

  • 一文搞懂JavaScript如何实现图片懒加载

    一文搞懂JavaScript如何实现图片懒加载

    目录 实现思路 准备知识 data-* getBoundingClientRect() throttle window.innerHeight 完整代码 js部分 CSS部分 运行结果 总结 图片懒加载,往往作为减少首页白屏时间的一个解决方案而出现.直观的来说,就是不要直接加载所有图片,而是满足一定条件后才加载,也就是”惰性加载“.实现图片懒加载的方式有很多,如果要简单点那就直接使用第三方插件:vue-lazyload,如果想探究一下别人的插件是怎么实现图片懒加载的,那么可以看看本文是如何实现的

  • 基于JavaScript编写一个图片转PDF转换器

    基于JavaScript编写一个图片转PDF转换器

    目录 JavaScript 实现图片转 PDF 第一步: PDF Converter的基本结构 第二步: 图片预览框 第 3 步: 图像到 PDF 转换器的按钮 第 4 步: 在 JavaScript 中实现图片转换到 PDF 这是一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件.你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件.但是除了图片之外,其他文件不可以在此处转换为 PDF.我使用 HTML 添加了不同的元素并创建了一个输入框来选择图像. 我们

  • JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)

    目录: 懒加载的意义(为什么要使用懒加载) 原理 代码 在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下. 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区

随机推荐