Tài liệu Không xài flash. vẫn javascript + css + html theo bài học đổ dữ liệu từ database docx

At soonest "Blood is dark red, iron dark blue, this tale is blissful and so are you".. The agency gu y must be there already, with some luck we'll have some nice dinner on him.. The ag

Không sài flash vẫn javascript + css + html

theo bài học đổ dữ liệu từ database vào sẽ có được 1 phần giới thiệu ấn tượng Demo : http://hoangth.webdoanhnghiep.org/2/

Bước 1 : CSS - Copy đoạn code sau dán vào thẻ head

PHP Code:

<style type="text/css">

html {

overflow: hidden;

}

body {

position: absolute;

margin: 0px;

padding: 0px;

background: #111;

width: 100%;

height: 100%;

}

#center {

position: absolute;

left: 50%;

top: 50%;

}

#slider {

position: absolute;

width: 820px;

height: 333px;

left: -430px;

top: -186px;

overflow: hidden;

background: #000;

border: 20px solid #000;

}

#slider slide {

position: absolute;

top: 0px;

height: 333px;

width: 500px;

background: #000;

overflow: hidden;

border-left: #000 solid 1px;

cursor: default;

}

#slider title {

color: #F80;

font-weight: bold;

font-size: 1.2em;

margin-right: 1.5em;

text-decoration: none;

}

#slider backgroundText {

position: absolute;

width: 100%;

height: 100%;

top: 100%;

background: #000;

filter: alpha(opacity=40);

opacity: 0.4;

}

#slider text {

position: absolute;

top: 1%;

top: 100%;

color: #FFF;

font-family: verdana, arial, Helvetica, sans-serif;

font-size: 0.9em;

text-align: justify;

width: 470px;

left: 10px;

}

#slider diapo {

position: absolute;

filter: alpha(opacity=100);

opacity: 1

visibility: hidden;

}

</style>

Bước 2: Javascript - Copy đoạn code sau dán vào thẻ head

PHP Code:

<script type="text/javascript">

/* ==== slider nameSpace ==== */

var slider = function() {

/* ==== private methods ==== */

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( [ ]);

}

if (ret.length == 1 ret = ret[ ];

return ret;

}

function setOpacity (obj, ) {

if (obj.filters) obj.filters.alpha.opacity = Math.round( ); else obj.style.opacity = o / 100;

}

/* ==== Slider Constructor ==== */

function Slider(oCont, speed, iW, iH, oP) {

this.slides = [];

this.over = false;

this.S = this.S0 = speed;

this.iW = iW;

this.iH = iH;

this.oP = oP;

this.oc = document.getElementById(oCont);

this.frm = getElementsByClass(this.oc, 'div', 'slide'); this.NF = this.frm.length;

this.resize();

for (var i = 0 i < this.NF; i++) {

this.slides[ ] = new Slide(this, i);

}

this.oc.parent = this;

this.view = this.slides[ ];

this.Z = this.mx;

/* ==== on mouse out event ==== */

this.oc.onmouseout = function () {

this.parent.mouseout();

return false;

}

}

Slider.prototype = {

/* ==== animation loop ==== */

run : function () {

this += this.over ? (this.mn

-this ) * 5 : (this.mx - this ) * 5;

this.view.calc();

var i = this.NF;

while (i ) this.slides[ ].move();

},

/* ==== resize ==== */

resize : function () {

this.wh = this.oc.clientWidth;

this.ht = this.oc.clientHeight;

this.wr = this.wh * this.iW;

this.r = this.ht / this.wr;

this.mx = this.wh / this.NF;

this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1); },

/* ==== rest ==== */

mouseout : function () {

this.over = false;

setOpacity(this.view.img, this.oP);

}

}

/* ==== Slide Constructor ==== */

Slide = function (parent, N) {

this.parent = parent;

this.N = N

this.x0 = this.x1 = N * parent.mx;

this.v = 0

this.loaded = false;

this.cpt = 0

this.start = new Date();

this.obj = parent.frm[ ];

this.txt = getElementsByClass(this.obj, 'div', 'text'); this.img = getElementsByClass(this.obj, 'img', 'diapo'); this.bkg = document.createElement('div');

this.bkg.className = 'backgroundText';

this.obj.insertBefore(this.bkg, this.txt);

if (N == 0 this.obj.style.borderLeft = 'none';

this.obj.style.left = Math.floor(this.x0) + 'px';

setOpacity(this.img, parent.oP);

/* ==== mouse events ==== */

this.obj.parent = this;

this.obj.onmouseover = function() {

this.parent.over();

return false;

}

}

Slide.prototype = {

/* ==== target positions ==== */

calc : function() {

var that = this.parent;

// left slides

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

that.slides[ ].x1 = i * that ;

}

// right slides

for (var i = this + 1 i < that.NF; i++) {

that.slides[ ].x1 = that.wh - (that.NF

-i) * that ;

}

},

/* ==== HTML animation : move slides ==== */

move : function() {

var that = this.parent;

var s = (this.x1 - this.x0) / that ;

/* ==== lateral slide ==== */

if (this && Math.abs( ) > 5) {

this.obj.style.left = Math.floor(this.x0 += s) + 'p x';

}

/* ==== vertical text ==== */

var v = (this < that.NF

-1) ? that.slides[this + 1].x0 - this.x0 : that.wh - this.x0;

if (Math.abs( - this ) > 5) {

this.bkg.style.top = this.txt.style.top = Math.floo

r 2 + that.ht - (v - that ) * that.iH * that ) + 'px';

this = v

this.cpt++;

} else {

if (!this.pro) {

/* ==== adjust speed ==== */

this.pro = true;

var tps = new Date() - this.start;

if(this.cpt > 1) {

that = Math.max( , (28 / (tps / this.cpt) ) * that.S0);

}

}

}

if (!this.loaded) {

if (this.img.complete) {

this.img.style.visibility = 'visible';

this.loaded = true;

}

}

},

