合肥建网站要多少钱,遵义网站制作报价,怎么才能创建个人网站,优秀的交互设计作品集xZoom是一款多功能的jquery图片预览放大镜插件。它支持多种图片放大模式#xff0c;可以和Fancy Box或Magnific Pop-up等插件结合使用#xff0c;功能非常强大。
在线预览 下载
使用方法
在页面中引入jquery和xzoom.css以及xzoom.js文件。
link relstylesheet可以和Fancy Box或Magnific Pop-up等插件结合使用功能非常强大。
在线预览 下载
使用方法
在页面中引入jquery和xzoom.css以及xzoom.js文件。
link relstylesheet hrefcss/xzoom.css
script srcjquery.min.js/script
script srcjs/xzoom.min.js/scriptHTML结构 xZoom要求使用下面的基本HTML结构你可以按自己的需求设置图片的数量。
img classxzoom srcpath/to/preview_image_01.jpg xoriginalpath/to/original_image_01.jpg /div classxzoom-thumbsa hrefpath/to/original_image_01.jpgimg classxzoom-gallery width80 srcpath/to/thumbs_image_01.jpg xpreviewpath/to/preview_image_01.jpg/aa hrefpath/to/original_image_02.jpgimg classxzoom-gallery width80 srcpath/to/preview_image_02.jpg/aa hrefpath/to/original_image_03.jpgimg classxzoom-gallery width80 srcpath/to/preview_image_03.jpg/aa hrefpath/to/original_image_04.jpgimg classxzoom-gallery width80 srcpath/to/preview_image_04.jpg/a
/div初始化插件 在页面DOM元素加载完毕之后可以通过下面的方法来初始化xZoom插件。
$(.xzoom).xzoom();配置参数
xZoom图片放大镜插件的可用配置参数如下
属性默认值描述positionright图片放大窗口的位置。可用值有top, left, right, bottom, inside, lens, #ID。rootOutputtrue该参数可以将输出的放大窗口设置在任何位置。Xoffset0图片放大窗口水平位置的偏移。Yoffset0图片放大窗口垂直位置的偏移。fadeIntrue显示放大图片是否使用淡入效果。fadeTranstrue淡入淡出效果的过渡时间。fadeOutfalse关闭放大图片是否使用淡出效果。smoothZoomMove3在大窗口中图片的平滑移动级别数值越大越平滑。smoothLensMove1圆形镜片的平滑移动级别。smoothScale6放大缩小的平滑级别。defaultScale0放大图片打开时的默认放大级别。-1表示-100%1表示100%。scrolltrue是否在滚动鼠标滚轮时放大缩小图片。tintfalse背景颜色。建议使用十六进制的颜色值。tintOpacity0.5背景的透明度值在0-1之间。lensfalse放大镜的颜色建议使用十六进制的颜色值。lensOpacity0.5放大镜的透明度。lensShapebox放大镜的的形状box 或 circle。zoomWidthauto放大镜的宽度单位像素。zoomHeightauto放大镜的高度单位像素。sourceClassxzoom-source原图div的class名称。loadingClassxzoom-loading预加载div的class名称。lensClassxzoom-lens放大镜div的class名称。zoomClassxzoom-preview放大窗口div的class名称。activeClassxactive当前缩略图的class名称。adaptivetrue是否开启自适应功能。lensReversefalse当旋转内部放大镜并且该选项为true时放大镜的移动和显示方向相反。adaptiveReversefalse和lensReverse相同但是只有在adaptive选项为true是有效。titlefalse是否在输出窗口中显示图片标题。titleClassxzoom-caption图片标题div的class名称。bgfalse放大图片作为背景输出。
