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=utf-8" />
<title>jQuery腾讯带滚动条相册特效</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>

<div class="box-163css">	
	<div class="bigpic">
		<div class="btn pre"></div><div class="btn next"></div>
		<img class="bpic" src="images/img01.jpg" />
		<div class="intro">
			<div class="bg"></div>
			<b class="bclose">隐藏</b>
			<div class="txt">
				<h2>宝马7系顶配直降98.9万</h2>
				<p>消费者近期购买旗下旗舰车型7系顶配即可享受降幅近100万元的现金优惠</p>
			</div>
		</div>
	</div>
	<div id="ztbox">
		<div class="spic">
			<div id="left"></div>
			<div id="conter"> 	 
				<ul>
				  <li><img class="smallpic" src="images/img01.jpg" /><span class="snum"><b></b>/<strong></strong></span>
				  	<div class="txt">
						<h2>上海地区7系顶配车型目前</h2>
						<p>宝马不仅拥有最好的操控技术，在制造工艺和豪华程度上</p>
					</div>
				  </li>
				  <li class="on"><img class="smallpic" src="images/img02.jpg" /><span class="snum"><b></b>/<strong></strong></span>
				  	<div class="txt">
						<h2>宝马7系顶配直降98.9万</h2>
						<p>在制造工艺和豪华程度上7系顶配即可享受降幅近100万元的现金优惠</p>
					</div>
				  </li>
				  <li><img class="smallpic" src="images/img03.jpg" /><span class="snum"><b></b>/<strong></strong></span>
				  	<div class="txt">
						<h2>7系配备新一代BMW创新iDrive控制系统</h2>
						<p>动力方面宝马7系无论是740i还是顶级750Li尊贵型，全部采用双涡轮增加+缸内直喷发动机</p>
					</div>
				  </li>
				  <li><img class="smallpic" src="images/img04.jpg" /><span class="snum"><b></b>/<strong></strong></span>
				  	<div class="txt">
						<h2>作为德系三大豪华品牌之一</h2>
						<p>宝马不仅拥有最好的操控技术，在制造工艺和豪华程度上</p>
					</div>
				  </li>
				  <li><img class="smallpic" src="images/img05.jpg" /><span class="snum"><b></b>/<strong></strong></span></li>
				  <li><img class="smallpic" src="images/img06.jpg" /><span class="snum"><b></b>/<strong></strong></span></li>
				  <li><img class="smallpic" src="images/img07.jpg" /><span class="snum"><b></b>/<strong></strong></span></li>
				  <li><img class="smallpic" src="images/img08.jpg" /><span class="snum"><b></b>/<strong></strong></span></li>
				  <li><img class="smallpic" src="images/img09.jpg" /><span class="snum"><b></b>/<strong></strong></span></li>
				</ul>	
			</div>
			<div id="right"></div>
		</div>
		<div id="scroll"><span></span></div>
	</div>
</div>
</body>
</html>

JS代码(zzsc.js):

