DEMO http://diendanyhoc.forum7.net/
HTML
HTML
- Code:
<meta content="text/html; charset=utf-8" http-equiv="content-type" /><meta content="text/javascript" http-equiv="content-script-type" /><meta content="text/css" http-equiv="content-style-type" /><link href="http://i58.servimg.com/u/f58/18/45/07/75/11869011.jpg" type="image/x-icon" rel="shortcut icon" /><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href="http://ghequa.net/favicon.ico" type="image/x-icon" rel="shortcut icon" /> <meta content="" name="description" /> <meta content="" name="keywords" /> <title>Happy New Year 2014 - Chúc Mừng Năm Mới - Design Tommy_Phan</title> <link href="http://ghequa.net/css/style.css" type="text/css" rel="stylesheet" /> <link href="http://ghequa.net/css/demo.css" type="text/css" rel="stylesheet" /> <link media="screen" href="http://ghequa.net/css/green.css" type="text/css" rel="stylesheet" /> <link media="screen" href="http://ghequa.net/scripts/styleshwitcher.css" type="text/css" rel="stylesheet" /> <script src="http://account.hehe123.coo.me/sta/u/w/9225/jquery_countdown.js" type="text/javascript"></script> <script src="http://ghequa.net/scripts/tet.js" type="text/javascript"></script> <script>var pictureSrc ="http://ghequa.net/images/hoamai.png"; //the location of the snowflakesvar pictureWidth = 40; //the width of the snowflakesvar pictureHeight = 40; //the height of the snowflakesvar numFlakes = 10; //the number of snowflakesvar downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)var lrFlakes = 10; //the speed that the snowflakes should swing from side to sideif( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }//draw the snowflakesfor( var x = 0; x < numFlakes; x++ ) {if( document.layers ) { //releave NS4 bugdocument.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');} else {document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');}}//calculate initial positions (in portions of browser window size)var xcoords = new Array(), ycoords = new Array(), snFlkTemp;for( var x = 0; x < numFlakes; x++ ) {xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );} while( typeof( ycoords[snFlkTemp] ) == 'number' );ycoords[snFlkTemp] = x / numFlakes;}//now animatefunction flakeFall() {if( !getRefToDivNest('snFlkDiv0') ) { return; }var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;//find screen settings for all variations. doing this every time allows for resizing and scrollingif( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }}//move the snowflakes to their new positionfor( var x = 0; x < numFlakes; x++ ) {if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;ycoords[x] += downSpeed;}}//DHTML handlersfunction getRefToDivNest(divName) {if( document.layers ) { return document.layers[divName]; } //NS4if( document[divName] ) { return document[divName]; } //NS4 alsoif( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4return false;}window.setInterval('flakeFall();',100);</script> <img style="position: fixed; background:none; padding: 0; border: none; -webkit-border-radius: 0; bottom: 0; right:0;\" src="http://ghequa.net/img/hoamai-right.png" /><img style="position: fixed; background:none; padding: 0; border: none; -webkit-border-radius: 0; bottom: 0; left:0;\" src="http://ghequa.net/img/hoamai-left.png" /> <div id="outer-container"> <!-- Parent Container --> <div style="position: fixed; top: 0px; left: 0px;"> <embed style="width: 130px; height: 400px;" flashvars="username=BQTC" wmode="transparent" menu="false" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://ghequa.net/flash/banner-left.swf" /> </div> <div style="position: fixed; top: 0px; right: 0px;"> <embed style="width: 130px; height: 400px;" flashvars="username=BQTC" wmode="transparent" menu="false" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://ghequa.net/flash/banner-right.swf" /> </div> <style> .ribbon { display:inline-block; color:white; font-weight:bold; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #FFCC33; margin-top:15px; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:red; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon span { background:#FFCC33; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#CC0000; margin-top:0; color:yellow; }.ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #FFCC33;}.ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #FFCC33;} </style> <center> <br /> <div class="ribbon"> <a href="http://diendanyhoc.forum7.net/forum"><span>VÀO DIỄN ĐÀN</span></a> </div> </center> <br /><br /><br /> <div id="container"> <!-- Main Container for Flip Timer and Tab controls --> <style>img{-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}img:hover{-webkit-transform: scale(1.4);-moz-transform: scale(1.4);-o-transform: scale(1.4);-ms-transform: scale(1.4);transform: scale(1.4);}</style> <center> <section class="main"> </section> <ul style="" class="center"> <li> <div class="hover-circle effect1"> <div class="overlay"> <div class="info" style="text-shadow: 5px 5px 5px red; color: yellow;"> <h3 style="text-shadow: 5px 5px 5px red; color: yellow;"> 2014 </h3> <h4> Cung chúc tân niên </h4> <h4> Gia đạo bình yên </h4> <h4> Chồng thảo vợ hiền </h4> <h4> Ấm êm toàn diện. </h4> </div> </div> <img src="http://ghequa.net/img/left.png" /> </div> </li> <li> <div class="hover-circle effect1"> <div class="overlay"> <div class="info" style="text-shadow: 5px 5px 5px red; color: yellow;"> <h3 style="text-shadow: 5px 5px 5px red; color: yellow;"> 2014 </h3> <h4> Cung chúc tân niên </h4> <h4> Làm ăn thuận tiện </h4> <h4> Kiếm được nhiều tiền </h4> <h4> Giầu sang vinh hiển. </h4> </div> </div> <img src="http://ghequa.net/4.png" /> </div> </li> <li> <div class="hover-circle effect1"> <div class="overlay"> <div class="info" style="text-shadow: 5px 5px 5px red; color: yellow;"> <h3 style="text-shadow: 5px 5px 5px red; color: yellow;"> 2014 </h3> <h4> Cung chúc tân niên </h4> <h4> Thành đạt triền miên </h4> <h4> Sự nghiệp phát triển </h4> <h4> Công danh thẳng tiến. </h4> </div> </div> <img src="http://ghequa.net/img/right.png" /> </div> </li> <ul> </ul> </ul><section class="main"></section> </center> </div> <!-- End of Outer Container --><object style="width: 1px; height: 1px;"><param id="movie" value="http://static.mp3.zdn.vn/skins/mp3_main/flash/player/mp3Player_skin1.swf?xmlurl=http://mp3.zing.vn/blog?MjAxMi8wMS8wMy8yL2YvInagaMEMmYyMjdiNDdmNjE1MjAyZDEyODdhODU5MTmUsIC3MDdiMDMdUngWeBXAzfFThdUngr90IHThdUngr90IHThdUngr90IHThdUngr90IMSR4WeBq_WeBiBy4WeBdUngTaXxWxakgSOG6o2kgUGhvInagaMEWeBmd8MXwz" /><param id="quality" value="high" /><param id="wmode" value="transparent" /><embed style="width: 1px; height: 1px;" type="application/x-shockwave-flash" wmode="transparent" quality="high" src="http://static.mp3.zdn.vn/skins/mp3_main/flash/player/mp3Player_skin1.swf?xmlurl=http://mp3.zing.vn/blog?MjAxMi8wMS8wMy8yL2YvInagaMEMmYyMjdiNDdmNjE1MjAyZDEyODdhODU5MTmUsIC3MDdiMDMdUngWeBXAzfFThdUngr90IHThdUngr90IHThdUngr90IHThdUngr90IMSR4WeBq_WeBiBy4WeBdUngTaXxWxakgSOG6o2kgUGhvInagaMEWeBmd8MXwz" /></object><br /> <div class="content"> <a style="position: fixed; bottom:-10px; right:-10px;"><embed style="width: 1300px; height: 150px;" allowscriptaccess="never" wmode="transparent" type="application/x-shockwave-flash" src="http://ghequa.net/flash/danngua2.swf" /></a> </div> <!-- nhac nen --><object style="width: 1px; height: 1px;"><param value="http://www.nhaccuatui.com/m/AQeDjDw_PV" id="movie" /><param value="high" id="quality" /><param value="transparent" id="wmode" /><param value="&autostart=true" id="flashvars" /><embed src="http://www.nhaccuatui.com/m/AQeDjDw_PV" quality="high" wmode="transparent" type="application/x-shockwave-flash" flashvars="&autostart=true" style="width: 1px; height: 1px;" /></object> <!-- end nhac nen --><a href="http://www.forumvi.com" target="_blank"></a></div>