/* ==== light ==== */

over : function () {

this.parent.resize();

this.parent.over = true;

setOpacity(this.parent.view.img, this.parent.oP);

this.parent.view = this;

this.start = new Date();

this.cpt = 0

this.pro = false;

this.calc();

setOpacity(this.img, 100);

}

}

/* ==== public method - script initialization ==== */

return {

init : function() {

// create instances of sliders here

// parameters : HTMLcontainer name, speed (2 fast

-20 slow), Horizontal ratio, vertical text ratio, opacity

this.s1 = new Slider("slider", 12, 1.84/ , 1 3.2, 70); setInterval("slider.s1.run();", 16);

}

}

}();

</script>

Bước 3 : Copy Đoạn Code sau dán vào body

PHP Code:

<div id="center">

<div id="slider">

<div class="slide">

<img class="diapo" src="sf10.jpg" alt="">

<div class="text">

<span class="title">The best</span>

The offspring of a customized orbiter, Oïkostem a rose as the best balanced

home for our plans So we submitted to its condit ions

</div>

</div>

<div class="slide">

<img class="diapo" src="sf14.jpg" alt="">

<div class="text">

<span class="title">Prototype</span>

Oïkostem's deep impulse flow is selectively regulat

ed by a molecule

originated in the prototype model, that creates its own variational

principles, as oriented by the first local generati

on of terminable androids

</div>

</div>

<div class="slide">

<img class="diapo" src="sf50.jpg" alt="">

<div class="text">

<span class="title">Adapted to serve</span>

Keep feeding them We will never be this lucky ag ain; an autogenerated

species adapted to serve all our needs!

</div>

</div>

<div class="slide">

<img class="diapo" src="sf19.jpg" alt="">

<div class="text">

<a class="title" href="http://www.dhteumeuleu.com

">At soonest</a>

"Blood is dark red, iron dark blue, this tale is blissful and so are you" I

should get to the hotel at soonest The agency gu

y must be there already,

with some luck we'll have some nice dinner on him Hows that?

</div>

</div>

</div>

</div>

<script type="text/javascript">

/* ==== start script ==== */

slider.init();

</script>

Bước 4 : đỗ dữ liệu từ database

Code:

<div class="slide">

<img class="diapo" src="sf19.jpg" alt="">

<div class="text">

<a class="title"

href="http://www.dhteumeuleu.com">At soonest</a>

"Blood is dark red, iron dark blue, this tale is blissful and so are you" I

should get to the hotel at soonest The agency guy must be there already,

with some luck we'll have some nice dinner on him How's that?

</div>

</div>

Xóa các div con như trên chỉ dữ lại 1 cái

Đoạn code mới trong body sau khi đã xóa

Code:

<div id="center">

<div id="slider">

<! Bat dau lap >

<div class="slide">

<img class="diapo" src="sf19.jpg" alt="">

<div class="text">

<a class="title"

href="http://www.dhteumeuleu.com">At soonest</a>

"Blood is dark red, iron dark blue, this tale is blissful and so are you" I

should get to the hotel at soonest The agency guy must be there already,

with some luck we'll have some nice dinner on him How's that?

</div>

</div>

<! ket thuc lap >

</div>

</div>

<script type="text/javascript">

/* ==== start script ==== */

slider.init();

</script>

Bước 5 : Tạo Recordset Điều kiện lọc tùy theo mục đích của các bạn

Vì ở chế độ design khó nhìn thấy và kéo thả sẽ không chính xác nên mình sẽ làm ở chế độ màn hình code Click this bar to view the small image.

Click this bar to view the small image.

OK giờ thì lặp thôi nhưng tầm vài tấm thôi đừng lặp quá nhiều 10 cái nhé.

Click this bar to view the small image.

kết quả sau khi lặp

Click this bar to view the small image.

Ok F12 Để xem kết quả.