[HOME PAGE] Trang chủ cho tín đồ iphone - side unlock độc đáo[✔]

by **skyseven** 3/4/2014, 1:18 pm

Giới thiệu ae chinh phục 1 home page cực độc.

Html ( Chỉnh sửa những link màu đỏ nhé có thể giử lại hết nhưng phải đổi link diễn đàn trong https://skyseven.googlecode.com/svn/trunk/iphone-unlock.js )

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> <title>Diễn Đàn Game Thủ - Club Long Hải</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="[color=#ff0000]https://skyseven.googlecode.com/svn/trunk/intro.css[/color]"/> <link rel="shortcut icon" href="[color=#ff0000]http://iphone.congnghedinhcao.vn/assets/public/iphonenight/images/favicon.png[/color]" /> <script type="text/javascript" src="[color=#ff0000]https://skyseven.googlecode.com/svn/trunk/jquery-1.2.6.min.js[/color]"></script> <script type="text/javascript" src="[color=#ff0000]https://skyseven.googlecode.com/svn/trunk/ui.core-1.5.3.js[/color]"></script> <script type="text/javascript" src="[color=#ff0000]https://skyseven.googlecode.com/svn/trunk/ui.slider.js[/color]"></script> <script type="text/javascript" src="[color=#ff0000]https://skyseven.googlecode.com/svn/trunk/iphone-unlock.js[/color]"></script> </head> <body> <div id="iphone-scrollcontainer"> <div class="logo"><img src="https://skyseven.googlecode.com/svn/trunk/logo.png" alt="image" width="230" height="66" /></div> <div id="iphone-inside"> <div id="unlock-top"> <p id="timepicker" class="time">08:23</p> <p id="datepicker" class="date">Wednesday, July 6</p> </div> <div id="unlock-bottom"> <div id="slide-to-unlock"><img src="https://skyseven.googlecode.com/svn/trunk/slide-to-unlock.gif" width="248px" height="72px" /></div> <div id="unlock-slider-wrapper"> <div id="unlock-slider"><div id="unlock-handle"></div></div> </div> </div> </div> </div> </body> </html>"]

Code:: /* * Author: Marco Kuiper (http://www.marcofolio.net/) * BelongsTo: The iPhone unlock screen in xHTML, CSS and jQuery * Modifications: Swing back and "slide to unlock"-fade made by Martin Jansson (http://www.martinjansson.se) */ $(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 == 163) { 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="[color=#ff0000]http://clublh.forumvi.com[/color]";}); //}); } // 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>"); });"]

[
Demo