<!DOCTYPE HTML>

<meta charset="UTF-8">

<head>

  <script src="jquery-1.11.1.min.js"></script>

    <link rel="stylesheet" href="magnific-popup.css"> 

<!-- jQuery 1.7.+ or Zepto.js 1.0+ -->

<!-- Magnific Popup core JS file -->

<script src="jquery.magnific-popup.min.js"></script>

<style>

* {

    margin:;

    padding:;

}

        img {

            height: 30px;

            width: 30px;

        }

    </style>

<script>

$(document).ready(function() {

  //$('.image-link').magnificPopup({type:'image',zoom: {

   // enabled: true}});//带zoom效果的

 $('.image-link').magnificPopup({type:'image'});     

});

</script>

</head>

<body class="sapUiBody">

    <a href="http://teacher.anniekids.net//pic/P_PRE/Lesson28/L28P_A.jpg" class="image-link">

    <img alt="缩略图" src="http://teacher.anniekids.net//pic/P_PRE/Lesson28/L28P_A.jpg" />

    </a>

</div>

</body>

好用的图片缩放JS的更多相关文章

  1. 阻止pc端浏览器缩放js代码

    阻止pc端浏览器缩放js代码 众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable= ...

  2. HTML5 图片缩放功能

    腾讯新闻上用的插件(xw.qq.com) 缩放插件scale.js (function(window, undefined) { var document = window.document, sup ...

  3. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  4. CSS实现图片缩放特效

    今天是感恩节,祝大家感恩节快乐哦!最近天冷了,大家注意保暖哟.下面一起看看小颖写的demo吧. html代码: <!DOCTYPE html> <html> <head& ...

  5. PHP图片裁剪_图片缩放_PHP生成缩略图

    在制作网页过程中,为了排版整齐美观,对网页中的图片处理成固定大小尺寸的图片,或是要截去图片边角中含有水印的图片,对于图片量多,每天更新大量图,靠人工PS处理是不现实的,那么有没有自动处理图片的程序了! ...

  6. iOS开发UI篇—UIScrollView控件实现图片缩放功能

    iOS开发UI篇—UIScrollView控件实现图片缩放功能 一.缩放 1.简单说明: 有些时候,我们可能要对某些内容进行手势缩放,如下图所示 UIScrollView不仅能滚动显示大量内容,还能对 ...

  7. UISlider显示进度(并且实现图片缩放)

    图片展示效果如下: 其他没什么好说的,直接上代码: RootView.h: #import <UIKit/UIKit.h> @interface RootView : UIView @pr ...

  8. Android图片缩放方法

    安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...

  9. Android安卓开发中图片缩放讲解

    安卓开发中应用到图片的处理时候,我们通常会怎么缩放操作呢,来看下面的两种做法: 方法1:按固定比例进行缩放 在开发一些软件,如新闻客户端,很多时候要显示图片的缩略图,由于手机屏幕限制,一般情况下,我们 ...

随机推荐

  1. WPF中的数据驱动

    在WPF出现之前,Win Form,ASP.NET等技术均采用“事件驱动”理念,这种由“事件-订阅-事件处理器”关系交织在一起构成的程序,景观可以使用MVC.MVP等设计模式,但一不小心就会使界面逻辑 ...

  2. python 全局变量的使用

    我尝试使用 类似 C 语言的方式去调用 python 的全局变量,发现不行,后经过 尝试,要使用 global 进行调用 test_num = 0; # 首先声明一个全局变量 def test_fun ...

  3. Postgres快速创建大量测试数据

    DROP TABLE IF EXISTS color; CREATE TABLE color( cname ), remark ) ); ),) ,); 插入10000000数据之后,用时51秒 对于 ...

  4. Volatile和Transient

    Volatile: Volatile修饰的成员变量在每次被线程访问时,都强迫从主内存中重读该成员变量的值.而且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在任何时刻,两个不同的线程总是看 ...

  5. 搭建自己的挂Q平台

    准备工作: 在前篇[分享]免费建立自己的站点里面介绍了怎么申请免费域名和空间. 在这里[随记]Q号解除限制一波三折有我被挂Q工具坑苦的经历. 在网上(出处不明了,下载的包太多,非CSDN)下载到的免费 ...

  6. SpringBoot 无法显示html文件 找不到html文件 如果显示html文件

    两种情况: 1.如果使用了 thymeleaf 模板引擎,html文件可以放在 template文件夹中,如果不是一定不要放进去,否则找不到,因为html是静态页面,所以放在把此类文件放在了stati ...

  7. Graph-BFS-Fly-图的广度优先遍历-最小转机问题

    #include <iostream> #include <queue> using namespace std; /* 5 7 1 5 1 2 1 3 2 3 2 4 3 4 ...

  8. Writing a Reusable Custom Control in WPF

    In my previous post, I have already defined how you can inherit from an existing control and define ...

  9. 磁盘映射： between 宿主机 and 客户机

    一.虚拟机映射到宿主机     在虚拟机关机的状态下,双击右侧设备栏里硬盘,在弹出的窗口中单击“实用程序“,选择“映射”.打开映射虚拟磁盘的窗口,其中的“卷”就是你希望映射虚拟机中的哪个分区到主机,如 ...

  10. SpringCloud微服务部署

    https://blog.csdn.net/weixin_36397925/article/details/79496657 https://blog.csdn.net/forezp/article/ ...