function myEvent(obj,ev,fu){
	obj.attachEvent ? obj.attachEvent('on' + ev,fu):obj.addEventListener(ev,fu,false);
}
window.onload = function(){
	var oBox = document.getElementById('ztbox');
	var oLeft = document.getElementById('left');
	var oRight = document.getElementById('right');
	var oConter = document.getElementById('conter');
	var oUl = oConter.getElementsByTagName('ul')[0];
	var oLi = oConter.getElementsByTagName('li');
	var oScroll = document.getElementById('scroll');
	var oSpan = oScroll.getElementsByTagName('span')[0];
	var i = 0;
	oUl.style.width = oLi.length * (oLi[0].offsetWidth + 4)+'px';
	//var iWidth = oScroll.offsetWidth/(oUl.offsetWidth / oConter.offsetWidth - 1)var iWidth=88;
	oLeft.onmouseover = oRight.onmouseover = function(){
	this.className = 'hover';
	//点击左侧按钮oLeft.onclick = function(){
	var butscroll = oSpan.offsetLeft - iWidth;
	oscroll(butscroll);
}
;
	//点击右侧按钮oRight.onclick = function(){
	var butscroll = oSpan.offsetLeft + iWidth;
	oscroll(butscroll);
}
;
}
;
	//点击滚动条oScroll.onclick = function(e){
	var oEvent = e || event;
	var butscroll = oEvent.clientX - oBox.offsetLeft -43 - oSpan.offsetWidth / 2;
	oscroll(butscroll);
}
;
	oSpan.onclick = function(e){
	var oEvent = e || event;
	oEvent.cancelBubble=true;
}
oLeft.onmouseout = oRight.onmouseout = function(){
	this.className = '';
}
;
	//拖拽滚动条var iX = 0;
	oSpan.onmousedown = function(e){
	var oEvent = e || event;
	iX = oEvent.clientX - oSpan.offsetLeft;
	document.onmousemove = function(e){
	var oEvent = e || event;
	var l = oEvent.clientX - iX;
	td(l);
	return false;
}
;
	document.onmouseup = function(){
	document.onmousemove = null;
	document.onmouseup = null;
}
;
	return false;
}
;
	//滚轮事件function fuScroll(e){
	var oEvent = e || event;
	var l = oSpan.offsetLeft;
	oEvent.wheelDelta ? (oEvent.wheelDelta > 0 ? l-=iWidth:l+=iWidth):(oEvent.detail ? l+=iWidth:l-=iWidth);
	oscroll(l)if(oEvent.PreventDefault){
	oEvent.PreventDefault();
}
}
myEvent(oConter,'mousewheel',fuScroll);
	myEvent(oConter,'DOMMouseScroll',fuScroll);
	//滚动事件function oscroll(l){
	if(l < 0){
	l = 0;
}
else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
	l = oScroll.offsetWidth - oSpan.offsetWidth;
}
var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
	sMove(oSpan,'left',Math.ceil(l));
	sMove(oUl,'left','-'+Math.ceil((oUl.offsetWidth - (oConter.offsetWidth)) * scrol));
}
function td(l){
	if(l < 0){
	l = 0;
}
else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
	l = oScroll.offsetWidth - oSpan.offsetWidth;
}
var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
	oSpan.style.left = l+'px';
	oUl.style.left = '-'+(oUl.offsetWidth - (oConter.offsetWidth + 4)) * scrol +'px';
}
}
;
	//运动框架function getStyle(obj,attr){
	return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function sMove(obj,attr,iT,onEnd){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	dMove(obj,attr,iT,onEnd);
}
,30);
}
function dMove(obj,attr,iT,onEnd){
	var iCur = 0;
	attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj,attr)*88)):iCur = parseInt(getStyle(obj,attr));
	var iS = (iT - iCur) / 6;
	iS = iS > 0 ? Math.ceil(iS):Math.floor(iS);
	if(iCur == iT){
	clearInterval(obj.timer);
	if(onEnd){
	onEnd();
}
}
else{
	if(attr == 'opacity'){
	obj.style.ficter = 'alpha(opacity:'+(iCur + iS)+')';
	obj.style.opacity = (iCur + iS) / 88;
}
else{
	obj.style[attr] = iCur + iS +'px';
}
}
}
//图片切换function picCha(){
	var bsrc=$(this).attr('src');
	$('.bpic').attr('src',bsrc);
	var h2title=$(this).parent().find('.txt h2').text();
	var ptitle=$(this).parent().find('.txt p').text();
	$('.intro h2').text(h2title);
	$('.intro p').text(ptitle);
}
;
	$(function(){
	$('.smallpic').bind('click',picCha);
	$('#conter li').click(function(){
	$(this).siblings().removeClass('on');
	$(this).addClass('on');
}
);
	var num=$('ul li').length;
	$('.snum strong').text(num);
	$('ul li').each(function(){
	var fnum=$(this).index()+1;
	$(this).find('b').text(fnum);
}
);
	$('.pre').click(function(){
	var h2title=$(this).parents('.box-163css').find('.on').prev('li').find('h2').text();
	var ptitle=$(this).parents('.box-163css').find('.on').prev('li').find('p').text();
	$('.intro h2').text(h2title);
	$('.intro p').text(ptitle);
	$(this).parents('.box-163css').find('.on').removeClass('on').prev().addClass('on');
	var qsrc=$('.on').find('img').attr('src');
	//alert(qsrc);
	var firstSrc=$('li').first().find('img').attr('src');
	//alert(firstSrc);
	$('.bpic').attr('src',qsrc);
	if(qsrc==firstSrc){
	alert('这是第一页');
	$('li:first').addClass('on');
	$('.bigpic').hover(function(){
	$('.pre').hide()}
);
}
else{
	$('.bigpic').hover(function(){
	$('.next').show()}
,function(){
	$('.next').hide()}
);
}
;
	//tiaoCha();
}
);
	$('.next').click(function(){
	var h2title=$(this).parents('.box-163css').find('.on').next('li').find('h2').text();
	var ptitle=$(this).parents('.box-163css').find('.on').next('li').find('p').text();
	$('.intro h2').text(h2title);
	$('.intro p').text(ptitle);
	$(this).parents('.box-163css').find('.on').removeClass('on').next().addClass('on');
	var qsrc=$('.on').find('img').attr('src');
	var lastSrc=$('li').last().find('img').attr('src');
	//alert(lastSrc);
	$('.bpic').attr('src',qsrc);
	if(qsrc==lastSrc){
	alert('已经到最后一页');
	$('.bigpic').hover(function(){
	$('.next').hide()}
);
}
else{
	$('.bigpic').hover(function(){
	$('.pre').show()}
,function(){
	$('.pre').hide()}
);
}
;
}
);
	$('.bigpic').hover(function(){
	$('.btn').show()}
,function(){
	$('.btn').hide()}
);
	$('.bclose').click(function(){
	$('.intro').hide();
}
);
}
)

