jQuery+elevateZoom演示多种放大镜效果-php手册-php.cn

Home

php教程

php手册

jQuery+elevateZoom演示多种放大镜效果

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 10, 2016 pm 03:11 PM

elevateZoom 是一个定制性非常高的 jQuery 放大镜插件，可实现电子商务网站中查看大图的效果。它能够对一张图片或两张图片(一张缩略图和一张大图)实现放大效果。放大图片的位置可自定义设置，并且支持内缩放，使用放大镜镜头展示大图。

首先我们看下6种不同放大镜HTML结果：<h1 id="默认效果">默认效果</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1 id="内置镜头">内置镜头</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1 id="镜头聚焦">镜头聚焦</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1 id="淡入-淡出设置">淡入/淡出设置</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1 id="动画">动画</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" > <br> <h1 id="鼠标滚动">鼠标滚动</h1> <br> <img alt="jQuery+elevateZoom演示多种放大镜效果" >6中不同的放大镜效果代码都很简单，代码都已翻译注释：$('#zoom_01').elevateZoom({});//默认效果 <br> <br> $('#zoom_02').elevateZoom({ //内置镜头 <br> zoomType: "inner",//类型：内置镜头 <br> cursor: "crosshair", //光标：十字 <br> zoomWindowFadeIn: 500,//镜头窗口淡入速度 <br> zoomWindowFadeOut: 750 //镜头窗口淡出速度 <br> }); <br> <br> $("#zoom_03").elevateZoom({ //镜头聚焦 <br> zoomType: "lens",//类型：透镜效果 <br> lensShape: "round", //透镜形状：圆形 <br> lensSize: 200 //透镜尺寸：长和宽：200px <br> }); <br> <br> $("#zoom_04").elevateZoom({ //淡入/淡出设置 <br> zoomWindowFadeIn: 500,//镜头窗口淡入速度 <br> zoomWindowFadeOut: 500,//镜头窗口淡出速度 <br> lensFadeIn: 500,//透镜淡入速度 <br> lensFadeOut: 500//透镜淡出速度 <br> }); <br> <br> $("#zoom_05").elevateZoom({ //动画 <br> easing: true //是否开启动画效果 <br> }); <br> <br> $("#zoom_06").elevateZoom({ //鼠标滚动 <br> scrollZoom: true //是否开启鼠标滚动 <br> });放大镜演示：http://www.sucaihuo.com/js/127.html

AD：真正免费，域名+虚机+企业邮箱=0元

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

了解Python编程的入门级代码示例Jan 04, 2024 am 10:50 AM

了解Python编程的入门级代码示例Python是一种简单易学，功能强大的编程语言。对于初学者来说，了解Python编程的入门级代码示例是非常重要的。本文将为您提供一些具体的代码示例，帮助您快速入门。打印HelloWorldprint("HelloWorld")这是Python中最简单的代码示例。print()函数用于将指定的内容输出

PHP переменные в действии: 10 реальных примеров использованияFeb 19, 2024 pm 03:00 PM

PHP变量存储程序运行期间的值，对于构建动态且交互式的WEB应用程序至关重要。本文将深入探讨php变量，并通过10个真实的示例展示它们的实际应用。1.存储用户输入$username=$_POST["username"];$passWord=$_POST["password"];此示例从表单提交中提取用户名和密码，并将其存储在变量中以供进一步处理。2.设置配置值$database_host="localhost";$database_username="username";$database_pa

从入门到精通：Go语言中常用数据结构的代码实现Mar 04, 2024 pm 03:09 PM

标题：从入门到精通：Go语言中常用数据结构的代码实现数据结构在编程中起着至关重要的作用，它是程序设计的基础。在Go语言中，有许多常用的数据结构，掌握这些数据结构的实现方式对于成为一名优秀的程序员至关重要。本文将介绍Go语言中常用的数据结构，并给出相应的代码示例，帮助读者从入门到精通这些数据结构。1.数组（Array）数组是一种基本的数据结构，是一组相同类型

如何使用PHP编写库存管理系统中的库存分仓管理功能代码Aug 06, 2023 pm 04:49 PM

如何使用PHP编写库存管理系统中的库存分仓管理功能代码库存管理是许多企业中不可或缺的一部分。对于拥有多个仓库的企业来说，库存分仓管理功能尤为重要。通过合理管理和跟踪库存，企业可以实现不同仓库之间的库存调拨，优化运营成本，改善协同效率。本文将介绍如何使用PHP编写库存分仓管理功能的代码，并为您提供相关的代码示例。一、建立数据库在开始编写库存分仓管理功能的代码之

Java实现简单的冒泡排序代码Jan 30, 2024 am 09:34 AM

Java冒泡排序最简单的代码示例冒泡排序是一种常见的排序算法，它的基本思想是通过相邻元素的比较和交换来将待排序序列逐步调整为有序序列。下面是一个简单的Java代码示例，演示了如何实现冒泡排序：publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

Go语言编程实例：Web开发中的代码示例Mar 04, 2024 pm 04:54 PM

《Go语言编程实例：Web开发中的代码示例》随着互联网的快速发展，Web开发已经成为各行业中必不可少的一部分。作为一门功能强大且性能优越的编程语言，Go语言在Web开发中越来越受到开发者们的青睐。本文将通过具体的代码示例，介绍如何利用Go语言进行Web开发，让读者能够更好地理解和运用Go语言来构建自己的Web应用。1.简单的HTTP服务器首先，让我们从一个

华为云边缘计算对接指南：Java代码示例快速实现接口Jul 05, 2023 pm 09:57 PM

华为云边缘计算对接指南：Java代码示例快速实现接口随着物联网技术的快速发展和边缘计算的兴起，越来越多的企业开始关注边缘计算的应用。华为云提供了边缘计算服务，为企业提供了高可靠的计算资源和便捷的开发环境，使得边缘计算应用更加容易实现。本文将介绍如何通过Java代码快速实现华为云边缘计算的接口。首先，我们需要准备好开发环境。确保你已经安装了Java开发工具包（

Java 文件操作与云存储集成：探索无限可能Feb 27, 2024 pm 04:55 PM

一、Java文件操作基础在Java中，文件操作是一个基本且重要的功能。您可以使用Java类库中的File类和相关方法来创建、读取、写入和删除文件。File类提供了丰富的api，可以满足大多数的文件操作需求。创建文件Filefile=newFile("sample.txt");file.createNewFile();写入文件FileWriterwriter=newFileWriter(file);writer.write("Hello,World!");writer.close();读取文件Fi

See all articles