最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jquery 水平手风琴鼠标滑过标题图片滑动切换

来源:http://www.erdangjiade.com/js/1159.html 二当家的 2017-02-18 16:56浏览(816)

jquery 水平手风琴鼠标滑过标题图片滑动切换效果实现源码

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jquery 水平手风琴鼠标滑过标题图片滑动切换
查看演示 下载资源: 10

关注微信号获取此Demo视频教程:

下载资源 下载积分: 10 积分
<div class="main">
		<div class="picon" id="picon">
			<ul>
				<li>
					<img width="252" height="400" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/3485.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery图片特效</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换" src="images/32469.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery手风琴</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单" src="images/3247.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery导航菜单</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/3458.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery文字特效</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字特效霓虹灯文字效果使用jQuery和CSS" src="images/39.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery文字特效</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery表单验证 formvalidator 插件解决整站提交表单验证问题" src="images/34856.jpg" />
					<div>
						<h3><a href="http://www.erdangjiade.com/">jquery表单验证</a></h3>
						<p><a href="http://www.erdangjiade.com/" target="_blank">jquery表单验证 formvalidator 插件解决整站提交表单验证问题</a></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
$(document).ready(function(){
	var movetime=500;	
	var maxw=252;
	var avgw= parseInt((1130-maxw-2)/11);	
	var index;
	var t=false; //延时执行
	var _this;

	//标记当前
	function cur(ele){		
		ele=$(ele)? $(ele):ele;
		ele.addClass("cur").siblings().removeClass("cur");	
	};
	
	$("#picon li:eq(0)").addClass("cur").animate({"width":maxw+"px"});
	
	$("#picon").find("li").mouseover(function(){									  
		_this=$(this);		
		index=$( "#picon li" ).index( $(this)[0] );
		var act=function (){
			_this.siblings("li").removeClass("cur");
			_this.animate({"width":maxw+"px"},{duration:movetime,easing:"easeOutQuart",complete:function(){cur(_this)}}).siblings("li").animate({"width":avgw+"px"},{duration:movetime})
		}
		t=setTimeout(act,200);			
		return false;			
	}).mouseout(function(){
		if(t){
			clearTimeout(t);
		}
	});

})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1159.html
评论1
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

  • 头像 沙发
    12-05 09:17
    qqlixiangabc
    这个还不错 啊啊,,。。
1 2