zoomlens-js

1.0.0 • Public • Published

Logo

npm version github version Install size publish size Gzip size latest tag
latest tag Downloads minified size Author License

If you like this content, you can ping me or follow me on Github. 👍

NPM stats

Language:  English | 中文

Table of Contents

Introduction

This is a small and powerful commodity map magnifying glass tool, it has no dependencies; There is no special requirement for image size, no need to manually write HTML tags or import additional Css styles. The picture loading is done asynchronously, so you don't have to worry about performance, and the only thing you have to do is make sure it's a picture.

Blueprint

Logo

Install

Download

Install via npm, or download as a zip:

npm install zoomlens-js --save

CDN Link

<script src="https://unpkg.com/zoomlens-js@1.0.0/dist/zoomlens-1.0.0.js"></script>
<!-- or -->
<script src="https://unpkg.com/zoomlens-js@1.0.0/dist/zoomlens-1.0.0.min.js"></script>

Usage

Then import it into the file where you'll use it.

<script src="./zoomlens-js/dist/zoomlens-1.0.0.js"></script>
var zoomlens = new zoomlens({
  el: "#wrap",
  paths: ["pic_1.jpg","pic_2.jpg",...]
})
 

normal

zoomlens mode is "normal" by default, so you don't have to specify the "zoomType" type.

var zoomlens = new zoomlens({
  el: "#wrap",
  zoomType: "normal",
  paths: ["pic_1.jpg","pic_2.jpg",...]
})

inside

In "inside" mode, the large image is embedded in the "mmoc".

var zoomlens = new zoomlenss({
  el: "#wrap",
  zoomType: "inside",
  paths: ["pic_1.jpg","pic_2.jpg",...]
})

drag

In "drag" mode, you need to drag the mouse to see the details of the picture.

var zoomlens = new zoomlens({
  el: "#wrap",
  zoomType: "drag",
  paths: ["pic_1.jpg","pic_2.jpg",...]
})

Examples

Demo

Options

Property Type Default Example
el String | HTMLTemplateElement null "#wrap" | element
paths Object | Array null ['xxx.jpg',...] | {max: [],min: []}
styles Object Object {mmoc:{},zoom:{},mask:{},pics:{}}
zoomType String "normal" "normal" | "inside" | "drag"
correlate Boolean true true | false
zoomScale number 0.38 0 ~ 1
zoomResize Boolean false true | false
zoomSeat Boolean | String "right" true | false | "left" | "top" | "bottom"
picsSeat Boolean | String "bottom" true | false | "left" | "top" | "right"
dotGap number 1 0 ~
dotSize Array [1,1] [~,~]
dotColor String "#36c" "#36c" | "blue"
imgGap number 10 0 ~
imgBorder String "1px solid #666" "1px solid #666" | 0
picsSpeed number 0.2 0 ~ 1
adsorbSpeed number 0.2 0 ~ 1
  • el: The target element to be manipulated can be either a string or an HTML element object.
  • paths: The image path to be manipulated can be an array or a Javscript object.
  • styles: HTML element style sheet, which can only be a javascript object, see the action documentation for details.
  • zoomType: Currently, there are only three types of presentation on the page: "noraml", "inside" and "drag".
  • correlate: The associated state of "mask" and "zoom" is "true" by default, and the size of "zoom" refers to "mask".
  • zoomScale: The zoom ratio of the large picture, referring to the size of "mask", is 0.38 by default and can only be set to "1" at most.
  • zoomResize: If the size of "zoom" is adjustable, when the value is "true", the size of the "zoom" element will no longer refer to the "mask", but will use the value given by the user.
  • zoomSeat: The "zoom" position, by default, will be to the right of the "mmoc", and if set to "false" it will refer to the nearest positioning element.
  • picsSeat: The "pics" position, by default, will be to the bottom of the "mmoc", and if set to "false" it will refer to the nearest positioning element.
  • dotGap: The spacing of the dots in the "mask" is "1px" by default, but this is not very accurate, and if you set a value that pushes the element out of the visible area,"dotGap" will compress as necessary.
  • dotSize: The size of the dot in the "mask", what it needs is an array, and the values in the array are the ratio of the dot's length to its width.
  • dotColor: The color of the dot in the "mask", the default color is "#36c", you can set it.
  • imgGap: The spacing in pics, which defaults to "10px", cannot be greater than the width and height of the mmoc, which is allowed if you must.
  • imgBorder: Pics picture border, when you move the mouse over the picture you will find that the selected picture will generate a border.
  • picsSpeed: When the mouse is released after dragging the picture, the animation delay is 0.2 by default and can only be set to "1" at most.
  • adsorbSpeed: When the mouse is released after dragging the picture, the animation that is executed when the element is out of the visual area, the animation delay is 0.2 by default, and can only be set to "1" at most.

Browser Support

IE Edge Chrome Firefox Opera Safari
IE 7+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

Maintainers

@Dev Lovas.

Contributing

zoomlens-js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out the contributing guide for more!

Thank you to all the people who already contributed to zoomlens-js!

History

For detailed changelog, check Releases.

License

MIT License Copyright(c)2020-present, Dev Lovas.

Readme

Keywords

Package Sidebar

Install

npm i zoomlens-js

Weekly Downloads

29

Version

1.0.0

License

MIT

Unpacked Size

2.13 MB

Total Files

39

Last publish

Collaborators

  • devlovas