javascript - having issue with scrollTo() method -



javascript - having issue with scrollTo() method -

i want scroll image mouse in div, not able find right x , y coordinate value move image. below sample code .. able scroll image without div. can help if doing wrong here.

<html> <head> <script type="text/javascript"> document.onmousedown = function(){ var e=arguments[0]||event; var x=getwindowsize()[2],y=getwindowsize()[3],mx=e.clientx,my=e.clienty; document.onmousemove=function(){ var e=arguments[0]||event; window.scrollto(x+(mx-e.clientx), y+(my-e.clienty)); homecoming false; } document.onmouseup=function(){ document.onmousemove=null; } homecoming false; } function getwindowsize(){ if (window.innerheight) homecoming [window.innerwidth-10,window.innerheight-10,window.pagexoffset,window.pageyoffset]; else if (document.documentelement.clientheight) homecoming [document.documentelement.clientwidth-10,document.documentelement.clientheight-10,document.documentelement.scrollleft,document.documentelement.scrolltop]; homecoming [document.body.clientwidth,document.body.clientheight,document.body.scrollleft,document.body.scrolltop]; } </script> </head> <body style="overflow:hidden"> <div id="mydiv" style="overflow:auto;position:absolute; height:300px;"> <img src="img1.png" /> </div> </body> </html>

using img mask estimate right percentage of sliding.

html:

<div id="div"> <img id="img" src="http://www.fastcodesign.com/multisite_files/codesign/imagecache/960/article_feature/1280-army-of-luck-013.jpg" /> <div id="msk"></div> </div>

css

#div { position:absolute; overflow:hidden; height:300px; width:500px; border:1px solid blue; cursor:move; position:relative; } #img { position:absolute; } #msk { position:absolute; width:100%; height:100%; background-color:rgba(255,255,0,.5); z-index:2; }

js:

var img = document.getelementbyid('img'); var msk = document.getelementbyid('msk'); document.onmousedown = function(e){ document.onmousemove = function(e){ if(e.target != msk) return; var x = e.clientx; var y = e.clienty; var mw = msk.offsetwidth; var mh = msk.offsetheight; var iw = img.offsetwidth; var ih = img.offsetheight; // formula goes here img.style.left = math.max(-(x/mw)*(iw),-mw) + "px"; img.style.top = math.max(-(y/mh)*(ih),-mh) + "px"; } } document.onmouseup = function(e){ if(e.target != msk) return; document.onmousemove = $.noop; }

http://codepen.io/anon/pen/vlkjq

javascript html5

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -