Code Trang chủ đẹp ai thich thì Clip

by **teen.hot4um.com** 7/7/2010, 11:58 am

Code Trang chủ đẹp ai thich thì Clip nhanh lên kẻo hết code có hạng ^^

<head>
<title>:: Winni Fourm :: Believe in a bright future :: </title>
<meta name="keywords" content="">
<meta name="description" content="">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">

</style><td>
</table>

<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: 0%;
top: 10%;
background: #000;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 40%;
background: #181818;
}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 16%;
text-align: center;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>

<script type="text/javascript">

var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
(img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left = '-1000px';
cont.appendChild(flx);
return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
function ImageFlow(oCont, size, zoom, border) {
this.diapos = [];
this.scr = false;
this.size = size;
this.zoom = zoom;
this.bdw = border;
this.oCont = oCont;
this.oc = document.getElementById(oCont);
this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
this.text = getElementsByClass(this.oc, 'div', 'text');
this.title = getElementsByClass(this.text, 'div', 'title');
this.legend = getElementsByClass(this.text, 'div', 'legend');
this.bar = getElementsByClass(this.oc, 'img', 'bar');
this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
this.bw = this.bar.width;
this.alw = this.arL.width - 5;
this.arw = this.arR.width - 5;
this.bar.parent = this.oc.parent = this;
this.arL.parent = this.arR.parent = this;
this.view = this.back = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x += o.w1 + this.bdw;
tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x -= o.w1 + this.bdw;
tw += o.w1 + this.bdw;
lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent = parent;
this.loaded = false;
this.title = title;
this.text = text;
this.url = url;
this.target = target;
this.N = N;
this.img = document.createElement('img');
this.img.src = src;
this.img.parent = this;
this.img.className = 'diapo';
this.x0 = this.parent.oc.clientWidth;
this.x1 = this.x0;
this.w0 = 0;
this.w1 = 0;
this.z1 = 1;
this.img.parent = this;
this.img.onclick = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout = function () { this.className = 'diapo'; }
}
}
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left = Math.round(this.x0) + 'px';
o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw = this.img.width;
this.ih = this.img.height;
this.r = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods ==== //////////// */
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();

/* ==== create imageFlow ==== */
// div ID , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);

</script>

</head>

<body bgcolor="#009966">

<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>

<center>

<font color="white" size=7><strong> :: Winni Fourm :: Believe in a bright future :: </font></strong>

<object width="1" height="1"><param name="movie" value="http://www.nhaccuatui.com/l/i2g98XbmCObZ" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="&autostart=true" /><embed src="http://www.nhaccuatui.com/l/i2g98XbmCObZ" quality="high" wmode="transparent" type="application/x-shockwave-flash" flashvars="&autostart=true" width="1" height="1"></embed></object>

</center>
<td>
</table>
<div id="imageFlow">
<div class="top"></div>
<div class="bank">

<a rel="http://c.upanh.com/uploads/30-Dec-2009/cnw6xkiqtjfssskkhl4.png" title="Diễn Đàn" href="/index.htm" target="_blank">Click Vào Hình Để Vào Diễn Đàn</a>
<a rel="http://c.upanh.com/uploads/30-Dec-2009/b2wsi4n9m7k0qvr7c8u.png" title="Trang Chủ" href="/html-h5.htm"" target="_blank">Click Vào Hình Để Vào Trang Chủ</a>
<a rel="http://c.upanh.com/uploads/30-Dec-2009/bjq38eayeti5lwe0e5pd.png" title="Tivi Online" href="/html-h5.htm"" target="_blank">Click Vào Hình Để Xem Tivi Online</a>
<a rel="http://c.upanh.com/uploads/30-Dec-2009/ac97x8uczgpz0s15cvkg.png" title="Up Ảnh" href="/html-h5.htm"" target="_blank">Click Vào Hình Để Up Ảnh</a>

