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

Chia sẻ: TRẦN THỊ THANH HẰNG | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

143
lượt xem 31
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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;...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

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ả.