插件
技术学习

技术博客

人工智能 大数据 前端开发 笔记

技术问答

IT资料下载

提供it学习资料上传下载服务

编程教程

java入门php入门人工智能入门

开发工具

在线开发环境WEBIDE

Html Python Java Php Phpcli Golang C# Nodejs C C++ Sql R Rust Ruby Dart Vb D F# Typescript Coffeescript Julia Kotlin Perl Groovy Lua Vala Ocaml Assembly Objectc Scala Erlang Pascal Swift Fortran Bash Clojure Ada Elixir Cobol Haskell Nim Racket Lisp

程序员工具箱

js压缩混淆图片压缩sqlite在线打开

开发框架

前端框架bfwuijs按需加载bfwonesoa框架bfwsoa分布式大数据框架bfwsea

离线开发环境

php集成开发包（bfwkit）

模板素材

js插件库

幻灯片人工智能数据库表单

html特效 代码库

三维粒子视觉差异动画

系统模板 系统源码

企业建站电商博客大数据人工智能

前端素材

图标图片字体视频音频

人工智能模型

人脸识别模型语音识别模型图片分类模型

面试招聘

外包技能

接外包私活按技能找人

码聊BFWIM

it人士专用及时通讯系统

IT笔试面试题库

golang笔试题php笔试题java笔试题python笔试题html前端笔试题

云空间

云桌面

专为IT技术人员打造的云电脑

域名

顶级域名注册 域名信息查询

云主机

Html空间 Php空间 Java空间 Python空间

我要吐槽
搜索
当前位置：首页/图片

mediumLightbox.js 一款精简文章图片放大并滚动自动还原插件，兼容手机端

mediumLightbox.js 一款精简文章图片放大并滚动自动还原插件，兼容手机端

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["medium-lightbox", "medium-lightbox"], function() {
                MediumLightbox('figure.zoom-effect', {
                    //margin:300
                });
            });
        });
    </script>