<a rel="http://c.upanh.com/uploads/30-Dec-2009/b2wsi4n9m7k0qvr7c8u.png" title="Nghe Nhạc" href="/html-h5.htm"" target="_blank">Click Vào Hình Để Vào Nghe Nhạc</a>
<a rel="http://c.upanh.com/uploads/30-Dec-2009/cnw6xkiqtjfssskkhl4.png" title="Diễn Đàn" href="/index.htm"" target="_blank">Click Vào Hình Để Vào Diễn Đàn</a>
</div>

<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar">
<img class="track" src="https://2img.net/h/i471.photobucket.com/albums/rr77/nh0c_tj21/sb.gif" alt="">
<img class="arrow-left" src="https://2img.net/h/i471.photobucket.com/albums/rr77/nh0c_tj21/sl.gif" alt="">

<img class="arrow-right" src="https://2img.net/h/i471.photobucket.com/albums/rr77/nh0c_tj21/sr.gif" alt="">

<img class="bar" src="https://2img.net/h/i471.photobucket.com/albums/rr77/nh0c_tj21/sc.gif" alt="">
</div>

</div>
</body>

<a href="https://www.forumotion.com" target="_blank">forumotion.com</a>

by **tino** 7/7/2010, 12:05 pm

quá đẹp bạn ạ
cảm ơn bạn nhé Good good

by **goldenfish** 7/7/2010, 1:17 pm

cái này tạo menu kiểu MAC nè Nháy mằt

chỉ có điều là k phải dùng flash để làm whistling

:

by **ttc07** 7/7/2010, 1:48 pm

Mà cái code này chèn vô đâu vậy....Dùng cho phpBB2 được hung ?

by Tô 7/7/2010, 6:03 pm

ttc07 đã viết:Mà cái code này chèn vô đâu vậy....Dùng cho phpBB2 được hung ?

chèn vào HTML bạn à

by **click.b00m** 7/7/2010, 10:22 pm

mấy pro chỉ cach thêm cái hình nền vào đi cảm ơn

by **CPFounder** 7/7/2010, 11:27 pm

Clip nghĩa là gì vậy bạn? :106:

by **Elmer** 1/8/2010, 1:20 pm

ủa cái quag cao mất tiêu đâu rồi .nó ban form thi chết

by **w0rkwe** 1/8/2010, 1:39 pm

NHÀM

by **Beelly** 1/8/2010, 1:41 pm

demo ?

by **longdienhocuong** 12/8/2010, 12:49 pm

làm sao để vào trang html ấy trước khi vào trang chủ đây. chỉ mình với

by **oahqnam8045** 12/8/2010, 3:48 pm

Code Trang chủ đẹp ai thich thì Clip Editer

<-- bạn bấm vào đây

Use this page as homepage ? <-- mục này chọn có

Thêm cái này xuống dưới cùng của HTML:
Code:

Spoiler:

by **longdienhocuong** 12/8/2010, 5:14 pm

Thêm vào cái trang mình tạo hay index_body

by **oahqnam8045** 12/8/2010, 10:38 pm

tất cả đều thực hiện trên HTML, ko liên wan gì đến index_body cả

by **assassin_91** 19/8/2010, 4:03 pm

Thế làm thế nào để khi click vào mục Nghe nhạc ( vd) thì nó chuyển tới 1 forum mà mình làm sẵn rồi,chứ ko phải vào trang chủ như bản demo kia!
Các bro pm nhanh nhá

by Sponsored content

Code Trang chủ đẹp ai thich thì Clip

Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Re: Code Trang chủ đẹp ai thich thì Clip

Code trang chủ Đẹp ai thich thi clip

Re: Code Trang chủ đẹp ai thich thì Clip

Code trang chủ Đẹp ai thich thi clip

Re: Code Trang chủ đẹp ai thich thì Clip

Cần pm khẩn!!!!

Re: Code Trang chủ đẹp ai thich thì Clip