实现图片局部放大显示效果的超强jQuery插件cloud-zoom_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

Cloud Zoom


More script and css style : www.htmldrive.net

Cloud Zoom is a jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers.

Standard Settings With Gallery

Thumbnail 1 Thumbnail 2 Thumbnail 3

Hover over the large image to see the zoom working.

These are the 'out of the box' settings, with the big image appearing to the right of the small image.

The appearance of the smaller image, lens and zoom window can be altered with regular CSS.

Features

  • Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
  • Easy integration with basic valid HTML.
  • Small 6Kb (minified) script.
  • Smooth zoom movement.
  • Gallery mode.
  • Tint, soft focus and inner zoom features.
  • Degrades gracefully with Javascript turned off.
  • Fully accessible with no CSS or text only browsers.
  • It's completely free.

Tints

Add a tint of any colour (including black or white) to the small image. The intensity of tint is fully customisable, shown here in red at 50%.

In this example, the movement smoothness is set to a higher value for a gentle drifting effect.

Inner Zoom

Zoom position can be inside the smaller image, useful if you would rather not obscure any other content.

Soft Focus

Apply a subtle soft-focus effect to the small image.

In this example, the zoom window position is specified as a div target which can be positioned anywhere. The movement smoothness is set to a lower value for a snappier feel.

代码整理:时代Java(NowJava.com) 更多相关效果,请到时代Java(NowJava.com) 脚本下载栏目

注:此代码仅供学习交流,请勿用于商业用途。

时代Java(NowJava.com)素材中心整理。




下载代码说明
X关闭

超强jQuery插件cloud-zoom实现图片局部放大显示效果

cloud-zoom是一个实现图片局部放大显示的jquery插件,鼠标滑过图片可以在旁边实现局部放大效果,也可以直接将图片放大显示,还可以使用遮罩将原来的图片遮罩起来,只显示局部放大的部分,效果超强