仿西街網搜索價格滾動，滑塊滾動

2024-09-05 12:22:30

字體：大中小

來源：轉載

供稿：網友

仿西街網搜索價格滾動，拖動滑塊實現滾動，滑塊拖動改變數值大校偶然的機會去西街網逛了逛，發(fā)現這個價格滾動的功能讓我眼前一亮，對我來說還是挺新穎的！周末折騰了下，分享給大家！

<!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> #dragbar{position:relative; width:170px; top:26px; float:left;}#long_bar{ height:0.6em; border:1px solid #aaa; border-radius:4px;}#small_bar{ background:#ccc; position:absolute; z-index:1; top:1px; height:0.6em; line-height:0.6em; overflow:hidden;}#long_bar .btn{ width:1.2em; z-index:2; position:absolute; height:1.2em; cursor:pointer; top:-0.3em; margin-left:-0.6em; background:#D72D2E; border-radius:4px; border:1px solid #D3D3D3;}.price{ width:100px; padding:22px 5px 0; height:18px; color:#c90202; float:left; text-align:center;}</style></head> <body><div   class="9yussi3"   id="min_price" class="price" style="margin-right:5px;">100元</div><div   class="pgfcldt"   id="dragbar">    <div   class="y3izyyy"   id="long_bar">        <div   class="hyxdbat"   id="small_bar"></div>        <span id="lbaioa0"    class="btn"></span>        <span id="b94hnn4"    class="btn"></span>    </div></div><div   class="7zxoem8"   id="max_price" class="price" style="margin-left:5px;">1319元</div></body><script> window.onload=function(){	var longbar=document.getElementById("long_bar");	var smallbar=document.getElementById("small_bar");	var arrbtn=longbar.getElementsByTagName("span");	var minP=document.getElementById("min_price");	var maxP=document.getElementById("max_price");	var minprice=parseInt(minP.innerHTML);	var maxprice=parseInt(maxP.innerHTML);	var total=maxprice-minprice,Isclick=false,zindex=2;	smallbar.style.width=100+"%";	smallbar.style.left=0;	arrbtn[0].style.left=0;	arrbtn[1].style.left=100+"%";	var maxwidth=longbar.offsetWidth;//最大移動值	arrbtn[0].onmousedown=function(e){		Isclick=true;		this.style.zIndex=++zindex;		var x=(e||window.event).clientX;//取點擊位置的X軸長度值		//按鈕的x軸長度值		var lenght=this.offsetLeft+(this.offsetWidth/2-1);		var btn2lenght=arrbtn[1].offsetLeft+(arrbtn[1].offsetWidth/2-1);		var maxlenght=Math.min(maxwidth,btn2lenght);		var btn=this;		document.onmousemove=function(e){			if(Isclick)			{				var thisX=(e||window.event).clientX;//當前移動位置的X軸長度值				var golenght=Math.min(maxlenght,Math.max(0,lenght+(thisX-x)));//移動的長度				var leftVal=(golenght/maxwidth)*100;				btn.style.left=leftVal+"%";//使用百分比				smallbar.style.left=btn.style.left;				smallwidth();				price(minP,leftVal);			}			else			{				return false;			}			//window.getSelection ? window.getSelection.removeAllRanges : document.selection.empty;//判斷是否有選中項		}		document.onmouseup=window.onblur=btn.onlosecapture=function()		{			Isclick=false;			btn.releaseCapture && btn.releaseCapture();		};		this.setCapture && this.setCapture();		return false; 	}	arrbtn[1].onmousedown=function(e){		Isclick=true;		this.style.zIndex=++zindex;		var x=(e||window.event).clientX;		var lenght=this.offsetLeft+(this.offsetWidth/2-1);		var btn1lenght=arrbtn[0].offsetLeft+(arrbtn[0].offsetWidth/2-1);		var minlenght=Math.max(0,btn1lenght);		var btn1=this;		document.onmousemove=function(e){			if(Isclick)			{				var thisX=(e||window.event).clientX;				var golenght=Math.max(minlenght,Math.min(maxwidth,lenght+(thisX-x)));				var leftVal=(golenght/maxwidth)*100;				btn1.style.left=leftVal+"%";				smallwidth();				price(maxP,leftVal);			}			else			{				return false;			}			//window.getSelection ? window.getSelection.removeAllRanges : document.selection.empty;		}		document.onmouseup=window.onblur=btn1.onlosecapture=function()		{			Isclick=false;			btn1.releaseCapture && btn1.releaseCapture();		};		this.setCapture && this.setCapture();		return false; 	}	function smallwidth(){		var left=parseFloat(arrbtn[0].style.left);		var right=parseFloat(arrbtn[1].style.left);		smallbar.style.width=(right-left>0?Math.floor(right-left):0)+"%";	}	function price(obj,leftVal){		var p=parseInt((total/100)*leftVal)+minprice;		if(p>minprice && p<maxprice){p=p%5>3?p+(5-(p%5)):p-(p%5)}		obj.innerHTML=p+"元";	}}</script></html>

上一篇：懶人上網：使用location定位網頁地址

下一篇：BrowserCheck瀏覽器檢測腳本生成器