นิยาย Toffee Code Id Dream [CLOSE] > ลำดับตอนที่ #27 : My Dream : Dek-D.com

Toffee Code Id Dream [CLOSE]

ลำดับตอนที่ #27 : My Dream

เนื้อหาตอนนี้เปิดให้อ่าน
326

0

10 เม.ย. 55

cinnamon

My Dream

<!DOCTYPE html>

<head>

<style>

#navbar-iframe {display: none; height: 0;}

@font-face {font-family: Gaeul; src: url('http://jokerlove.herobo.com/Fonts/%b0%a1%c0%bb%c3%bc.ttf');}

@font-face {font-family: Segoe Script L; src: url('http://jokerlove.herobo.com/Fonts/segoesc.ttf');}

url('reset.css');

body{

line-height:18px;

font-size:11px;

font-family: Arial;

background:#fff;

}

a:link, a:visited, a:active {

font: normal 8pt "helvetica", sans-serif;

text-decoration: none;

text-transform: uppercase;

color:#777;

text-decoration:none;

-webkit-transition: 0.5s;

}

a:hover{

color:#a3a3a3;

-webkit-transition: 0.5s;

}

blockquote {

background:#fff url(http://img31.imageshack.us/img31/4412/linepattern.png) repeat;

border-top: 10px solid #CCC;

color: #b0acac;

padding: 5px;

-webkit-transition: 0.5s;

}

img{

filter: alpha(opacity=80);

opacity:0.8;

}

/******** DO NOT TOUCH ********/ /******** DO NOT TOUCH ********/ /******** DO NOT TOUCH ********/ /******** DO NOT TOUCH ********/

img.ac_bgimage{position:fixed; left:0px; top:0px; width:100%; opacity:0.8; display:none;}

