|
阅读：2185回复：3
google map的放大滑块是怎么做的 ，有什么思路么？
google map的放大滑块是怎么做的 ，有什么思路么？google map的放大滑块是怎么做的 ，有什么思路么？
|
|
|
1楼#
发布于：2006-06-26 09:45
关注
|
|
|
2楼#
发布于：2006-06-28 12:10
<DIV class=HtmlCode>
<P><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><BR><HTML><BR><HEAD><BR><TITLE> never Slider Bar </TITLE><BR><META NAME="Generator" CONTENT="EditPlus"><BR><META NAME="Author" CONTENT="never-online, blueDestiny"><BR><META NAME="Keywords" CONTENT="javascript Slider Bar"><BR><META NAME="Description" CONTENT="javascript Slider Bar"><BR><style><BR>body { background-color:#fff; text-align:center; font-family:verdana; font-size:9pt; }</P> <P>.sliderObj { width:350px; height:25px; background-color:#fff; border:1px solid #666666; }<BR>.sliderBar { width:20px; background-color:#666666; border:1px solid #333; }<BR>.sliderBtn { width:30px; background-color:#666666; color:#fff; border:1px solid #000000; }</P> <P>.r-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #CC0000; }<BR>.r-sliderBar { width:20px; background-color:#CC0000; border:1px solid #333; }<BR>.r-sliderBtn { width:20px; background-color:#CC0000; color:#fff; border:1px solid #000000; }</P> <P>.g-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #006600; }<BR>.g-sliderBar { width:20px; background-color:#006600; border:1px solid #333; }<BR>.g-sliderBtn { width:20px; background-color:#006600; color:#fff; border:1px solid #000000; }</P> <P>.b-sliderObj { width:300px; height:25px; background-color:#fff; border:1px solid #003399; }<BR>.b-sliderBar { width:20px; background-color:#003399; border:1px solid #333; }<BR>.b-sliderBtn { width:20px; background-color:#003399; color:#fff; border:1px solid #000000; }<BR></style><BR></HEAD></P> <P><BODY><BR><p><BR><div id="s1"></div><BR><p><BR><div id="d1">r</div><BR><p><BR><div id="s2"></div><BR><p><BR><div id="d2">g</div><BR><p><BR><div id="s3"></div><BR><p><BR><div id="d3">b</div><BR><p><BR><div id="color" class="sliderObj"></div></P> <P><SCRIPT LANGUAGE="JavaScript"><BR><!--<BR>/*===============================================================<BR>//<BR>// Module : never SliderBar<BR>// Script by : never-online, blueDestiny<BR>// Updated : 2006-5-12<BR>// Copyright : Miracle technology all reserved<BR>// Comment : if you using never SliderBar please hold<BR>// these copyrights.<BR>//<BR>// compatible : only for IE<BR>// History : none<BR>//<BR>================================================================*/</P> <P>function neverSliderBar(id,callback) { with(this) {<BR> this.$ = document.getElementById || document.all;<BR> this.sldID = id;<BR> this.sldObj = null;<BR> this.instance = this;<BR> this.barStyle = "sliderBar";<BR> this.objStyle = "sliderObj";<BR> this.btnStyle = "sliderBtn";<BR> this.sldBar = null;<BR> this.sldBtnL = null;<BR> this.sldBtnR = null;<BR> this.sldPoint = null;<BR> this.sldMoved = false;<BR> this.sldClicked = false;<BR> this.callback = callback;<BR> this.sldObjOffset = null;<BR> this.sldBarOffset = null;<BR> this.callbackArg = Array.prototype.slice.call(arguments,2);<BR> this.sldMax = 100;<BR> this.sldIncrement = 5;<BR> this.sldPoint = 0;<BR> //instance.init.call(this,id);<BR>}};<BR>neverSliderBar.prototype.setObjStyle=function(classname) { with(this)<BR>{<BR> objStyle=classname;<BR>}};<BR>neverSliderBar.prototype.setMaxPoint=function(maxpoint) { with(this)<BR>{<BR> sldMax=maxpoint;<BR>}};<BR>neverSliderBar.prototype.setBtnStyle=function(classname) { with(this)<BR>{<BR> btnStyle=classname;<BR>}};<BR>neverSliderBar.prototype.setBarStyle=function(classname) { with(this)<BR>{<BR> barStyle=classname;<BR>}};<BR>neverSliderBar.prototype.setStyle=function() { with(this)<BR>{<BR> if (arguments[0]) barStyle=arguments[0];<BR> if (arguments[1]) btnStyle=arguments[1];<BR> if (arguments[2]) objStyle=arguments[2];<BR>}};<BR>neverSliderBar.prototype.setIncrement=function(increment) { with(this)<BR>{<BR> if (isNaN(parseInt(increment))) return;<BR> sldIncrement = parseInt(increment);<BR>}};<BR>neverSliderBar.prototype.getSldPoint=function() { with(this)<BR>{<BR> sldBarOffset = Offset(sldBar);<BR> sldObjOffset = Offset(sldObj);<BR> var sldObjwidth = sldObjOffset.w-sldBarOffset.w;<BR> var sldBarwidth = sldBarOffset.l-sldObjOffset.l;<BR> var sldLocation = parseInt(sldBarwidth/sldObjwidth*sldMax);<BR> return sldLocation;<BR>}};<BR>neverSliderBar.prototype.setSldPoint=function(point) { with(this)<BR>{<BR> if (isNaN(parseInt(point))) return;<BR> if (point<0) point=0;<BR> if (point>sldMax) point=sldMax;<BR> var sldObjwidth = sldObjOffset.w-sldBarOffset.w;<BR> var sldBarwidth = sldBarOffset.l-sldObjOffset.l;<BR> sldPoint = parseInt(point);<BR> var p = parseInt(sldPoint*sldObjwidth/sldMax)+sldObjOffset.l+1;<BR> sldBar.style.left = p;<BR> instance.getSldPoint();<BR>}};</P> <P>neverSliderBar.prototype.init=function() { with(this)<BR>{<BR> if ($(sldID + '__BtnL') ;; $(sldID + '__BtnR') ;; $(sldID + '__Bar')) {<BR> sldBtnL = $(sldID + '__BtnL');<BR> sldBar = $(sldID + '__Bar');<BR> sldBtnR = $(sldID + '__BtnR');<BR> }<BR> else {<BR> sldBtnL = document.createElement("BUTTON");<BR> sldBtnL.id = sldID + '__BtnL';<BR> sldBar = document.createElement("DIV");<BR> sldBar.id = sldID + '__Bar';<BR> sldBtnR = document.createElement("BUTTON");<BR> sldBtnR.id = sldID + '__BtnR';<BR> document.body.appendChild(sldBtnL);<BR> document.body.appendChild(sldBar);<BR> document.body.appendChild(sldBtnR);<BR> }<BR> //-------------------------------------------------------------------<BR> sldObj = $(sldID);<BR> sldObj.className = objStyle;<BR> sldBarOffset = Offset(sldBar);<BR> sldObjOffset = Offset(sldObj);<BR> //-------------------------------------------------------------------<BR> sldBtnL.value = "<<";<BR> sldBtnL.className = btnStyle;<BR> sldBtnL.style.position = "absolute";<BR> //-------------------------------------------------------------------<BR> sldBtnR.value = ">";<BR> sldBtnR.className = btnStyle;<BR> sldBtnR.style.position = "absolute";<BR> //-------------------------------------------------------------------<BR> sldBar.className = barStyle;<BR> sldBar.style.position = "absolute";<BR> sldBar.style.top = sldObjOffset.t;<BR> sldBar.style.height = sldObjOffset.h; <BR> sldBar.style.left = sldObjOffset.l;<BR> instance.fixed();<BR> //-------------------------------------------------------------------<BR> sldObj.onmousedown = function() {instance.handleObjBefore()};<BR> sldObj.onmouseup = function() {instance.handleObjAfter()};<BR> //-------------------------------------------------------------------<BR> sldBtnL.onmousedown = function() {instance.handleBtnClick('l')};<BR> sldBtnR.onmousedown = function() {instance.handleBtnClick('r')};<BR> sldBtnL.onfocus = function() {this.blur()};<BR> sldBtnR.onfocus = function() {this.blur()};<BR> //-------------------------------------------------------------------<BR> sldBar.onmousedown = function() {instance.handleSldDragStart()};<BR> sldBar.onmousemove = function() {instance.handleSldDrag()};<BR> sldBar.onmouseup = function() {instance.handleSldDragEnd()};<BR>}};<BR>neverSliderBar.prototype.fixed=function() { with(this)<BR>{<BR> sldBarOffset = Offset(sldBar);<BR> sldObjOffset = Offset(sldObj);</P> <P> var sldBtnLOffset = Offset(sldBtnL);<BR> sldBtnL.style.left = sldObjOffset.l-sldBtnLOffset.w;<BR> sldBtnL.style.top = sldObjOffset.t;<BR> sldBtnL.style.height = sldObjOffset.h;<BR> //-------------------------------------------------------------------<BR> sldBtnR.style.left = sldObjOffset.l+sldObjOffset.w;<BR> sldBtnR.style.top = sldObjOffset.t;<BR> sldBtnR.style.height = sldObjOffset.h;<BR> //-------------------------------------------------------------------<BR> sldBar.style.top = sldObjOffset.t;<BR> sldBar.style.height = sldObjOffset.h;<BR> //-------------------------------------------------------------------<BR> var p = sldBarOffset.l;<BR> if (p < sldObjOffset.l) sldBar.style.left=sldObjOffset.l;<BR> var w = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;<BR> if (p > w) sldBar.style.left = w;<BR> window.setTimeout(function(){instance.fixed()},10)<BR>}};<BR>neverSliderBar.prototype.applyArg=function() { with(this)<BR>{<BR> if (typeof(callback)=='string') callback=eval(callback);<BR> if (typeof(callback)=='function') {<BR> var callbackArguments = [];<BR> for(var i=0; i<callbackArg.length; i++)<BR> callbackArguments = callbackArg;<BR> callbackArguments.push(instance.getSldPoint());<BR> callback.apply(this,callbackArguments);<BR> } else { return; }<BR>}};<BR>neverSliderBar.prototype.handleObjBefore=function() { with(this)<BR>{</P> <P>}};<BR>neverSliderBar.prototype.handleObjAfter=function() { with(this)<BR>{</P> <P>}};<BR>neverSliderBar.prototype.handleBtnClick=function(direction) { with(this)<BR>{<BR> direction = direction.toLowerCase();<BR> sldPoint=instance.getSldPoint();<BR> if(direction == 'l') {<BR> instance.setSldPoint(this.sldPoint-sldIncrement);<BR> }<BR> else if (direction=='r') {<BR> instance.setSldPoint(this.sldPoint+sldIncrement);<BR> }<BR> else {<BR> return alert('not valid argument ' +direction);<BR> }<BR> instance.applyArg();<BR> instance.getSldPoint();<BR>}};<BR>neverSliderBar.prototype.handleSldDragStart=function() { with(this)<BR>{<BR> sldBar.setCapture();<BR> sldMoved = true;<BR> sldBar.onlosecapture = function(){sldMoved=false;};<BR> sldPoint = event.clientX-sldBarOffset.l;<BR>}};<BR>neverSliderBar.prototype.handleSldDrag=function() { with(this)<BR>{<BR> if(!sldMoved) return;<BR> var p = event.clientX-sldPoint;<BR> if (p <= sldObjOffset.l) {<BR> sldBar.style.left = sldObjOffset.l;<BR> }<BR> else if (p >= (sldObjOffset.l+sldObjOffset.w-sldBarOffset.w)) {<BR> sldBar.style.left = sldObjOffset.l+sldObjOffset.w-sldBarOffset.w;<BR> }<BR> else sldBar.style.left = p;<BR> instance.applyArg();<BR> instance.getSldPoint();<BR>}};<BR>neverSliderBar.prototype.handleSldDragEnd=function() { with(this)<BR>{<BR> sldBar.releaseCapture();<BR> sldMoved=false;<BR>}};<BR>function Offset(e) {<BR> var t = e.offsetTop;<BR> var l = e.offsetLeft;<BR> var w = e.offsetWidth;<BR> var h = e.offsetHeight;<BR> while(e=e.offsetParent) {<BR> t+=e.offsetTop;<BR> l+=e.offsetLeft;<BR> }<BR> return { t:t, l:l, w:w, h:h }<BR>}</P> <P><BR>var r=new neverSliderBar("s1",callback,' <b>neverSliderBar</b> ');<BR>r.sldMax=255;<BR>r.setBtnStyle("r-sliderBtn");<BR>r.setBarStyle("r-sliderBar");<BR>r.setObjStyle("r-sliderObj");<BR>r.init();<BR>r.setSldPoint(100);<BR>var g=new neverSliderBar("s2",callback,' <b>neverSliderBar</b> ');<BR>g.sldMax=255;<BR>g.setStyle("g-sliderBar","g-sliderBtn","g-sliderObj");<BR>g.init();<BR>g.setSldPoint(150);<BR>var b=new neverSliderBar("s3",callback,' <b>neverSliderBar</b> ');<BR>b.sldMax=255;<BR>b.setBtnStyle("b-sliderBtn");<BR>b.setBarStyle("b-sliderBar");<BR>b.setObjStyle("b-sliderObj");<BR>b.setIncrement(10);<BR>b.init();<BR>b.setSldPoint("200");</P> <P>callback(' <b>neverSliderBar</b> ');<BR>function callback(s) {<BR> var $=document.getElementById;<BR> var color_r=r.getSldPoint();<BR> var color_g=g.getSldPoint();<BR> var color_b=b.getSldPoint();<BR> $("color").style.backgroundColor="rgb(" +color_r+ "," +color_g+ "," +color_b+ ")";<BR> $("d1").innerHTML=s+color_r;<BR> $("d2").innerHTML=s+color_g;<BR> $("d3").innerHTML=s+color_b;<BR>}<BR>//--><BR></SCRIPT><BR><p><BR>GIS帝国论坛, <a href="http://www.gisempire.com/bbs" target="_blank" >http://www.gisempire.com/bbs</A><BR></p><BR></BODY><BR></HTML></P></DIV>把代码拷贝到文本里，保存为html文件，打开看看了，只是滑动条而已，放大比例在地图上控制了 |
|
|
|
3楼#
发布于：2006-07-07 11:02
太感谢了!!!
|
|