jquery鼠标滚动列表切换滑动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标滚动列表切换滑动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery鼠标滚动列表切换代码</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
</head>

<body style="background:#000;">
<div class="join4">
	<div class="join5" id="objDiv">
		<ul>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
			<li>
				<h1>客户执行策划师</h1>
				<p>学历要求：不限性别<br>
				要求：不限<br>
				职位描述：【客户执行】双面胶？粘完客户粘伙伴？说的就是你！
				</p>
				<div class="join6"><a href="#"></a></div>
			</li>
		</ul>
	</div>
</div>

<div class="join7"><img src="images/mouse.png" width="47" height="35"  alt=""/>鼠标滚动查看更多</div>

<input type="hidden" value="0" class="ddw"/>
<input type="hidden" value="0" class="ddw2"/>

<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
<script type="text/javascript" src="js/join.js" ></script>
<script type="text/javascript">
$('.join5').join_qh({
	box:".join5",
	num1:".ddw",//记录当前屏数
	num2:".ddw2",//记录鼠标滚轮延时执行
	objDiv:"objDiv",//在这个区域内，浏览器滚动条失效
	pic_num:4,//当前显示图片数量(li个数)
	time:800//切换一屏时间
})
</script>
</body>
</html>

JS代码(join.js):

$.fn.join_qh = function(can){
	can = $.extend({
	box:null,num1:null,//记录当前屏数num2:null,//记录鼠标滚轮延时执行objDiv:null,//在这个区域内，浏览器滚动条失效pic_num:null,//当前显示图片数量(li个数)time:null//切换一屏时间}
,can ||{
}
);
	$(can.num1).val(0);
	$(can.num2).val(0);
	var sig = $(can.box).find('ul li').innerWidth();
	var num_sum = $(can.box).find('ul li').length;
	$(can.box).find('ul').width(sig*num_sum);
	$(can.box).mousewheel(function(event,delta){
	var aaaa=$(can.num2).val();
	if (aaaa == 1){
	return;
}
join_gun(delta);
}
);
	function join_gun(a){
	var z =$(can.num1).val();
	b = parseInt(z);
	c = Math.ceil(num_sum/can.pic_num);
	if(a<0){
	if(-b==c-1){
	return;
}
b-=1;
	$(can.num2).val(1);
}
else if(a>0){
	if(-b==0){
	return;
}
b+=1;
	$(can.num2).val(1);
}
$(can.num1).val(b);
	var single_w = sig*can.pic_num;
	move_w =single_w*b;
	$(can.box).find('ul').animate({
	'left':move_w}
,can.time);
	setTimeout(function(){
	$(can.num2).val(0);
}
,1400);
}
//禁止鼠标滚轮事件对于浏览器滚动条的滚动var scrollFunc=function(e){
	e=e||window.event;
	if (e&&e.preventDefault){
	e.preventDefault();
	e.stopPropagation();
}
else{
	e.returnvalue=false;
	return false;
}
}
var obj=document.getElementById(can.objDiv);
	if(obj.addEventListener&&!window.opera)obj.addEventListener('DOMMouseScroll',scrollFunc,false);
	elseobj.onmousewheel=scrollFunc;
}
/*生成换行for(i=0;
	i<65;
	i++){
	$('body').append('<br>')}
*/

CSS代码(base.css):

@charset "utf-8";/* CSS Document */
html{overflow-y:scroll;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:12px;color:#000000;word-wrap:break-word;behavior:url("csshover.htc");}
button,input,select,textarea{font:12px/1.5 Arial,"宋体",Helvetica,Verdana,sans-serif;word-wrap:break-word;color:#565756;}
ul,li{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
img{border:none;border:0;vertical-align:middle;}
a{text-decoration:none;outline:none;}
p{margin:0;padding:0;}
input,select,textarea{vertical-align:middle;*font-size:100%;}
input{margin:0;outline:none;padding:0;}
input::-ms-clear{display:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1}

CSS代码(common.css):

@charset "utf-8";/* CSS Document */
.join4{width:1049px;height:170px;background:url(../images/join_3.png) no-repeat;padding-left:47px;margin:220px auto 0;}
.join5{width:996px;height:170px;overflow:hidden;position:relative;}
.join5 ul{position:absolute;left:0;top:0;}
.join5 li{float:left;width:200px;padding-left:18px;padding-right:32px;line-height:24px;color:#fff;}
.join5 li h1{height:37px;font-size:14px;font-weight:bold;}
.join5 li p{height:110px;}
.join6{width:176px;height:19px;background:url(../images/join_2.png) no-repeat;}
.join6 a{width:19px;height:19px;float:right;display:block;}
.join7{text-align:center;padding-top:40px;height:35px;line-height:35px;color:#727171;font-size:12px;}
.join7 img{margin-top:-8px;margin-right:10px;}

附件:下载该文件资源,减少时间成本(增值服务)