<!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. mac键盘图表大全

    Mac键盘图标与对应快捷按键 ⌘——Command () ⌃ ——Control ⌥——Option (alt) ⇧——Shift ⇪——Caps Lock fn——功能键就是fn *.m*.h切换 ...

  2. OKR

    不得不佩服老外对概念的提炼能力.一套一套的. Mission Vision Strategic Objectives Key Results Tasks

  3. net-snmp 的配置

    http://www.cnblogs.com/oloroso/p/4595123.html

  4. Android——黑名单管理

    DBHelper.java package com.example.chenshuai.test; import android.content.Context; import android.dat ...

  5. hbase源码系列（六）HMaster启动过程

    这一章是server端开始的第一章,有兴趣的朋友先去看一下hbase的架构图,我专门从网上弄下来的. 按照HMaster的run方法的注释,我们可以了解到它的启动过程会去做以下的动作. * <l ...

  6. 我对Web开发的认识

    前端 使用mvvm框架,每个视图维护自己的数据模型,更专注于视图模型及状态,在框架的帮助下规范视图与后端的交互及减轻工作量 我的选择是avalon.js 解耦前后端开发 自有资源独立管理,向后端开放资 ...

  7. Androidn Notification的使用,解决找不到setLatestEventInfo方法

    转自:http://blog.csdn.net/songyachao/article/details/51245370#comments 今天使用4.0.3使用 Notification notifi ...

  8. 记 Install VNC On RaspberryOS During 创新实训 自然语言交流系统

    树莓派初始化设置并安装VNC SSH上去之后第一件事就是更新debian: sudo apt-get update, 升级完成后重启一下; 在SSH终端输入sudo raspi-config, 这里需 ...

  9. 使用OAuth Server PHP实现OAuth2服务

    在现在的网络服务中,OAuth2.0服务已经很普遍了,无论是facebook或者微博的第三方登录,还是手机APP登录,都有很广泛的应用.它主要的目的如下:如果用户的照片在A网站,他想要在B网站使用A网 ...

  10. numpy的排序