function zoomOut() { var transitionEnd = $.cssTransitionEnd(), completeTransition = function(e) { $('#book-zoom').unbind(transitionEnd); $('.sj-book').turn('disable', false); $('body').css({'overflow': 'auto'}); moveBar(false); }; $('.sj-book').data().zoomIn = false; $(window).unbind('resize', zoomOut); moveBar(true); $('.zoom-pic').remove(); $('#book-zoom').transform('scale(1, 1)'); $('.samples .bar').css({visibility: 'visible'}); $('#slider-bar').show(); if (transitionEnd) $('#book-zoom').bind(transitionEnd, completeTransition); else setTimeout(completeTransition, 1000); }

时间: 2023-09-11 22:10:22 浏览: 108

这段代码是用于实现书本的缩小动画的 `zoomOut` 函数。它包含了一系列操作和动画效果，用于将书本从放大状态缩小回原始大小。函数的主要逻辑如下： 1. 获取 CSS 过渡结束事件的名称，并定义完成过渡的回调函数 `completeTransition`。 2. 将 `.sj-book` 元素的zoomIn` 数据属性设置为 `false`，表示书本不再处于放大状态。 3. 解绑窗口的 `resize` 事件，以避免缩小动画过程中窗口大小改变导致的问题。 4. 调用 `moveBar` 函数，并传入 `true` 参数，用于显示滑动条。 5. 移除 `.zoom-pic` 元素，该元素可能是书本放大时添加的放大图像。 6. 将 `#book-zoom` 元素的变换设置为 `scale(1, 1)`，即将其恢复为原始大小。 7. 设置样式，使得 `.samples .bar` 元素可见，并显示 `#slider-bar` 元素。 8. 判断浏览器是否支持过渡事件，并根据结果绑定过渡结束事件或者使用定时器来执行完成过渡回调函数。需要注意的是，该代码片段中涉及到的一些函数和选择器，如 `$.cssTransitionEnd()`、`.transform()`、`.unbind()`、`$(window)`、`.remove()`、`.css()`、`setTimeout()`、`.bind()` 等，需要在其他地方找到具体的实现或根据需求进行定义和补充。

