> First made one using canvas, but ExplorerCanvas didn't like the > it.https://developer.mozilla.org/en/Canvas_tutorial/Basic_animationshttp://excanvas.sourceforge.net/ > > 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?
