当前位置: 开发笔记 > 编程语言 > 正文

这个效果是用了CSS3的哪个属性

作者：重庆刮刮匠 | 来源：互联网 | 2023-05-16 20:44

http:www.pixedelic.compluginscamerawp.php页面上最后2个图片交替的时候图片被分割成一个一个矩形消失请问这个是css3或者html5的哪个属性哈

http://www.pixedelic.com/plugins/camera/wp.php
页面上最后2个图片交替的时候图片被分割成一个一个矩形消失请问这个是css3或者html5的哪个属性哈

21 个解决方案

#1

该回复于2012-07-06 12:53:33被版主删除

#2

该回复于2012-07-06 12:49:43被版主删除

#3

不知道是不是jQuery Easing里面定义的呢。。。我刚才看了一下jQuery Easing的效果看着都一样坐等高人0 0

#4

我也觉得easing。。。但是easing有那种分割么虽然我知道jquery官网ui那个可以

#5

这插件在IE下面表现的貌似不怎么样啊

#6

你知道那个分割成小方框是怎么个原理么我想自己写UI

#7

html和css都在源代码里面，。看源代码

#8

你知道那个分割成小方框是怎么个原理么我想自己写UI

#9

多个div小块块就可以了实现，div的背景是前一个图片，下面的背景是新一张图片，循环往复即可实现块块的效果

#10


if(navHover==true){
			$(prevNav,wrap).animate({opacity:0},0);
			$(nextNav,wrap).animate({opacity:0},0);
			$(commands,wrap).animate({opacity:0},0);
			if(isMobile()){
				fakeHover.live('vmouseover',function(){
					$(prevNav,wrap).animate({opacity:1},200);
					$(nextNav,wrap).animate({opacity:1},200);
					$(commands,wrap).animate({opacity:1},200);
				});
				fakeHover.live('vmouseout',function(){
					$(prevNav,wrap).delay(500).animate({opacity:0},200);
					$(nextNav,wrap).delay(500).animate({opacity:0},200);
					$(commands,wrap).delay(500).animate({opacity:0},200);
				});
			} else {
				fakeHover.hover(function(){
					$(prevNav,wrap).animate({opacity:1},200);
					$(nextNav,wrap).animate({opacity:1},200);
					$(commands,wrap).animate({opacity:1},200);
				},function(){
					$(prevNav,wrap).animate({opacity:0},200);
					$(nextNav,wrap).animate({opacity:0},200);
					$(commands,wrap).animate({opacity:0},200);
				});
			}
		}

delay 这个函数是个关键 - - 看了半天终于有点眉目了

#11

delay 设置动画间隔的就是分成小块的一个个的执行动画

#12

delay 我懂我就是不明白他怎么把一个图片分成一个一个小块

#13

相对定位的div就是小块块啊

#14

计算图片的尺寸往它的前一层加计算好的div小块块再给小块块加上样式主要是透明度还有动画。。。

纯属猜测。。。

#15

那些小块块都是append上去的？
每个小块的背景都是那个图片只不过选了不同的背景位置？

#16

感觉那些小块块不用设置背景还感觉那些小块块是绝对定位在背景图片之上的

引用 15 楼的回复:

那些小块块都是append上去的？
每个小块的背景都是那个图片只不过选了不同的背景位置？

#17

是啊，background-position就可以实现，
所有的块加起来，正好是整张图

#18

然后animate 一下就ok easing只是速度算法

#19

你知道那个分割成小方框是怎么个原理么我想自己写UI

#20

你知道那个分割成小方框是怎么个原理么我想自己写UI

#21

本帖最后由 net_lover 于 2012-07-07 14:26:43 编辑

小方块的原理例子

推荐阅读

input
jQuery 入门指南与实战应用

本文详细介绍了 jQuery 的入门知识与实战应用，首先讲解了如何引入 jQuery 库及入口函数的使用方法，为初学者提供了清晰的操作指南。此外，还深入探讨了 jQuery 在实际项目中的多种应用场景，包括 DOM 操作、事件处理和 AJAX 请求等，帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]

蜡笔小新 2024-11-04 17:28:16
input
jQuery插件验证与屏幕键盘功能的集成解决方案

本文介绍了一种集成了验证功能和屏幕键盘的jQuery插件解决方案。该插件不仅提供了强大的表单验证功能，还引入了一个高度可定制的屏幕键盘，以增强用户体验。通过这一集成方案，开发者可以轻松实现复杂的表单验证逻辑，并为用户提供便捷的输入方式，特别适用于移动设备或特殊输入场景。 ... [详细]

蜡笔小新 2024-11-04 14:06:29
input
利用Struts1构建简易计算器：采用DispatchAction处理请求，动态Form优化开发流程，提供用户友好的错误提示

本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求，并使用动态Form来优化开发流程，确保代码的简洁性和可维护性。同时，系统提供了用户友好的错误提示，以增强用户体验。 ... [详细]

蜡笔小新 2024-11-09 19:48:22
command
Python 伦理黑客技术：深入探讨后门攻击（第三部分）