function zoomThis(pic) { var position, translate, tmpContainer = $('<div />', {'class': 'zoom-pic'}), transitionEnd = $.cssTransitionEnd(), tmpPic = $('<img />'), zCenterX = $('#book-zoom').width()/2, zCenterY = $('#book-zoom').height()/2, bookPos = $('#book-zoom').offset(), picPos = { left: pic.offset().left - bookPos.left, top: pic.offset().top - bookPos.top }, completeTransition = function() { $('#book-zoom').unbind(transitionEnd); if ($('.sj-book').data().zoomIn) { tmpContainer.appendTo($('body')); $('body').css({'overflow': 'hidden'}); tmpPic.css({ margin: position.top + 'px ' + position.left+'px' }). appendTo(tmpContainer). fadeOut(0). fadeIn(500); } };

这段代码定义了一个名为 `zoomThis` 的函数，用于缩放指定的图片。函数接受一个参数 `pic`，表示要缩放的图片元素。以下是代码的功能解释： 1. 首先，声明变量 `position` 和 `translate`。 2. 创建一个临时的 `<div>` 元素，并设置类名为 `'zoom-pic'`，用于容纳缩放后的图片。 3. 使用 `$().cssTransitionEnd()` 函数获取 CSS 过渡效果结束事件的名称。 4. 创建一个临时的 `<img>` 元素，用于显示缩放后的图片。 5. 获取缩放容器元素 `#book-zoom` 的宽度和高度，以及其相对于文档的偏移。这些值用于计算缩放后的图片位置。 6. 计算要缩放的图片在缩放容器中的相对位置。通过获取要缩放图片元素 `pic` 的偏移，并减去缩放容器的偏移，得到相对位置。 7. 声明一个名为 `completeTransition` 的函数，用于处理过渡效果结束后的操作。 8. 解绑缩放容器上绑定的过渡效果结束事件。 9. 如果当前处于放大状态（`.sj-book` 元素的 `zoomIn` 属性为真），执行以下操作： - 将临时容器元素添加到 `<body>` 元素中。 - 将 `<body>` 元素的滚动条隐藏。 - 设置缩放后的图片的边距，使其位于指定位置。 - 将缩放后的图片添加到临时容器中，并进行淡入动画效果。这段代码的作用是在指定位置缩放图片。根据当前的缩放状态，将缩放后的图片添加到临时容器中，并在视觉上进行过渡效果以显示缩放效果。

function zoomThis(pic) { var position, translate, tmpContainer = $('<div />', {'class': 'zoom-pic'}), transitionEnd = $.cssTransitionEnd(), tmpPic = $('<img />'), zCenterX = $('#book-zoom').width()/2, zCenterY = $('#book-zoom').height()/2, bookPos = $('#book-zoom').offset(), picPos = { left: pic.offset().left - bookPos.left, top: pic.offset().top - bookPos.top }, completeTransition = function() { $('#book-zoom').unbind(transitionEnd); if ($('.sj-book').data().zoomIn) { tmpContainer.appendTo($('body')); $('body').css({'overflow': 'hidden'}); tmpPic.css({ margin: position.top + 'px ' + position.left+'px' }). appendTo(tmpContainer). fadeOut(0). fadeIn(500); } }; $('.sj-book').data().zoomIn = true; $('.sj-book').turn('disable', true); $(window).resize(zoomOut); tmpContainer.click(zoomOut); tmpPic.load(function() { var realWidth = $(this)[0].width, realHeight = $(this)[0].height, zoomFactor = realWidth/pic.width(), picPosition = { top: (picPos.top - zCenterY)zoomFactor + zCenterY + bookPos.top, left: (picPos.left - zCenterX)zoomFactor + zCenterX + bookPos.left }; position = { top: ($(window).height()-realHeight)/2, left: ($(window).width()-realWidth)/2 }; translate = { top: position.top-picPosition.top, left: position.left-picPosition.left }; $('.samples .bar').css({visibility: 'hidden'}); $('#slider-bar').hide(); $('#book-zoom').transform( 'translate('+translate.left+'px, '+translate.top+'px)' + 'scale('+zoomFactor+', '+zoomFactor+')'); if (transitionEnd) $('#book-zoom').bind(transitionEnd, completeTransition); else setTimeout(completeTransition, 1000); }); tmpPic.attr('src', pic.attr('src')); }

这段代码定义了一个名为 `zoomThis` 的函数，用于实现图片的缩放效果。函数的主要逻辑如下： 1. 创建一个临时容器 `tmpContainer` 和一个临时图片 `tmpPic`。 2. 计算缩放中心点 `zCenterX` 和 `zCenterY`，以及书本容器的位置 `bookPos`。 3. 计算被点击的图片在书本容器中的位置 `picPos`。 4. 定义一个完成缩放过渡效果的函数 `completeTransition`，其中包括将临时容器添加到页面上、设置页面的滚动条隐藏、设置临时图片的位置并进行淡入效果等操作。 5. 设置 `zoomIn` 数据属性为 `true`，表示正在进行缩放。 6. 禁用翻页插件。 7. 监听窗口的大小调整事件，并在大小调整时执行 `zoomOut` 函数。 8. 给临时容器绑定点击事件，点击时执行 `zoomOut` 函数。 9. 监听临时图片的加载事件，加载完成后执行缩放的具体逻辑。 10. 在缩放逻辑中，根据实际图片宽高和被点击图片的位置计算出缩放因子和图片的位置。 11. 设置书本容器的变换属性，包括平移和缩放。 12. 如果浏览器支持 CSS 过渡效果，则绑定过渡结束事件，并在过渡结束时执行完成缩放的函数；否则，延迟 1000 毫秒后执行完成缩放的函数。 13. 设置临时图片的 `src` 属性为被点击图片的 `src` 属性，触发图片加载。整个函数的目的是实现点击图片后的缩放效果，并在缩放过程中进行一系列的操作和动画效果。具体的效果和功能需要和其他相关代码结合使用才能完整实现。

阅读全文

相关推荐

理解jQuery Ajax：$.ajax、$.post、$.get实战解析

jQuery $.post() 实现JSON数据客户端与服务器端交互

jQuery常用方法详解：$.trim, $.contains, $.each, $.map, $.inArray, $.extend

--app.js应用程序（{onLaunch-function（）{var that=this；--获取商城名称wx.req

$.format,jquery.format 使用说明

jQuery插件开发的两种方法及$.fn.extend的详解

Ajax $.getJSON案例详解

jquery $.getJSON()跨域请求

$.ajax()方法进行网页间传值示例

JQuery下的Live方法和$.browser方法使用代码

jquery中页面Ajax方法$.load的功能使用介绍

jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

Jquery中的$.each获取各种返回类型数据的使用方法

jquery $.ajax()取xml数据的小问题解决方法

Jquery-Image-Zoom-Plugin-elevatezoom.zip

前端项目-svg.pan-zoom.js.zip

skypesky#leetcode-for-javascript#46. 全排列1

最新推荐

Vue 解决通过this.$refs来获取DOM或者组件报错问题

潮流计算+二阶锥松弛+对偶形式的matlab源码+对偶理论说明文档.zip

Java贪吃蛇小游戏.zip学习资料资源

计算机网络常用命令详解及实验指导

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序