I simply saved the html to my hard drive and opened it. What I don't get is the 2044. 2x1024 = 2048. What's significant about the number used? And where is the 'ugly IE hack?'
On Jan 11, 9:03 am, Mike Alsup <mal...@gmail.com> wrote: > > First made one using canvas, but ExplorerCanvas didn't like the > > it.https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationshttp... > > > Source > > Imagehttp://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_Nati... > > > So next I did it using jQuery, here is my result. Tested in FF3, > > IE6/7. Would have been easy to do except for the ugly IE css hacks. > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > > <html xmlns="http://www.w3.org/1999/xhtml";> > > > <html> > > <head> > > <script src="jquery-1.2.6.js"></script> > > > <script> > > $(document).ready(function(){ > > var speed = 30000; > > $("#left").click(function () { > > runA(); > > runB(); > > }); > > > function runA() { > > $("#blockA").animate({"left": "-=1024px"}, speed, "linear"); > > $("#blockA").animate({"left": "+=2044px"}, 1, "linear"); > > $("#blockA").animate({"left": "-=1024px"}, speed, "linear",runA); > > } > > > function runB() { > > $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); > > $("#blockB").animate({"left": "-=1024px"}, speed, "linear"); > > $("#blockB").animate({"left": "+=2044px"}, 1, "linear",runB); > > } > > > }); > > </script> > > <style> > > img { > > padding: 0; > > margin: 0; > > } > > div#t { > > overflow:hidden; > > width:800px; > > height:198px; > > word-wrap: break-word; > > } > > > #blockA, #blockB { > > position:absolute; > > } > > #blockB { > > left:1023px; > > } > > #wrapper { > > height: 100%; > > width: 800px; > > overflow: hidden; > > border: 3px solid; /* this is just for debugging, to see if the > > browser actually does something sane */ > > position: relative;} > > > </style> > > </head> > > > <body> > > <button id="left">«</button> > > > <div id="wrapper"> > > <div id="t"> > > <img id="blockA" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > <img id="blockB" src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > </div> > > </div> > > > <br /> > > <br /> > > <img src="Capitan_Meadows,_Yosemite_National_Park.jpg" /> > > > </body> > > </html> > > Can you post a live link to this? How are we supposed to see it?
