`
齐晓威_518
  • 浏览: 606849 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

imgPreview - 实现图片预览功能的jQuery插件

阅读更多

jQuery以其插件众多、易于使用的特点流行于开发人员中,jQuery有多种插件供你使用。这里我要推荐的就是一个实现了图片预览功能的jQuery插件imgPreview,鼠标移到图片链接上时可以预览图片。

imppreview图片预览

  它也是一个轻量级的插件,压缩后的版本只有1.44kb大小。当鼠标移到图片链接上时,此插件会以 Tooltip 效果显示图片预览框。插件提供了多个可选参数的设置,你可以自己定义想要的效果,包括显示边框、标题,自定义样式等。

如何使用

  首先在页面中引入jquery及插件,然后添加一个图片链接
    <a href="图片.jpg">图片预览</a>
  最简单的不带任何参数的调用
    $('a').imgPreview();

分享到:
评论

相关推荐

    Jquery实现的图片预览插件(imgPpreview)完整实例

    Jquery实现的图片预览插件完整实例 Jquery-1.3.2 + imgpreview.0.22.js

    jQuery的图片预览imagePreview插件.zip

    jQuery的图片预览imagePreview插件, 改进版。。jQuery鼠标滑过预览大图特效,在对图片需要放大显示的网站使用,使用的也很广泛

    jquery 图片预览的插件

    jsp调用imgpreview.full.0.22.jquery.js,即可实现的图片预览,使用简单方便!

    jquery图片预览js插件

    用jquery实现页面查看图片时的翻页预览效果

    jquery实现兼容浏览器的图片上传本地预览功能

    一、图片上传实现本地预览 由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、ie8...

    js_img_preview.rar_ImgPreview.js_JavaScript 导航_jquery preview.js

    JavaScript实现的链接提示效果,实际上内部那个JS文件是jquery的源码。当鼠标划过文字链接时显示对应图片,目前,很多网址大全网站中加入有这项功能,使网址导航更具人性化,当鼠标滑过网址名称的时候,立即显示出该...

    react-img-preview:React Image Preview插件

    一个React集成的移动端与PC端图片预览插件 Demo Requirements Installation npm i react-img-preview -S Usage Import plugin import Preview from 'react-img-preview' Examples import React from 'react' import ...

    imgpreview

    imgpreview

    img-previewer:轻量级javascript图像查看插件,具有流畅的动画和0依赖性

    轻巧且强大的 javascript 图片预览插件,开箱即用,无需多余的配置.适用于任何网页页面,无需改变页面 html 代码结构 提供了常用的功能: 鼠标滚轮缩放图片 图标拖动图片 流畅的过渡动画 上一张&下一张 demo 安装 npm ...

    imgs-preview-native:使用native-js的图像预览插件

    imgs-preview-native a images-preview plugin using native-js ...实例化时传入需要预览的所有图片的父元素; 可传class(如: ".imgsParent")、id(如: "#imgsParent")、 或直接传入父元素(如:

    vue.js实现双击放大预览功能

    本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下 imgPreview组件 &lt;div class=vue-uploader keyup.esc.native=hide&gt; &lt;div v-if=visible click.self=hide class=img_model&gt; ...

    PHPuploadclassjpg.rar

    $max_file_size=10000000; //上传文件大小限制, 单位BYTE ... //取得当前路径 $destination_folder="up/"; //上传文件路径 ... //是否生成预览图(1为生成,0为不生成); $imgpreviewsize=1/1; //缩略图比例

    OTImgPreview:Android多图预览

    Android多图预览 For 截屏 设置 要使用此库,您的minSdkVersion必须大于等于19 将其添加到存储库末尾的root build.gradle中 allprojects { repositories { .. . maven { url ' https://www.jitpack.io ' } } }...

Global site tag (gtag.js) - Google Analytics