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

2024-09-05 12:20:56

字体：大中小

来源：转载

供稿：网友

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

<!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>图片地址1</li><li>图片地址2</li><li>图片地址3</li><li>图片地址4</li><li>图片地址5</li><li>图片地址6</li><li>图片地址7</li><li>图片地址8</li><li>图片地址9</li><li>图片地址10</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>

上一篇：JavaScript网页拼图游戏

下一篇：Js随机数--网页版的体育彩票选号器