Xem mẫu
- 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:
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;
}
Bước 2: Javascript - Copy đoạn code sau dán vào thẻ head
PHP Code:
/* ==== 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(o[i]);
}
if (ret.length == 1) ret = ret[0];
return ret;
}
function setOpacity (obj,o) {
if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
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[i] = new Slide(this, i);
}
this.oc.parent = this;
this.view = this.slides[0];
this.Z = this.mx;
/* ==== on mouse out event ==== */
this.oc.onmouseout = function () {
this.parent.mouseout();
return false;
}
}
Slider.prototype = {
/* ==== animation loop ==== */
run : function () {
this.Z += this.over ? (this.mn -
this.Z) * .5 : (this.mx - this.Z) * .5;
this.view.calc();
var i = this.NF;
while (i--) this.slides[i].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[N];
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 .5) {
this.obj.style.left = Math.floor(this.x0 += s) + 'p
x';
}
/* ==== vertical text ==== */
var v = (this.N < that.NF -
1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
if (Math.abs(v - this.v) > .5) {
this.bkg.style.top = this.txt.style.top = Math.floo
r(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
this.v = v;
this.cpt++;
} else {
if (!this.pro) {
/* ==== adjust speed ==== */
this.pro = true;
var tps = new Date() - this.start;
if(this.cpt > 1) {
that.S = Math.max(2, (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/3, 1/3.2, 70);
setInterval("slider.s1.run();", 16);
}
}
}();
Bước 3 : Copy Đoạn Code sau dán vào body
PHP Code:
The best
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.
Prototype
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.
- Adapted to serve
Keep feeding them. We will never be this lucky ag
ain; an autogenerated
species adapted to serve all our needs!
At soonest
"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?
/* ==== start script ==== */
slider.init();
Bước 4 : đỗ dữ liệu từ database
Code:
At soonest
"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?
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:
At soonest
- "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?
/* ==== start script ==== */
slider.init();
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.
- 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ả.
nguon tai.lieu . vn