CSS代码(zzsc.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;}
.box-163css{width:575px;position:relative;padding:10px;margin:5px auto;border:1px solid #ede9e9;}
.btn{position:absolute;display:none;padding-top:200px;width:22px;height:205px;cursor:pointer;text-indent:-999em;}
.pre{background:url(../images/left.png) no-repeat 0 200px;left:20px;}
.next{background:url(../images/right.png) no-repeat 0 200px;right:30px;}
#ztbox{width:100%;position:relative;height:120px;}
.spic{width:575px;position:relative;background:#f9f9f9;padding-top:6px;height:78px;}
#left{width:13px;height:43px;float:left;top:20px;position:absolute;left:4px;cursor:pointer;background:url(../images/left.gif) no-repeat;}
#right{width:13px;height:43px;right:4px;top:20px;position:absolute;cursor:pointer;background:url(../images/right.gif) no-repeat;}
#conter{margin-left:20px;width:528px;position:relative;height:90px;float:left;display:inline;overflow:hidden;}
#conter .txt{display:none;}
#conter ul{width:auto;height:76px;overflow:hidden;top:0px;left:0px;position:absolute;}
#conter li{width:82px;cursor:pointer;height:76px;float:left;border:1px solid #eaeaea;display:inline;margin:0 0 0 4px;}
#conter li b,#conter li strong{font-weight:normal;}
#conter li.on{border:1px solid #898989;}
#conter li.on span{background:#898989;color:#fff;}
#conter li img{width:82px;height:60px;float:left;overflow:hidden;}
#conter li span{display:block;width:100%;line-height:17px;color:#797979;float:left;height:17px;overflow:hidden;background:#eaeaea;text-align:center;}
#scroll{background:url(../images/line.gif) repeat-x left bottom;width:575px;height:13px;left:0px;bottom:14px;cursor:pointer;position:absolute;}
#scroll span{width:142px;height:13px;left:0px;bottom:0px;cursor:pointer;position:absolute;background:url(../images/scrollBg.png) no-repeat;}
.bpic{width:100%;margin:0 auto 0 auto;}
.bigpic{width:100%;position:relative;margin-bottom:10px;}
.intro{width:100%;height:52px;position:absolute;left:0;bottom:4px;}
.bg{background:#000;filter:alpha(opacity=40);opacity:0.4;z-index:0;width:100%;height:52px;position:absolute;bottom:0;}
.txt{position:absolute;padding-left:1%;width:99%;top:5px;z-index:10;color:#fff;}
.txt h2{width:100%;float:left;font-size:16px;padding-bottom:4px;}
.txt p{width:100%;float:left;}
.bclose{position:absolute;right:10px;top:10px;z-index:11;cursor:pointer;color:#fff;}

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