滚动条控制的图片水平展示效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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>滚动条控制的图片水平展示效果</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;font-size:12px}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
body{ font:12px/160% "宋体"}
#picBox{width:880px; height:100px; border:#ccc solid 1px; margin:10px auto; padding:10px; overflow:hidden; position:relative;}
#picBox ul{overflow:hidden;position:absolute; top:10px; left:0;}
#picBox li{ float:left; width:225px; height:100px; line-height:100px; text-align:center;}
#picBox li a{ display:block; width:200px; height:100%; margin:0 auto;text-align:center; background:#FF9900;}
#scrollBar{ width:900px; height:20px; border:#ccc solid 1px; margin:0 auto}
#scrollBar #dragObj{ width:100px; height:20px; text-align:center; cursor:pointer; background:#DDD}
</style>
</head>
<body>
<div id="picBox">
<ul id="picList">
<li><a href="#">图片地址1</a></li>
<li><a href="#">图片地址2</a></li>
<li><a href="#">图片地址3</a></li>
<li><a href="#">图片地址4</a></li>
<li><a href="#">图片地址5</a></li>
<li><a href="#">图片地址6</a></li>
<li><a href="#">图片地址7</a></li>
<li><a href="#">图片地址8</a></li>
<li><a href="#">图片地址9</a></li>
<li><a href="#">图片地址10</a></li>
</ul>
</div>
<div id="scrollBar"><div id="dragObj">拖动</div></div>
<script type="text/javascript">
(function(){
if(!window.zzc){window['zzc'] = {} };
function isIE(){ return (document.all) ? true : false;};
window['zzc']['isIE'] = isIE;
function $(id){return typeof id == 'string' ? document.getElementById(id) : id};
window['zzc']['$'] = $;
function $$(id,tag){return $(id).getElementsByTagName(tag);}
window['zzc']['$$'] = $$;
function getElementsByClassName(name,type){
	var r=[];
	var re=new RegExp("(^|\\s)"+name+"(\\s|$)");
	var elem=document.getElementsByTagName(type||"*");
	for(var i=0;i<elem.length;i++){
		if(re.test(elem[i].className)) r.push(elem[i]);
		}
		return r;
	}
window['zzc']['getElementsByClassName'] = getElementsByClassName;	
function addEvent(eventTarget,eventType,fnHandler){
		 if(eventTarget.addEventListener){//for FF
			eventTarget.addEventListener (eventType,fnHandler,false);
		 } else if(eventTarget.attachEvent){//for IE
			eventTarget.attachEvent("on" + eventType,fnHandler);
		 } else{//for other
			eventTarget["on" + eventType] = fnHandler;
		 }
     };
window['zzc']['addEvent'] = addEvent;
function removeEvent(eventTarget,eventType,fnHandler){
		 if(eventTarget.removeEventListener){//for FF
			eventTarget.removeEventListener (eventType,fnHandler,false);
		 } else if(eventTarget.detachEvent){//for IE
			eventTarget.detachEvent("on" + eventType,fnHandler);
		 } else{//for other
			eventTarget["on" + eventType] = null;
		 }
     };
window['zzc']['removeEvent'] = removeEvent;
function getBrowerWindowSize(){
    var de = document.documentElement;
    return{ 
	'width':(self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth),
	'height':(self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight)
	}
};
window['zzc']['getBrowerWindowSize'] = getBrowerWindowSize;
function getPageSize(){
	var de=document.documentElement;
	return{
	'width':(document.body.scrollWidth||(de&&de.scrollWidth)),
	'height':(document.body.scrollHeight||(de&&de.scrollHeight))
	}	
};
window['zzc']['getPageSize'] = getPageSize;	
function pageX(elem){
	return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
		}
window['zzc']['pageX'] = pageX;		
		
function pageY(elem){
	return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
		}
window['zzc']['pageY'] = pageY;
})();
function Drag(activeObj,dragObj,options){
     var aObj = zzc.$(activeObj);//激活元素
	 var dObj = zzc.$(dragObj);//拖动元素
	 var iDiffX = 0;
	 var iDiffY = 0;
	 var Options = options || {};
	 var Limit = Options.Limit||false;
	 var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
	 var mxRight = parseInt(Options.mxRight)||0;//右边限制
	 var mxTop = parseInt(Options.mxTop)||0;//上边限制
	 var mxBottom = parseInt(Options.mxBottom)||0;//下边限制
	 var onMove = Options.onMove||function(){};//移动时执行 
	 
(function start(){  
     zzc.addEvent(aObj,'mousedown',handleMouseDown);
	 })();
	 
function handleMouseMove(oEvent){ 
var oEvent = window.event || arguments[0];
var iLeft = oEvent.clientX - iDiffX, iTop = oEvent.clientY - iDiffY;
if(Limit){
var iRight = iLeft + dObj.offsetWidth - mxRight, iBottom = iTop + dObj.offsetHeight - mxBottom;
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(mxLeft > iLeft) iLeft = mxLeft;
if(mxTop > iTop) iTop = mxTop;
 }
		  
dObj.style.left = iLeft + 'px';
dObj.style.top = iTop + 'px';
onMove();
};
function handleMouseDown(oEvent){
         //清除选择(ie设置捕获后默认带这个)
	     window.getSelection && window.getSelection().removeAllRanges();
		 var oEvent = window.event || arguments[0];
		 dObj.style.position = "absolute"; 
		 iDiffX = oEvent.clientX - dObj.offsetLeft;
		 iDiffY = oEvent.clientY - dObj.offsetTop;
		 zzc.addEvent(document,'mousemove',handleMouseMove);
		 zzc.addEvent(document,'mouseup',handleMouseUp);
		 if(zzc.isIE()){
		zzc.addEvent(dObj, "losecapture", handleMouseUp);
		dObj.setCapture();
		 }else{
		zzc.addEvent(window, "blur", handleMouseUp);
		 }
     };
function handleMouseUp(){
		 zzc.removeEvent(document,'mousemove',handleMouseMove);
		 zzc.removeEvent(document,'mouseup',handleMouseUp);	
		 if(zzc.isIE()){
		zzc.removeEvent(dObj, "losecapture", handleMouseUp);
		dObj.releaseCapture();
		 }else{
		zzc.removeEvent(window, "blur", handleMouseUp);
		 }	 		 		
     };
}
//使图片滚动。
function picSlideByDrag(picBox,picList,dragObj,options){
     var Options = options || {};
	 var mxLeft = parseInt(Options.mxLeft)||0;//左边限制
	 var mxRight = parseInt(Options.mxRight)||0;//右边限制
	 var mxTop = parseInt(Options.mxTop)||0;//上边限制
	 var mxBottom = mxTop + dragObj.clientHeight;//下边限制
	function init(){
		var picListChild = zzc.$$(picList,'li');
		var picListWidth = picListChild.length * picListChild[0].offsetWidth;
		picList.style.width = picListWidth + 'px';
		if(picListWidth <= picBox.clientWidth){
		dragObj.style.display = "none";
		}
    };
	function picSlide(){
		picList.style.left = -(((zzc.pageX(dragObj) - mxLeft)/(mxRight-mxLeft-dragObj.clientWidth))*(picList.clientWidth-picBox.clientWidth)) + "px";
	};
	
	init();
	Drag(dragObj,dragObj,{Limit:true,mxTop:mxTop,mxRight:mxRight,mxBottom:mxBottom,mxLeft:mxLeft,onMove:picSlide});
	
};
window.onload = function(){
	var picBox = zzc.$("picBox");
	var picList = zzc.$("picList");
	var scrollBar = zzc.$("scrollBar");
	var dragObj = zzc.$("dragObj");
	var initTop = zzc.pageY(scrollBar) + 1;
	var initLeft = zzc.pageX(scrollBar) + 1;
	var initRight = initLeft + scrollBar.clientWidth;
     picSlideByDrag(picBox,picList,dragObj,{mxTop:initTop,mxLeft:initLeft,mxRight:initRight});
}
</script> 
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

滚动条控制的图片水平展示效果

分类

菜单导航

描述

个人感觉这个图片效果不错，用拖动滚动条的方法来控制图片滚动，这样用户的自由度更大些，操作舒适度也比较好，为了不影响网页加载，这里省略了图片地址，你可以自己加上，在IE8好像拖动条有点错位，火狐下正常。