[Share Index] Iphone Slide to Lock [ Cool ]

by **[D]ark[R]aven** 16/2/2011, 7:32 pm

Code:: <!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>..:: CAF - Iphone Index ::..</title> <link rel="shortcut icon" type="image/x-icon" href="http://mmstroe.summerhost.info/favicon.ico" /> <style> body { background-image:url(http://i1099.photobucket.com/albums/g397/thedarkraven20/iphone-bg.png); background-repeat:no-repeat; background-color:#25262b; padding:0; margin:0; } a { outline:none; } p { padding:0; margin:0; } img { border:0; } #iphone-scrollcontainer { height:461px; width:320px; position:absolute; top:140px; left:40px; background-color:#000000; } #iphone-inside { overflow: hidden; height:100%; width:100%; background-image:url(http://i1099.photobucket.com/albums/g397/thedarkraven20/background.png); } #unlock-top { position: relative; height:95px; background-image:url(http://i1099.photobucket.com/albums/g397/thedarkraven20/lock-top.png); } #unlock-spacer { height:272px; /* Total height = 461px - 95px (top) - 94px (bottom) */ } #unlock-bottom { position: relative; height:94px; background-image:url(http://i1099.photobucket.com/albums/g397/thedarkraven20/lock-bottom.png); } #slide-to-unlock { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height:94px; background-image:url(http://i1099.photobucket.com/albums/g397/thedarkraven20/slide-to-unlock.png); } #unlock-slider-wrapper { padding-left:22px; padding-top:23px; } #unlock-slider { width:277px; height:50px; } #unlock-handle{ position: absolute; z-index: 10; height: 50px; width: 72px; top: 0px; left: 0px; background-image: url(http://i1099.photobucket.com/albums/g397/thedarkraven20/lock-slider.png); } .time { text-align:center; color:#FFFFFF; font-family:Georgia, Times, serif; font-size:45px; padding:6px 0; } .date { text-align:center; color:#FFFFFF; font-family:Georgia, Times, serif; font-size:12px; } /* Used by the jQuery slider */ .ui-slider { position: relative; background-repeat: no-repeat; background-position: center center; } </style> <script type="text/javascript" src="http://cafamcode.googlecode.com/files/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://cafamcode.googlecode.com/files/ui.core-1.5.3.js"></script> <script type="text/javascript" src="http://cafamcode.googlecode.com/files/ui.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { // Set the slider to be sliding $("#unlock-slider").slider({ handle: "#unlock-handle", animate:true, slide: function(e,ui) { $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120)); }, stop: function(e,ui) { if($("#unlock-handle").position().left == 205) { unlock(); } else { $("#unlock-handle").animate({left: 0}, 200 ); $("#slide-to-unlock").animate({opacity: 1}, 200 ); } } } ); var unlock = function() { //$("#iphone-inside").animate({backgroundPosition: '0 40'}, 400, '', function() //{ $("#unlock-bottom").animate({bottom: -100}, 300); $("#unlock-top").animate({top: -100}, 300, '', function() {}); $("#iphone-inside").fadeOut("normal", function(){window.location="http://cafam.123.st";}); //}); } // Set the date and time var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var d = new Date(); var curr_day = d.getDay(); var curr_date = d.getDate(); var curr_month = d.getMonth(); var curr_year = d.getFullYear(); var curr_hour = d.getHours(); var curr_min = d.getMinutes(); $("#datepicker").replaceWith("<p class=\"date\">" + d_names[curr_day] + ", " + m_names[curr_month] + " " + curr_date + "</p>"); // Adding a "0" when hours / minutes is only one character if(curr_hour < 10) { curr_hour = "0" + curr_hour; } if(curr_min < 10) { curr_min = "0" + curr_min; } $("#timepicker").replaceWith("<p class=\"time\">" + curr_hour + ":" + curr_min + "</p>"); }); </script> </head> <body><div id="iphone-scrollcontainer"> <div id="iphone-inside"> <div id="unlock-top"> <p id="timepicker" class="time"></p> <p id="datepicker" class="date"></p> </div> <div id="unlock-spacer"> <font color="white"><center><b>♥ CAF - Where the dream come true ♥</font></center><br><br> <font color="white">Trong một giây phút nào đó trong cuộc sống, bạn tìm thấy đươc một người bạn thân... Đó là người có thể thay đổi cuộc sống của bạn dù chỉ là một phần nhỏ nào đó Là người có thể làm cho bạn cười đến ngặt nghẽo đến nỗi bạn không thể dừng lại Là ngưởi làm cho bạn tin rằng thế giới này thật sự tốt đẹp Là người đã ngồi hàng giờ để thuyết phục bạn rằng thật sự cánh cửa cuộc đời vẫn chưa đóng lại với bạn và nó đang cho bạn mở ra Đó chính là người bạn mãi mãi... </font></b></div> <div id="unlock-bottom"> <div id="slide-to-unlock"></div> <div id="unlock-slider-wrapper"> <div id="unlock-slider"><div id="unlock-handle"></div></div> </div> </div> </div> </div> </body> </html>

* Search http://cafam.123.st và sửa thành link của bạn
Vâng đây là Đề Mô: http://cafam.123.st/h7-page
[Share Index] Iphone Slide to Lock [ Cool ] 588710

Have Fun

by **Cáo Già Đeo Nơ** 3/3/2011, 1:30 pm

Hum trước mình có test thử cái này và thấy nó bị lỗi khi dùng trên IE ( các trình # thì bt ) Ở IE k thể hiện flash để kéo được cái mũi tên.

[Share Index] Iphone Slide to Lock [ Cool ]

[Share Index] Iphone Slide to Lock [ Cool ]

Re: [Share Index] Iphone Slide to Lock [ Cool ]