Macro Da

每天学一点,成长多一点!

自制两边淡入淡出JQ效果

一些插件都不太好实现如下效果,综合考虑还是自己写一个效果,JS代码的定义参数都标注清楚了,记录备用,以后可能会用得上。

《自制两边淡入淡出JQ效果》
效果GIF动画

HTML代码:

<div class="motto" id="motto">
	<ul class="mottoList">
		<li>
			<div class="pic left"><img src="images/motto/motto11.png"></div>
			<div class="pic right"><img src="images/motto/motto12.png"></div>
		</li>
		<li>
			<div class="pic left"><img src="images/motto/motto21.png"></div>
			<div class="pic right"><img src="images/motto/motto22.png"></div>
		</li>
		<li>
			<div class="pic left"><img src="images/motto/motto31.png"></div>
			<div class="pic right"><img src="images/motto/motto32.png"></div>
		</li>
		<li>
			<div class="pic left"><img src="images/motto/motto41.png"></div>
			<div class="pic right"><img src="images/motto/motto42.png"></div>
		</li>
		<li>
			<div class="pic left"><img src="images/motto/motto51.png"></div>
			<div class="pic right"><img src="images/motto/motto52.png"></div>
		</li>
	</ul>
</div>

CSS代码:

.motto{position: absolute; right: 50%; top: 72px; margin-right: -580px;}
.mottoList{width: 390px;}
.mottoList li{position: absolute; left: 0; top: 0; width: 390px; height: 63px; display: none;}
.mottoList li .pic{position: absolute; top: 0;}
.mottoList li .left{left: -100px;}
.mottoList li .right{right: -100px;}

JQ代码:

var onIndex = 0;  //默认的高亮项
var list = $("#motto ul");  //列表元素
var li = list.children("li");  //选择列表下的每项
var liLength = li.length;  //取得列表长度
var easing = "swing";  //过渡曲线效果
var distance = "100px";  //过渡效果的长度
var interTime = 3000;  //间隔多久切换,单位毫秒
var delayTime = 1000;  //切换动画时间,单位毫秒
var idTime = interTime + delayTime;
setFun(idTime);
function setFun(setTime){
	li.eq(onIndex).addClass("on").fadeIn(delayTime).children(".left").animate({left: 0 + "px"}, delayTime, easing).next(".right").stop(true, false).animate({right: 0 + "px"}, delayTime, easing);
	setTimeout(function (){
		li.eq(onIndex).removeClass("on").fadeOut(delayTime).children(".left").stop(true, false).animate({left: "-" + distance}, delayTime, easing).next(".right").animate({right: "-" + distance}, delayTime, easing);
		if (onIndex >= liLength - 1){
			onIndex = 0;
		}else{
			onIndex++;
		}
		setTimeout(function (){ setFun(idTime) }, delayTime);
	}, setTime);
}
点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注