.ac_overlay{width:100%; height:100%; position:fixed; top:0px; left:0px; background:#fff; opacity:.3;}

.ac_content{position:fixed; height:90px; width:100%; top:50%; left:0px; margin-top:-65px;}

.ac_menu{background:#fff url(http://img31.imageshack.us/img31/4412/linepattern.png) repeat top left; float:left; position:relative; height:50px; width:0px; opacity:.8;}

.ac_menu > ul{float:right;}

.ac_menu > ul > li{float:left; position:relative; height:50px; overflow:hidden;}

.anch{margin-top:60px; opacity:0; display:block; height:90px; padding:0px 10px; text-align:center; line-height:90px; outline:none; font-weight:bold; color:#a3a3a3; -webkit-transition: 1s;}

.ac_subitem{width:600px; height:0px; top:55%; right:0px; margin-top:0px; position:fixed; ; overflow:hidden; background:#fff; opacity:.8; -webkit-transition: 1s;}

.ac_subitem:hover{opacity:1.0; -webkit-transition: 0.5s;}

.con{padding-left:15px; padding-right:10px; width:575px; height:600px; overflow:auto;}

.con2{padding-left:15px; padding-right:10px; width:575px; height:640px; overflow:auto;}

.ac_subitem h2{font-size:22px; font-weight:bold; color:#a3a3a3; border-bottom:1px dashed #a3a3a3; font-family:'Segoe Script L';}

span.ac_close{float:right; margin:10px; width:11px; height:12px; cursor:pointer; background:transparent url(http://a.imageshack.us/img51/3031/closejj.png) no-repeat top left; opacity:0.4;}

span.ac_close:hover{opacity:1.0;}

.ac_footer{position:fixed; bottom:0px; left:0px; width:100%; font-size:13px; background:#f5f5f5; opacity:0.6; height:20px; padding-bottom:5px;}

</style>

</head>

<body>

</div>

<ul>

<li>

    PAST:

<option selected="selected">Months</option><BloggerArchives>

</BloggerArchives></select>

</BloggerPreviousItems></select><br><br>

<p>

<$BlogItemBody$><br /><br />

</p>

</Blogger>

</div>

</li>

<li>

<p>

Layout: 내 꿈 (My Dream) by <a href="http://jungnara.blogspot.com/">정나라</a> (<a href="http://www.blogskins.com/me/jung1">JUNG NARA</a>) <br />

Banner: <a href="http://f-ayn-t.deviantart.com/art/Choices-186769515">: Choices :</a> by <a href="http://f-ayn-t.deviantart.com/">F-AYN-T</a><br />

Inspiration: <a href="http://www.tympanus.net">Tympanus</a><br />

<b>bold</b> <i>italic</i> <u>underline</u> <s>strike</s> <a href="la">link</a>

</center>

안녕~ I am Miss Jung Nara~ ^^v<br>

Bored and nothing to do, dream inspired layout. Hopefully, you guys will like it~<br>

I am currently 19 years old~ turning 20 on the 15th of May~ <br>

I am fluent in both languages, Korean (한글) and English.<br>

I have one sibling, <a href="http://jungnayeong.blogspot.com/">JUNG NAYEONG</a> (<a href="http://www.blogskins.com/me/jung2">정나영</a>), my younger sister.<br>

I will be taking Web Designing as a major, and photography as a hobby~^^

<br>

-정나라<br><br>

<br>

✪ <a href="link">Link</a>     ✪ <a href="link">Link</a>     ✪ <a href="link">Link</a>     ✪ <a href="link">Link</a>     ✪ <a href="link">Link</a><br>

</p>

</div>

</li>

<li>

<a class="anch" style=" font-size:18pt; font-family: 'Gaeul';" href="http://fc04.deviantart.net/fs71/i/2010/323/d/3/__choices___by_f_ayn_t-d3374a3.jpg">TAGBOARD</a>

<a href="http://www5.shoutmix.com/?jungnara">View shoutbox</a></iframe>

</div>

</li>

</ul>

</div>

$(function() {

var $ac_background = $('#ac_background'),

$ac_bgimage = $ac_background.find('.ac_bgimage'),

$ac_loading = $ac_background.find('.ac_loading'),

$ac_content = $('#ac_content'),

$title = $ac_content.find('h1'),

$menu = $ac_content.find('.ac_menu'),

$mainNav = $menu.find('ul:first'),

$menuItems = $mainNav.children('li'),

totalItems = $menuItems.length,

$ItemImages = new Array();

for this menu, we will preload all the images.

let's add all the image sources to an array,

including the bg image

$menuItems.each(function(i) {

$ItemImages.push($(this).children('a:first').attr('href'));

});

$ItemImages.push($ac_bgimage.attr('src'));

var Menu = (function(){

var init = function() {

loadPage();

initWindowEvent();

loadPage = function() {

1- loads the bg image and all the item images;

2- shows the bg image;

3- shows / slides out the menu;

4- shows the menu items;

5- initializes the menu items events

$ac_loading.show();//show loading status image

$.when(loadImages()).done(function(){

$.when(showBGImage()).done(function(){

//hide the loading status image

$ac_loading.hide();

$.when(slideOutMenu()).done(function(){

$.when(toggleMenuItems('up')).done(function(){

initEventsSubMenu();

});

showBGImage = function() {

return $.Deferred(

function(dfd) {

//adjusts the dimensions of the image to fit the screen

adjustImageSize($ac_bgimage);

$ac_bgimage.fadeIn(1000, dfd.resolve);

}

).promise();

slideOutMenu = function() {

/* calculate new width for the menu */

var new_w = $(window).width() - $title.outerWidth(true);

return $.Deferred(

function(dfd) {

//slides out the menu

$menu.stop()

.animate({

width : new_w + 'px'

}, 700, dfd.resolve);

}

).promise();

/* shows / hides the menu items */

toggleMenuItems = function(dir) {

return $.Deferred(

function(dfd) {

slides in / out the items.

different animation time for each one.

$menuItems.each(function(i) {

var $el_title = $(this).children('a:first'),

marginTop, opacity, easing;

if(dir === 'up'){

marginTop = '0px';

opacity = 1;

easing = 'easeOutBack';

}

else if(dir === 'down'){

marginTop = '60px';

opacity = 0;

easing = 'easeInBack';

}

$el_title.stop()

.animate({

marginTop : marginTop,

opacity : opacity

}, 200 + i * 200 , easing, function(){

if(i === totalItems - 1)

dfd.resolve();

});

}

).promise();

initEventsSubMenu = function() {

$menuItems.each(function(i) {

var $item = $(this), // the <li>

$el_title = $item.children('a:first'),

el_image = $el_title.attr('href'),

$sub_menu = $item.find('.ac_subitem'),

$ac_close = $sub_menu.find('.ac_close');

/* user clicks one item : appetizers | main course | desserts | wines | specials */

$el_title.bind('click.Menu', function(e) {

$.when(toggleMenuItems('down')).done(function(){

openSubMenu($item, $sub_menu, el_image);

});

return false;

});

/* closes the submenu */

$ac_close.bind('click.Menu', function(e) {

closeSubMenu($sub_menu);

return false;

});

openSubMenu = function($item, $sub_menu, el_image) {

$sub_menu.stop()

.animate({

height : '700px',

marginTop : '-400px'

}, 400, function() {

//the bg image changes

showItemImage(el_image);

});

/* changes the background image */

showItemImage = function(source) {

//if its the current one return

if($ac_bgimage.attr('src') === source)

return false;

var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');

$itemImage.insertBefore($ac_bgimage);

adjustImageSize($itemImage);

$ac_bgimage.fadeOut(1500, function() {

$(this) ();

$ac_bgimage = $itemImage;

});

$itemImage.fadeIn(1500);

closeSubMenu = function($sub_menu) {

$sub_menu.stop()

.animate({

height : '0px',

marginTop : '0px'

}, 400, function() {

//show items

toggleMenuItems('up');

});

on window resize, ajust the bg image dimentions,

and recalculate the menus width

initWindowEvent = function() {

/* on window resize set the width for the menu */

$(window).bind('resize.Menu' , function(e) {

adjustImageSize($ac_bgimage);

/* calculate new width for the menu */

var new_w = $(window).width() - $title.outerWidth(true);

$menu.css('width', new_w + 'px');

});

/* makes an image "fullscreen" and centered */

adjustImageSize = function($img) {

var w_w = $(window).width(),

w_h = $(window).height(),

r_w = w_h / w_w,

i_w = $img.width(),

i_h = $img.height(),

r_i = i_h / i_w,

new_w,new_h,

new_left,new_top;

if(r_w > r_i){

new_h = w_h;

new_w = w_h / r_i;

}

else{

new_h = w_w * r_i;

new_w = w_w;

}

$img.css({

width : new_w + 'px',

height : new_h + 'px',

left : (w_w - new_w) / 2 + 'px',

top : (w_h - new_h) / 2 + 'px'

});

/* preloads a set of images */

loadImages = function() {

return $.Deferred(

function(dfd) {

var total_images = $ItemImages.length,

loaded = 0;

for(var i = 0; i < total_images; ++i){

$('<img/>').load(function() {

++loaded;

if(loaded === total_images)

dfd.resolve();

}).attr('src' , $ItemImages[i]);

}

).promise();

};

return {

init : init

};

})();

call the init method of Menu

Menu.init();

});

</script>

</div>

</body>

</html>

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #27 : My Dream

นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #27 : My Dream

นิยายที่ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

ความคิดเห็น