当前位置:首页 > 日记 > 正文

jQuery的流沙插件,实现惊人的动画洗牌效果。

jQuery的流沙插件,实现惊人的动画洗牌效果。
流沙是一个基于jQuery的插件。它可以对页面上的元素进行重新排列和过滤,具有很好的洗牌过渡动画效果。它可以应用于许多项目,以提高用户体验。本文解释了流沙的使用与实际工程应用。

XHTML

所有的功能模块
应用程序
系统管理
生日祝福
节日的祝福
积分管理
n多个李

XHTML的结构包括一个导航栏和一个列表的内容,在内容列表#名单中,我添加了一个ID属性的每个李的流沙插件调用方便。
CSS

# NAV {身高:36px;保证金:10px汽车;底部边框:1px solid # 36c }
# NAV UL {列表样式:无;填充左:120px }
# nav ul {浮动:左;身高:34px;线高度:34px;margin-left: 6px;
填料:0px 12px;左边框:1px solid # d3d3d3;边框右:1px solid # d3d3d3;
边境上:1px solid # d3d3d3;背景:# f7f7f7;鼠标指针}
# nav ul .cur {身高:35px;背景:# 36c;颜色:# FFF }
图像网格{缩放:1 }
。图像网格里{宽度:82px;身高:100px;保证金:20px 00 35px;浮动:左;
文本对齐:中心;线高度:18px;颜色:# 686f74;溢出:隐藏;}
。图像网格里的数据。图像网格里强{显示:块;}
我设置选项卡式导航栏#导航和设置所选国家# NAV UL li.cur.the列表内容区的样式也设置固定的高度和宽度的每幅照片。
jQuery
首先,复制列表区域的内容:

VaR数据=美元美元(#一览表)。Clone();
然后,要实现选项卡样式,单击导航时,将选中的样式添加到当前单击项,而其他项则删除选定的状态样式:

$(# nav ul)。Click(function(){(){)
$(这)。AddClass(我);
$(这),兄弟姐妹()。RemoveClass(我);
});
然后,继续在时间的点击,获取当前点击选项ID,根据ID值,得到的数据源来源和最后叫美元,流沙plug-in.the完整代码如下:

$(# nav ul)。Click(function(){(){)
$(这)。AddClass(我);
$(这),兄弟姐妹()。RemoveClass(我);
var id = $(this)。Attr(ID);
如果(id = 全部){
无功源= data.find美元美元(礼);
其他{ }
无功源= data.find美元美元(李{ class=+身份证+ );
}
$(#一览表)。Quicksand(合源,{
持续时间:1000,
属性:'id',
宽松:'swing
});
});
});
流式插件提供了一些可以配置的参数:

持续时间:过渡动画的时间,以毫秒为单位。

属性:关联数据的属性,此示例设置为ID.。

