让图片真正自适应的jQuery插件:ResponsifyJS

cncde 4年前

一个jquery插曲件让图片能够真正自适应,不会牺牲图像的主要部分。

在线演示:http://responsifyjs.space/#demo 

让图片真正自适应的jQuery插件:ResponsifyJS

How to use

  1. Use this interactive web app to generate the focus area data http://responsifyjs.space/app/

    <img src="image.png" alt=""     data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" />

    data-focus-leftis the focus area's left position comparing to the image's full width, in decimal. For example, if the full width is 300px, the focus area's left is 90, then thedata-focus-leftshould be 90/300 =0.3. Same logic applies to other three data attributes.

  2. Embed the responsify.js in the html

    <script src="responsify.js"></script>
  3. Call responsify function when window object is loaded

    $(window).load(function() {      $('img').responsify();    });
  4. Call responsify function again when the window is being resized (optional)

    $(window).resize(function(){      $('img').responsify();    })

项目主页:http://www.open-open.com/lib/view/home/1449017171202