$('.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'));
时间: 2024-01-25 20:04:36 浏览: 37
这段代码执行了一系列操作,用于实现缩放效果。
1. 将 `.sj-book` 元素的 `zoomIn` 数据属性设置为 `true`,表示当前处于放大状态。
2. 禁用 `.sj-book` 元素上的 `turn` 插件,即禁止翻页功能。
3. 绑定 `resize` 事件处理程序 `zoomOut` 到窗口上,即在窗口大小改变时执行缩小操作。
4. 绑定 `click` 事件处理程序 `zoomOut` 到临时容器元素上,即在点击临时容器时执行缩小操作。
5. 在临时图片加载完成后执行回调函数:
- 获取实际图片的宽度和高度。
- 计算缩放因子,即实际图片宽度与原始图片宽度的比例。
- 根据缩放因子和指定的图片位置,计算缩放后的图片在视图中的位置。
- 计算视图容器的位置,使其居中显示。
- 计算平移距离,即视图容器位置与缩放后图片位置之间的差值。
- 隐藏样本栏和滑块条。
- 使用 CSS `transform` 属性对 `#book-zoom` 元素进行平移和缩放变换,实现缩放效果。
- 如果浏览器支持 CSS 过渡效果,则绑定过渡效果结束事件,并在结束后执行 `completeTransition` 函数。
- 否则,延迟1秒后执行 `completeTransition` 函数。
6. 设置临时图片的 `src` 属性,即指定要加载的图片。
这段代码的作用是根据缩放参数和图片位置,计算并应用缩放和平移变换,以实现缩放效果。同时,还进行了一些界面元素和事件的处理,以提供更好的用户体验。
相关问题
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); }
这段代码是用于实现书本的缩小动画的 `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()` 等,需要在其他地方找到具体的实现或根据需求进行定义和补充。
使用--web.disable-authentication=true后台启动mysqld_exporter-0.10.0.linux-amd64,完整命令
在使用--web.disable-authentication=true参数后台启动mysqld_exporter时,可以使用以下命令:
```
./mysqld_exporter --web.disable-authentication=true &
```
这个命令会启动mysqld_exporter,并将其放入后台运行。注意,这里使用了--web.disable-authentication=true参数来禁用身份验证功能,方便测试使用。在实际生产环境中,建议开启身份验证功能,以保护mysqld_exporter的安全。
如果你需要停止mysqld_exporter,可以使用以下命令:
```
pkill mysqld_exporter
```
这个命令会停止所有名为"mysqld_exporter"的进程,所以请确保在停止之前没有其他名为"mysqld_exporter"的进程在运行。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![tgz](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)