放松:动画缓冲。
还有一种增强方法:函数(c){可以自定义函数调用。
顺便问一下,有没有过渡动画效果在IE6和IE7,+,以及其他先进的浏览器进行测试。

以上是本文的全部内容,希望大家能喜欢。

相关文章

不要错过经典签名

不要错过经典签名

不要错过,经典,电脑软件,以下是不要错过经典签名的全部内容。如果您喜欢小编辑器的建议,请继续关注它。 站在未来拥抱的地方。 直到后悔取代了他,一个人才算老。只有遗憾取代了梦想,人才才变老。 幻想是一把刀,可以间接地摧毁信任。 如果你找不…

用CDR制作真实风景的方法和过程

用CDR制作真实风景的方法和过程

方法,风景,过程,真实,电脑软件,本教程介绍朋友coredraw创建逼真的山水画的方法和过程。主要的课程是让朋友们学习如何构思,而不是建议朋友们用CDR制作真实的风景,有兴趣的朋友可以学习如何制作。 本教程主要介绍CDR朋友创建真实风景的方法和…

可爱卡通米奇老鼠教程

可爱卡通米奇老鼠教程

教程,老鼠,卡通,可爱,电脑软件,本教程是介绍一个米老鼠的过程使用CDR来绘制可爱的卡通。Mickey Mouse很可爱,很难相处。建议朋友们聚在一起学习和制作。 本教程是介绍Mickey Mouse的一个朋友的卡通画图程序,用的是CDR,渲染出来的Mickey Mouse…

如何设置双面打印Word2010Word2010

如何设置双面打印Word2010Word2010

教程,如何设置,电脑软件,办公室里的打印耗材非常昂贵,所以为了节省纸张,我们经常使用一张纸的正面和背面。毕竟,很少有打印机能支持双面印刷。大多数打印机不支持双面打印。这时,我们必须手动设置双面打印。 打印机支持双面打印的设置。 要检查…

编程世界主流脚本编程语言的比较与

编程世界主流脚本编程语言的比较与

脚本编程语言,选择,编程,主流,世界,在过去的一年,我买了很多书,查了很多资料,所以我可以学习一些主流的脚本语言,说真的,因为我一直想做一个好的自动化工具来促进我们的系统维护。虽然这个愿望没有达成,但在这个过程中,还学到了很多东西今天下午,我…

字行间的空间如何删除单词的常见问

字行间的空间如何删除单词的常见问

删除,常见问题,空间,单词,电脑软件,问:我如何删除在字行间的空间 uff1a解 方法:在空白行由del 方法:两行按del行 方案三:在开始下一行行退格…

PS图象处理软件标志教程四等分圆企

PS图象处理软件标志教程四等分圆企

企业,教程,图象,处理软件,四等,本教程介绍朋友到PS图象处理软件、四等圆商业LO的制作方法。教程制作的LO非常漂亮,难度也不是很大。建议你看看你最喜欢的朋友。 本教程主要使用PS图象处理软件进行四等分圆的业务逻辑的方法。本教程主要讲述…

jsp分页显示的示例代码

jsp分页显示的示例代码

示例代码,分页显示,电脑软件,jsp,1,MySQL的限制关键字(DAO) SELECT * FROM tablename极限起点,numberperpage; 表名是表是分页的名称。 起点起点位置1; numberperpage是每页显示的条数。 例如,SELECT * FROM评论限制20,5; 从注释表中提取了21…

QQ网络IP异常发生了什么

QQ网络IP异常发生了什么

网络,发生了什么,电脑软件,QQ,IP,QQ登录IP地址与访问腾讯其他Web服务页面的IP地址不一致时,造成网络IP异常的原因是: 1。一个移动网络正在使用,IP经常发生变化。 2,在Office网络中,登录QQ的导出IP与访问腾讯的其他Web服务页面的导出IP不一致。 3…

PS图象处理软件制作可爱的白雪糖果

PS图象处理软件制作可爱的白雪糖果

图象,处理软件,可爱,电脑软件,PS,把手教你用PS图象处理软件让可爱的雪糖果字体 Maxivista你快速创建一个可爱的白色糖果,字体与PS图象处理软件,让甜蜜的圣诞字体例,对PS图象处理软件感兴趣的同学哦,最适合的课程,字体纹理细腻圆润,晶莹剔透,让人有…

Word2007教程办公按钮在Word2007中

Word2007教程办公按钮在Word2007中

使用教程,教程,按钮,电脑软件,在Word2007 Office按钮的使用方法: Office按钮位于窗口左上角的Word2007。点击Office按钮打开Office按钮面板,包括新建、打开、关闭、保存、打印等。 在Office按钮面板的命令,有一些命令的右箭头,表明该命令还有下…

你为什么不在电脑里的QQ软件发现QQ

你为什么不在电脑里的QQ软件发现QQ

发现,常见问题,网盘,电脑软件,QQ,你为什么不在电脑里的QQ软件发现QQ网盘 如果你登录到QQ网盘通过iPhone、iPad下载手机管家,通过计算机输入SkyDrive的QQ,安装QQ2011正式版最新版本(包括:QQ2011版本(q+)版)。…