</head>
<body>
    <div class="post">
        <h1>往下滚动，点击图片放大，然后继续滚动</h1>
        <h3>Scroll down and click over the images</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nam doloremque at architecto numquam quae id. Iste deleniti, aliquam cum quas! Quae nostrum dolorum temporibus, delectus quam facere eligendi. Nisi velit impedit esse sunt architecto officia, id, debitis hic aliquid blanditiis, expedita porro earum voluptatibus error maxime ratione, dolorem ad recusandae! Sequi hic perspiciatis inventore quia corporis, odit quam ipsa maiores reprehenderit, expedita itaque. Qui consectetur fuga eos esse. Placeat iure corrupti eos asperiores rem ratione accusamus, perspiciatis sit dolorum quo ex debitis corporis iste labore. Dolorum voluptatibus eaque sint consequatur neque, quos nobis laudantium alias error laborum quo, ipsa.
        <figure class="one-third left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 75.78947368421053%;"></div>
                <img class="img" data-width="475" data-height="360" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quibusdam dolore beatae adipisci nobis, odit doloremque reprehenderit, nam maxime aliquid impedit porro nihil, quo consequuntur ducimus! Nesciunt modi qui eaque fuga assumenda blanditiis, eos velit libero, ipsa, tenetur ipsam repudiandae harum magni accusantium! Iusto voluptas ipsum praesentium quisquam, dicta, accusantium eaque laborum. Quisquam inventore illum totam temporibus dolorum excepturi adipisci minus ea aspernatur dignissimos, laudantium qui blanditiis rem ut nulla impedit odio quo mollitia veniam, vero amet deleniti perferendis quibusdam. Labore perspiciatis consequatur similique optio totam dolor molestias eius quae corporis laudantium odio, cupiditate, sapiente nobis obcaecati doloremque aperiam iste expedita at sequi dignissimos. Delectus in, quaerat ab eum labore qui, assumenda illum itaque ad numquam fugiat adipisci impedit rerum? Unde dolore doloribus accusantium quod sapiente id nam cumque aliquam assumenda a corporis fuga ad qui odit hic possimus, blanditiis alias quia fugit. Sunt, excepturi provident ea modi at nesciunt eum enim dicta, veritatis illum aliquam distinctio perspiciatis quidem quo, sapiente earum velit autem. Explicabo, magni consequuntur. Debitis ea neque asperiores facere impedit sed saepe illo enim optio aut? Ad amet nostrum tempora recusandae explicabo voluptate quidem, esse, et nihil temporibus reprehenderit magni repellat sequi impedit dolore sed vitae cupiditate.
        <figure class="one-third right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 209.96%;"></div>
                <img class="img" data-width="763" data-height="1602" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum sequi aspernatur cumque nisi illo alias possimus ipsum numquam. Accusantium soluta fuga ipsa tempora mollitia, illum et aperiam officia! Dicta veritatis vitae culpa itaque praesentium eos ipsum maiores aspernatur quam hic. Consectetur, voluptas blanditiis velit dolores nihil eos, inventore, doloribus molestias dicta suscipit dolore rem quisquam quasi officia? Blanditiis, labore animi nesciunt exercitationem numquam velit nostrum, consequuntur illum quis laudantium enim quibusdam maxime, aliquam debitis sunt quam neque alias fugiat rem fugit explicabo nobis totam. Sit doloremque, quibusdam nostrum aliquam minima, asperiores vel atque! Est dignissimos veritatis expedita sunt ut, itaque ratione magnam tempora quo a repellat nobis, nostrum debitis ea aut optio tenetur aspernatur ipsa. Quisquam similique sint nihil veniam hic atque molestiae pariatur iure illo dicta quibusdam inventore, perspiciatis suscipit, illum esse laborum quidem quaerat in repellendus necessitatibus eveniet? Officiis impedit fuga, ea laboriosam ipsum autem dolores quo alias harum dignissimos consectetur repudiandae voluptatum voluptate fugiat qui facere vero laborum nam optio consequuntur! Saepe molestiae pariatur temporibus totam doloremque, dolorum minima consequatur doloribus voluptate nobis quaerat vel repellat error quasi optio sed aut? Maiores non eveniet, laborum nulla, voluptatem nisi, molestias perferendis temporibus, repellendus vero itaque dicta quidem! At.
        <figure class="half left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 50%;"></div>
                <img class="img" data-width="900" data-height="450" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos eius soluta ipsa maxime officia quam corrupti, omnis dignissimos ea. Atque commodi, quasi officiis! Quod alias ad repellat, autem aut voluptas. Ipsa obcaecati reiciendis harum consequuntur animi, sequi atque commodi quam, laborum voluptatibus dolorem quidem ea nihil aspernatur ut dolor maiores, architecto, odit illo! Vitae mollitia magni similique rem dolor ex modi doloremque totam autem adipisci in praesentium sunt dignissimos unde nulla est eum amet neque, ab illum nobis. Eos eligendi aliquid minus, nesciunt accusantium quos rerum expedita magni minima obcaecati voluptatibus adipisci aliquam labore rem necessitatibus? Incidunt sed doloribus dicta reiciendis officia alias atque, nostrum, cum delectus vitae odit et harum eum deserunt dolor. Laborum nihil porro aspernatur numquam ex animi obcaecati amet, doloribus officia, dolor doloremque. Repellendus sunt tenetur, facilis hic quasi itaque eius sequi! Deserunt dolorum accusamus ut veritatis repellat dolorem eveniet tempora minima blanditiis, quibusdam facilis vel quisquam, facere distinctio vitae! Corporis hic qui mollitia impedit, distinctio laborum aspernatur a tenetur quaerat autem? Quis repellendus incidunt mollitia deleniti dolores ad tenetur, veniam, perferendis minima rem inventore. Saepe, molestiae iste qui necessitatibus. Nihil, animi odit cumque at ea minima eaque adipisci dolore quae, recusandae a rerum aliquam eius aspernatur voluptate unde placeat sint laudantium, dicta sunt non vitae soluta labore perspiciatis. Cupiditate esse id maiores a, excepturi culpa assumenda porro, non modi nihil, velit nostrum obcaecati placeat fuga quod. Placeat ab commodi itaque iusto provident nemo qui ducimus natus, delectus laudantium quia expedita, accusamus quisquam dicta magni! Ipsum reprehenderit, doloribus nisi in natus facere voluptatibus dolorem cupiditate nam voluptas sequi nobis recusandae veniam error et magnam unde pariatur ad velit, provident maiores. Quo unde obcaecati vitae earum exercitationem facere aliquid dolorum, eum dicta debitis pariatur nobis, hic recusandae accusantium beatae odio. Quo tenetur fugit unde quibusdam, voluptatibus repudiandae!
        <figure class="one-third right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 56.25%;"></div>
                <img class="img" data-width="1920" data-height="1080" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore et qui modi provident expedita, atque ipsum, rem quo a dignissimos illum maxime voluptatum aperiam commodi in eaque culpa obcaecati. Inventore incidunt numquam vero repellendus? Officia nam unde, obcaecati reprehenderit impedit, corrupti vel aut architecto necessitatibus, id explicabo saepe nisi facere quidem inventore deleniti itaque ullam recusandae! Doloribus harum temporibus quisquam hic maiores, alias tempore, omnis amet, fugiat officiis quod excepturi, cumque illum. Cum nemo maiores itaque velit sint facilis eum exercitationem, earum, quibusdam ratione quo nobis sequi fugit quaerat ducimus, quos magnam iusto. Impedit quas cum obcaecati error, nulla consequatur.
        <figure class="full left zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 100%;"></div>
                <img class="img" data-width="800" data-height="800" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facere odit culpa numquam cumque omnis nemo itaque assumenda! Quo amet vel laboriosam repellat, odit. Eveniet incidunt odio voluptates dolorum aperiam rerum veritatis delectus fuga nihil aut repellendus, optio saepe repudiandae quaerat vel itaque voluptatum consectetur veniam inventore! Ducimus doloremque reiciendis aspernatur, nihil quidem quod aliquam, fugit et placeat a vero aut sunt quis nesciunt quam, fuga corporis. Quisquam possimus odit iure ratione, blanditiis explicabo non numquam praesentium doloremque sequi illo provident itaque, dicta aperiam eligendi veniam ea dolorem ipsa similique rerum, molestiae veritatis quod. Consequatur nihil non, adipisci. Assumenda, consequatur quis ad voluptatibus mollitia sapiente eius autem ipsam dolores. Sapiente commodi delectus, minus laborum vero inventore totam necessitatibus deleniti recusandae voluptates, iste expedita pariatur est consequatur voluptate error officiis et laudantium, optio at eos. Nobis, quis! Officiis, nobis voluptatem. Omnis doloremque in maxime voluptatem perspiciatis sint, necessitatibus fuga neque, quasi, voluptas recusandae debitis, et ut repellat earum? Nesciunt at, iste et rem dignissimos ex, reiciendis sit sint assumenda voluptate ullam. Quaerat corrupti aliquid fugit labore quam, ducimus ab eos consequuntur itaque sit quod, similique tenetur reprehenderit libero quis voluptas numquam deleniti voluptatem non quibusdam. Dolor ea asperiores fugiat vero eius.
        <figure class="half right zoom-effect">
            <div class="aspectRatioPlaceholder">
                <div class="aspect-ratio-fill" style="padding-bottom: 40%;"></div>
                <img class="img" data-width="2560" data-height="1024" src="http://editor.bfw.wiki/bfwrepo/image/demoimgsmall.jpg">
            </div>
        </figure>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dolor harum quis, provident! Provident, itaque eum quos eaque vel natus laborum illo modi molestias non dicta, voluptatibus debitis quaerat, reiciendis, amet porro deleniti. Impedit repellat, nulla iure odio labore dolorum vel laboriosam officiis eligendi, obcaecati eos magni animi voluptatibus optio repudiandae nobis quae. Officia quibusdam consequatur doloremque magnam voluptas, est ratione quidem qui cum, saepe, repudiandae! Amet repudiandae, officia tempora error nulla magni veniam, voluptatem autem voluptatum voluptate ipsa aliquam architecto adipisci dolorum rerum. Obcaecati provident voluptatum numquam odio eos, incidunt ullam totam, laboriosam nobis voluptas ipsa, quo consequatur error. Ex totam soluta molestias beatae ratione atque illo, et eveniet maiores in dolores sunt nobis culpa, alias commodi ducimus voluptas vitae, officiis eum magni sit fugit, distinctio repellendus quaerat! Deserunt, illum quod consectetur sequi similique nesciunt sint qui excepturi necessitatibus et tenetur assumenda minus dolore possimus maiores debitis fugit reiciendis nobis pariatur minima eligendi doloremque. Itaque quas earum accusamus vitae nisi est delectus cupiditate a. In quod, nobis iste neque, harum ad. Ipsum ipsa accusamus cum illum, ullam at explicabo. Minus quod non, nulla ad vel totam ipsa enim nam vero eaque tempore fugiat ea architecto illum aut velit placeat distinctio rerum hic? Aliquam tempore, deserunt sed quas sint, ex non omnis ab consequatur rem, tenetur. Nisi ipsam quia hic, temporibus voluptas ducimus, vel inventore. Quaerat voluptate aliquam nobis, tempore dignissimos amet aut in, dolores? Commodi optio, autem fuga beatae natus eum pariatur voluptatem iusto possimus at voluptate, similique perferendis nesciunt dolores facilis excepturi ad recusandae earum numquam velit officiis facere praesentium voluptates minus. A ea sunt dolor doloribus provident perferendis porro aliquam amet mollitia vero, nesciunt facere eaque eum voluptate quos laborum quod ratione voluptas labore rem tempore officiis! Alias ipsam ex maiores, sint, adipisci eius. Minus culpa at fugit accusantium maiores rem vero, soluta ex odit atque incidunt quaerat optio placeat ipsa modi est debitis alias nemo. Laborum deserunt repellat sit, nam ipsam fuga quis error ut eaque sed voluptatum laudantium alias omnis repellendus. Dolorem possimus modi, ratione reprehenderit magni, adipisci quo quos temporibus deserunt omnis laudantium eum fugit eveniet soluta delectus fuga, ut eaque architecto culpa odio hic quia. Cum voluptas provident aspernatur nemo inventore saepe quisquam tempora non cupiditate dolore, officiis ullam praesentium debitis repudiandae tempore ab explicabo totam delectus sunt quos qui. Mollitia iste repellendus iusto quod odit minus architecto earum, similique corporis quos voluptates debitis eligendi. Iure voluptates eum amet necessitatibus odio, molestias aperiam. Maiores natus, delectus quae suscipit voluptatum cumque corporis obcaecati eum quaerat facere maxime expedita? Placeat quisquam iste minus incidunt, autem at, odit aliquid debitis omnis ipsam harum numquam quasi non veniam doloremque officia voluptatibus eligendi possimus excepturi ullam exercitationem adipisci animi pariatur. Sequi id iure nesciunt eius ad dignissimos dolor ea, odit magni incidunt consequatur perspiciatis laudantium, quo rem expedita hic libero totam aliquid repellendus tenetur! Repellendus officiis officia iusto, aliquam debitis, neque dolorem possimus praesentium voluptatibus quis, reiciendis dolore itaque est voluptatem sed. Aperiam, illum rem facilis quo. Doloribus.
    </div>

</body>
</html>


官方地址https://github.com/davidecalignano/MediumLightbox

mediumLightbox.js 一款精简 文章图片 放大 滚动自动还原 插件 兼容手机
立即下载mediumLightbox.js查看所有js插件

网友评论0

取消

最新发现
程序员在线工具箱
BFW.WIKI 专业的互联网技术学习交流开发部署一站式平台
本站所有栏目导航

技术学习

技术博客 技术问答 技术课程 资料下载

工具环境

webide bfwstudio 工具箱 码聊 域名空间

源码模板

js插件库 html特效 代码库 开源项目 模板库 素材库

技能外包

人才技能库 项目外包 笔试题库
备案号：苏ICP备19002694号
关于我们 免责声明