位置: 编程技术 - 正文

jQuery实现圣诞节礼物传送(花式轮播)(jquery生成div)

编辑:rootadmin

推荐整理分享jQuery实现圣诞节礼物传送(花式轮播)(jquery生成div),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery如何使用,jquery生成div,jquery sendkeys,jqueryevent,jquery生成元素,jquery sendkeys,jquery生成元素,jquery生成元素,内容如对您有帮助,希望把文章链接给更多的朋友!

大致介绍

下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题

原地址:花式轮播----圣诞礼物传送

jQuery实现圣诞节礼物传送(花式轮播)(jquery生成div)

思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置最外边的两个礼物旋转一定的角度并隐藏,动画开始,每个礼物向右移动一定的位置,然后再把第五个礼物添加到第一个礼物之前,这样这五个礼物就重新排列了,在写jQ时只管礼物位置的变化就行了,因为礼物的旋转和隐藏在样式中都已经设置好了,某个礼物如果成为第一个礼物就会自动隐藏旋转

基本结构

代码:

样式

在css中用到了:first 和 :last 属性,这两个属性是动态的,如果文档的结构变了,这两个属性的值也会相应的改变,这样我们就不必再麻烦的判断哪个元素是最后一个元素(第一个元素),直接用这两个属性就会自动选择第一个元素和最后一个元素

jQuery代码

在源码中,作者将这个五个礼物的初始位置写在了HTML结构中,我觉得不太好就在jQuery的代码中实现了,代码没有什么难的,就是对思路的实现

本文链接地址:https://www.jiuchutong.com/biancheng/373985.html 转载请保留说明!

上一篇:jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法(jquery validation)

下一篇:jQuery基于xml格式数据实现模糊查询及分页功能的方法

免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络