在《Python 伦理黑客技术：深入探讨后门攻击（第三部分）》中，作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流，难以确定消息批次的结束点，这给后门攻击的实现带来了挑战。为了解决这一问题，文章提出了一系列有效的技术方案，包括使用特定的分隔符和长度前缀，以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性，还为安全研究人员提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-09 16:33:02
input
全面解析 jQuery 中的 $.extend()、$.fn 与 $.fn.extend() 方法及其应用

本文深入解析了 jQuery 中用于扩展功能的三个关键方法：`$.extend()`、`$.fn` 和 `$.fn.extend()`。其中，`$.extend()` 用于扩展 jQuery 对象本身，而 `$.fn.extend()` 则用于扩展 jQuery 的原型对象，使自定义方法能够作为 jQuery 实例的方法使用。通过这些方法，开发者可以轻松地创建和集成自定义插件，增强 jQuery 的功能。文章详细介绍了每个方法的用法、参数及实际应用场景，帮助读者更好地理解和运用这些强大的工具。 ... [详细]

蜡笔小新 2024-11-09 10:08:04
input
关于使用JavaScript在多个页面间传递参数的技术探讨

本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]

蜡笔小新 2024-11-09 09:28:55
input
深入解析 jQuery 中 ajaxSubmit 方法的使用技巧与应用场景

本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先，介绍了如何正确引入必要的脚本文件，如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着，通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交，包括数据的发送、接收和处理。此外，还讨论了该方法在不同场景下的应用，如文件上传、表单验证和动态更新页面内容等，提供了丰富的代码示例和最佳实践建议。 ... [详细]

蜡笔小新 2024-11-07 19:38:19
const
深入掌握Promise调用链的精髓与应用技巧

在掌握Promise调用链的过程中，理解其在异步执行中的核心作用至关重要。链式调用不仅简化了代码结构，提高了可读性，还增强了程序的健壮性和维护性。类似于jQuery中常用的链式调用，如 `$(#app).show().css('color', 'red')`，Promise的链式调用通过 `.then()` 方法实现了异步操作的无缝衔接，使得复杂的异步流程更加直观和高效。掌握这些技巧将有助于开发者更好地处理异步编程中的常见问题，提升开发效率。 ... [详细]

蜡笔小新 2024-11-06 15:46:34
string
《精通 jQuery》第六章：深入解析与实战应用

《精通 jQuery》第六章：深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换，从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验，还提高了应用的响应速度和效率。此外，本章还介绍了如何利用 jQuery 简化 Ajax 操作，并提供了多个实战案例，帮助读者更好地理解和掌握这一重要技术。 ... [详细]

蜡笔小新 2024-11-03 12:10:48
install
利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]

蜡笔小新 2024-11-11 18:02:17
install
WordPress Duplicator 0.4.4 版本存在跨站脚本攻击漏洞分析

在对WordPress Duplicator插件0.4.4版本的安全评估中，发现其存在跨站脚本（XSS）攻击漏洞。此漏洞可能被利用进行恶意操作，建议用户及时更新至最新版本以确保系统安全。测试方法仅限于安全研究和教学目的，使用时需自行承担风险。漏洞编号：HTB23162。 ... [详细]

蜡笔小新 2024-11-10 13:16:43
install
汇集开发者必备的实用参考网站与链接资源

为开发者提供了一系列实用的参考网站和资源链接，包括HTML速查手册（和），帮助开发者快速查找和学习相关技术知识。此外，还涵盖了其他重要的开发工具和文档，为编程工作提供全面支持。 ... [详细]

蜡笔小新 2024-11-08 12:23:08
input
【整理】JavaScript中DOM操作全面解析与实践指南

本文全面解析了JavaScript中的DOM操作，并提供了详细的实践指南。DOM节点（Node）通常代表一个标签、文本或HTML属性，每个节点都具有一个nodeType属性，用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作，结合实际案例，帮助读者更好地理解和掌握DOM编程技术。 ... [详细]

蜡笔小新 2024-11-07 19:20:50
post
如何利用jQuery的JSONP技术实现跨域调用外部Web服务？

本文探讨了如何利用 jQuery 的 JSONP 技术实现跨域调用外部 Web 服务。通过详细解析 JSONP 的工作原理及其在 jQuery 中的应用，本文提供了实用的代码示例和最佳实践，帮助开发者解决跨域请求中的常见问题。 ... [详细]

蜡笔小新 2024-11-07 09:24:55
text
深入解析JSONP跨域机制及其工作原理

本文详细解析了JSONP（JSON with Padding）的跨域机制及其工作原理。JSONP是一种通过动态创建``标签来实现跨域请求的技术，其核心在于利用了浏览器对``标签的宽松同源策略。文章不仅介绍了JSONP的产生背景，还深入探讨了其具体实现过程，包括如何构造请求、服务器端如何响应以及客户端如何处理返回的数据。此外，还分析了JSONP的优势和局限性，帮助读者全面理解这一技术在现代Web开发中的应用。 ... [详细]

蜡笔小新 2024-11-01 19:08:41