JavaScript异形滚动轮播

本文探讨了如何在JavaScript中实现异形滚动轮播。通过动态获取每个类名的CSS样式对象并创建新数组,来解决样式与类名不统一导致的二次运动问题。文章详细介绍了运动过程,包括元素的移动方式、animate方法的使用以及如何处理样式轮换。同时,还提供了处理防骚扰操作的左按钮功能,确保在元素运动状态下不执行额外事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

运动过程研究

让每个元素走到前一个标签的位置。
3走到2
2走到1
1走到0
0走到6
在这里插入图片描述

利用js动态获取每个类名对应的css样式对象,组成一个新数组。

// 定义一个新数组,接收每个位置的css样式对象
var styleArr = [];
// 遍历数组添加样式对象
for (var i =0; i <$('li').length; i++) {
   
	styleArr.push({
   
		"width": $('li').eq(i).css('width'),
		"height": $('li').eq(i).css('height'),
		"left": $('li').eq(i).css('left'),
		"top": $('li').eq(i).css('top')
	});
}

可以使用animate方法发生移动:

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数,每个元素执行一次。

// 右按钮事件
    $('.btn_you').click(function () {
   
    // 后面的元素走到前面上一个位置
    for (var i =1; i <$('li').length; i++) {
   
    $('.no'+ i).animate(styleArr[i -1], 300)
    }
    // 0位置的li直接更改css样式,切换到6的位置
    $('.no0').animate(styleArr[6], 300);
    })
问题:样式和对应的类名不统一,不能进行第二次运动。

解决方法:进行对应位置的类名轮换。
在这里插入图片描述
可以将7个类名放在数组中,每次实现将最后一项删除,添加到第一项。
pop 方法
从数组中移除最后一个元素并将该元素返回
push 方法
将新元素追加到一个数组中,并返回数组的新长度。
shift 方法
从数组中移除第一个元素并将返回该元素。
unshift 方法
在数组的开头插入新元素。

//运动结束后,要让li的类名和位置统一,切换类名
classNameArr.unshift(classNameArr.pop());

将得到新数组中的类名赋值给对应li标签。

// 循环给li添加新的类名
for (var i =0; i <$('li').length; i++) {
   
$('li').eq
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值