[Đóng góp] trang html tặng bạn nhân ngày đặt biệt

  Bài viết hay nhất1
vào thằng vấn đề
demo : http://anhoang2.forumvi.com/h16-pukka
cách làm
Tạo 1 html >> chọn không ở 2 dòng
past code sau vào
Code:
<!DOCTYPE HTML>
<html>
<head>
   <title>Happy Birthday To Pukka</title>
   <meta charset="utf-8" />
   <meta name="Author" content="Nam bất tài" />
   <meta name="Copyright" content="Nam bất tài" />
   <meta http-equiv="imagetoolbar" content="no">
   <style type="text/css">
      html {
         overflow: hidden;
      }
      body {
         position: absolute;
         margin: 0px;
         padding: 0px;
         background: #eee;
         width: 100%;
         height: 100%;
         color: #fff;
         font-family: 'Segoe UI Light', 'Segoe UI', Tahoma, Verdana, Sans-Serif;
         font-size: 16px;
      }
      #screen {
         position: absolute;
         width: 100%;
         height: 100%;
         background: #000;
         overflow: hidden;
      }
      #screen img, canvas {
         position: absolute;
         left: -9999px;
         cursor: pointer;
           image-rendering: optimizeSpeed;

      }
      #screen .href {
         border: #FFF dotted 1px;
      }
      #screen .fog {
         position: absolute;
         background: #fff;
         opacity: 0.1;
         filter: alpha(opacity=10);
      }
      #command {
         position:absolute;
         right: 1em;
         top: 1em;
         width: 130px;
         z-index: 30000;
         background:#;
         border: # solid 1em;
         height: 470px;
         text-align: justify;
      }
      
      #command a{
         color: #FFF;
         text-decoration: none;
      }
      #command a:hover{
         color: #FF0000;
         text-decoration: underline;
      }
      
      #bar {
         position:relative;
         left: 1em;
         top: 1em;
         height: 160px;
      }
      #bar .button {
         position: absolute;
         background: #222;
         width: 20px;
         height: 20px;
         cursor: pointer;
      }
      #bar .loaded {
         background: #666;
      }
      #bar .viewed {
         background: #fff;
      }
      #bar .selected {
         background: #f00;
      }
      #urlInfo {
         position: absolute;
         background: url(images/r.gif) no-repeat 0 4px;
         visibility: hidden;
         z-index: 30000;
         padding-left: 12px;
         cursor: pointer;
      }
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <link href="http://account.hehe123.coo.me/sta/u/w/9225/style.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript">
   var m3D = function () {
      /* ---- private vars ---- */
      var diapo = [],
         imb,
         scr,
         bar,
         selected,
         urlInfo,
         imagesPath = "http://i.imgur.com/",
         camera = {x:0, y:0, z:-650, s:0, fov: 500},
         nw = 0,
         nh = 0;
      /* ==== camera tween methods ==== */
      camera.setTarget = function (c0, t1, p) {
         if (Math.abs(t1 - c0) > .1) {
            camera.s = 1;
            camera.p = 0;
            camera.d = t1 - c0;
            if (p) {
               camera.d *= 2;
               camera.p = 9;
            }
         }
      }
      camera.tween = function (v) {
         if (camera.s != 0) {
            camera.p += camera.s;
            camera[v] += camera.d * camera.p * .01;
            if (camera.p == 10) camera.s = -1;
            else if (camera.p == 0) camera.s = 0;
         }
         return camera.s;
      }
      /* ==== diapo constructor ==== */
      var Diapo = function (n, img, x, y, z) {
         if (img) {
            this.url = img.url;
            this.title = img.title;
            this.color = img.color;
            this.isLoaded = false;
            if (document.createElement("canvas").getContext) {
               /* ---- using canvas in place of images (performance trick) ---- */
               this.srcImg = new Image();
               this.srcImg.src = imagesPath + img.src;
               this.img = document.createElement("canvas");
               this.canvas = true;
               scr.appendChild(this.img);
            } else {
               /* ---- normal image ---- */
               this.img = document.createElement('img');
               this.img.src = imagesPath + img.src;
               scr.appendChild(this.img);
            }
            /* ---- on click event ---- */
            this.img.onclick = function () {
               if (camera.s) return;
               if (this.diapo.isLoaded) {
                  if (this.diapo.urlActive) {
                     /* ---- jump hyperlink ---- */
                     top.location.href = this.diapo.url;
                  } else {
                     /* ---- target positions ---- */
                     camera.tz = this.diapo.z - camera.fov;
                     camera.tx = this.diapo.x;
                     camera.ty = this.diapo.y;
                     /* ---- disable previously selected img ---- */
                     if (selected) {
                        selected.but.className = "button viewed";
                        selected.img.className = "";
                        selected.img.style.cursor = "pointer";
                        selected.urlActive = false;
                        urlInfo.style.visibility = "hidden";
                     }
                     /* ---- select current img ---- */
                     this.diapo.but.className = "button selected";
                     interpolation(false);
                     selected = this.diapo;
                  }
               }
            }
            /* ---- command bar buttons ---- */
            this.but = document.createElement('div');
            this.but.className = "button";
            bar.appendChild(this.but);
            this.but.diapo = this;
            this.but.style.left = Math.round((this.but.offsetWidth  * 1.2) * (n % 4)) + 'px';
            this.but.style.top  = Math.round((this.but.offsetHeight * 1.2) * Math.floor(n / 4)) + 'px';
            this.but.onclick = this.img.onclick;
            imb = this.img;
            this.img.diapo = this;
            this.zi = 25000;
         } else {
            /* ---- transparent div ---- */
            this.img = document.createElement('div');
            this.isLoaded = true;
            this.img.className = "fog";
            scr.appendChild(this.img);
            this.w = 300;
            this.h = 300;
            this.zi = 15000;
         }
         /* ---- object variables ---- */
         this.x = x;
         this.y = y;
         this.z = z;
         this.css = this.img.style;
      }
      /* ==== main 3D animation ==== */
      Diapo.prototype.anim = function () {
         if (this.isLoaded) {
            /* ---- 3D to 2D projection ---- */
            var x = this.x - camera.x;
            var y = this.y - camera.y;
            var z = this.z - camera.z;
            if (z < 20) z += 5000;
            var p = camera.fov / z;
            var w = this.w * p;
            var h = this.h * p;
            /* ---- HTML rendering ---- */
            this.css.left  = Math.round(nw + x * p - w * .5) + 'px';
            this.css.top    = Math.round(nh + y * p - h * .5) + 'px'; 
            this.css.width  = Math.round(w) + 'px';
            this.css.height = Math.round(h) + 'px';
            this.css.zIndex = this.zi - Math.round(z);
         } else {
            /* ---- image is loaded? ---- */
            this.isLoaded = this.loading();
         }
      }
      /* ==== onload initialization ==== */
      Diapo.prototype.loading = function () {
         if ((this.canvas && this.srcImg.complete) || this.img.complete) {
            if (this.canvas) {
               /* ---- canvas version ---- */
               this.w = this.srcImg.width;
               this.h = this.srcImg.height;
               this.img.width = this.w;
               this.img.height = this.h;
               var context = this.img.getContext("2d");
               context.drawImage(this.srcImg, 0, 0, this.w, this.h);
            } else {
               /* ---- plain image version ---- */
               this.w = this.img.width;
               this.h = this.img.height;
            }
            /* ---- button loaded ---- */
            this.but.className += " loaded";
            return true;
         }
         return false;
      }
      ////////////////////////////////////////////////////////////////////////////
      /* ==== screen dimensions ==== */
      var resize = function () {
         nw = scr.offsetWidth * .5;
         nh = scr.offsetHeight * .5;
      }
      /* ==== disable interpolation during animation ==== */
      var interpolation = function (bicubic) {
         var i = 0, o;
         while( o = diapo[i++] ) {
            if (o.but) {
               o.css.msInterpolationMode = bicubic ? 'bicubic' : 'nearest-neighbor'; // makes IE8 happy
               o.css.imageRendering = bicubic ? 'optimizeQuality' : 'optimizeSpeed'; // does not really work...
            }
         }
      }
      /* ==== init script ==== */
      var init = function (data) {
         /* ---- containers ---- */
         scr = document.getElementById("screen");
         bar = document.getElementById("bar");
         urlInfo = document.getElementById("urlInfo");
         resize();
         /* ---- loading images ---- */
         var i = 0,
             o,
            n = data.length;
         while( o = data[i++] ) {
            /* ---- images ---- */
            var x = 1000 * ((i % 4) - 1.5);
            var y = Math.round(Math.random() * 4000) - 2000;
            var z = i * (5000 / n);
            diapo.push( new Diapo(i - 1, o, x, y, z));
            /* ---- transparent frames ---- */
            var k = diapo.length - 1;
            for (var j = 0; j < 3; j++) {
               var x = Math.round(Math.random() * 4000) - 2000;
               var y = Math.round(Math.random() * 4000) - 2000;
               diapo.push( new Diapo(k, null, x, y, z + 100));
            }
         }
         /* ---- start engine ---- */
         run();
      }
      ////////////////////////////////////////////////////////////////////////////
      /* ==== main loop ==== */
      var run = function () {
         /* ---- x axis move ---- */
         if (camera.tx) {
            if (!camera.s) camera.setTarget(camera.x, camera.tx);
            var m = camera.tween('x');
            if (!m) camera.tx = 0;
         /* ---- y axis move ---- */
         } else if (camera.ty) {
            if (!camera.s) camera.setTarget(camera.y, camera.ty);
            var m = camera.tween('y');
            if (!m) camera.ty = 0;
         /* ---- z axis move ---- */
         } else if (camera.tz) {
            if (!camera.s) camera.setTarget(camera.z, camera.tz);
            var m = camera.tween('z');
            if (!m) {
               /* ---- animation end ---- */
               camera.tz = 0;
               interpolation(true);
               /* ---- activate hyperlink ---- */
               if (selected.url) {
                  selected.img.style.cursor = "pointer";
                  selected.urlActive = true;
                  selected.img.className = "href";
                  urlInfo.diapo = selected;
                  urlInfo.onclick = selected.img.onclick;
                  urlInfo.innerHTML = selected.title || selected.url;
                  urlInfo.style.visibility = "visible";
                  urlInfo.style.color = selected.color || "#fff";
                  urlInfo.style.top = Math.round(selected.img.offsetTop + selected.img.offsetHeight - urlInfo.offsetHeight - 5) + "px";
                  urlInfo.style.left = Math.round(selected.img.offsetLeft + selected.img.offsetWidth - urlInfo.offsetWidth - 5) + "px";
               } else {
                  selected.img.style.cursor = "default";
               }
            }
         }
         /* ---- anim images ---- */
         var i = 0, o;
         while( o = diapo[i++] ) o.anim();
         /* ---- loop ---- */
         setTimeout(run, 32);
      }
      return {
         ////////////////////////////////////////////////////////////////////////////
         /* ==== initialize script ==== */
         init : init
      }
   }();

   </script>

</head>

<body>
<div id="screen">
   <div id="command">
      <h1>Huệ Pukka</h1>
      
       Chúc em sinh nhật vui vẻ. Hạnh phúc và thành công trong cuộc sống <img src="http://blog.uhm.vn/emo/bpopo/78.gif" alt="Very Happy" longdesc="1" />!
      <div id="bar"></div>
   </div>
   <div id="urlInfo"></div>
</div>

<script type="text/javascript">
/* ==== start script ==== */
setTimeout(function() {
   m3D.init(
      [
{ src: 'k2DThEf.jpg' },
{ src: 'sh4UZD5.jpg' },
{ src: 'YJOlxL6.jpg' },
{ src: 'hankgJa.jpg' },
{ src: 'WV13Uui.jpg' },
{ src: 'YfG4HQW.jpg' },
{ src: 'o59lzTT.jpg' },
{ src: 'crcRgRl.jpg' },
{ src: 'zVQNWpl.jpg' },
{ src: 'oQxyNCd.jpg' },
{ src: 'crcRgRl.jpg' },
{ src: 'zVQNWpl.jpg' },
{ src: 'oQxyNCd.jpg' },
{ src: 'NNjEKK8.jpg' },
{ src: '5H3lv2i.jpg' },
{ src: 'uyN6uL2.jpg' },
{ src: 'sa9EkAt.jpg' },
{ src: 'Vt4nTMF.jpg' },
{ src: 'HzXVNWF.jpg' },
{ src: 'k35Hgfy.jpg' },
{ src: 'jDAmOhG.jpg' },
{ src: 'nO9F6Bu.jpg' },
{ src: 'A8KLC0g.jpg' },
{ src: 'euyfOTJ.jpg' },
{ src: 'lqNd1Fd.jpg' },
{ src: 'ZWc00uh.jpg' },
{ src: 'Zckc3S4.jpg' },
{ src: '1Gdx5Ew.jpg' },
{ src: 'L8cYkUG.jpg' },
{ src: '18L7TuX.jpg' },
{ src: 'bOlxVvT.jpg' },
{ src: 'f09dXMF.jpg' },
{ src: 'QJMXkwt.jpg' },
{ src: '4u2AzqY.jpg' },
{ src: 'XY1crIb.jpg' },
{ src: '4msukMu.jpg' },
{ src: 'RKbqEEJ.jpg' },
{ src: 'nw4I26y.jpg' },
{ src: 'OOBxafA.jpg' },
{ src: 'Hmwi0kn.jpg' },
{ src: 'xnlOHpT.png' },
      ]
   );
}, 500);
</script>
   <object width="1" height="1">  <param name="movie" value="http://www.nhaccuatui.com/m/cghcqmhjNI" />  <param name="quality" value="high" />  <param name="wmode" value="transparent" />  <param name="allowscriptaccess" value="always" />  <param name="flashvars" value="autostart=true" />  <embed src="http://www.nhaccuatui.com/m/cghcqmhjNI" flashvars="target=blank&autostart=true" allowscriptaccess="always" quality="high" wmode="transparent" type="application/x-shockwave-flash" width="1" height="1"></embed></object>

</body>
</html><div id="right-bar" style="display: block;">
  <div class="content-bar">
   
      <div class="fb-comments" data-href="http://anhoang2.forumvi.com/h16-" data-width="430" data-numposts="10" data-colorscheme="dark"></div>

   
  </div>
</div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
/*Cột menu phải*/
#right-bar{z-index:99999;background-size:20px;background:#333 url(http://i58.servimg.com/u/f58/18/50/03/43/arrow_11.png) no-repeat  right;position:fixed;top:0;left:0px;width:50px;height:100%;transition:all 1s ease}

#right-bar:hover{right:0;background:#d7d7d7 url(http://i58.servimg.com/u/f58/18/50/03/43/arrow_11.png) no-repeat  right;transition:all 1s ease}

#right-bar:hover .content-bar{background:#333;transition:all 1s ease;width:440px}
.content-bar{overflow:hidden;background:#fcfcfc;width:0;height:100%;transition:all 1s ease;}
::-webkit-scrollbar {width: 12px;height: 12px}
::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.2);border: 1px solid rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,0.4);}
::-webkit-scrollbar-button {width: 0;height: 0;display:none;}
::-webkit-scrollbar-track {background: #f5f5f5;border-left: 1px solid rgba(0,0,0,0.1);border-right: 1px solid rgba(0,0,0,0.05);}
 
.content-bar{overflow-y:auto;overflow-x:hidden}
</style>
Trong code trên thay http://i.imgur.com/ thành host up ảnh của bạn
tìm những đoạn như thế này { src: '1Gdx5Ew.jpg' }, thay 1Gdx5Ew.jpg thành những thứ phía sau host ảnh :3
ví dụ (host up ảnh của facebook) : link ảnh như thế này
Code:
https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn1/1535623_236222856552032_1221787794_n.jpg
thì trong đó host up ảnh là https://fbcdn-sphotos-a-a.akamaihd.net/
những thứ nằm sau host up ảnh là hphotos-ak-prn1/1535623_236222856552032_1221787794_n.jpg
xong - chúc bạn thành công !
*lưu ý : đây là hàng rip về edit lại, cũng k nhớ cái nguồn là gì, nhưng nhớ là cái này ghi là by: Nam bất tài
Spoiler:
-edit : anhoang_qn
-giúp đở : ZzBaivong
-trong code trên có sử dụng code nav ẩn của Méo
anhoang_qn
  Bài viết hay nhất2
sao mình thay cũng là imgur mà lỗi không hiện ảnh nhỉ
http://cosplay.forumvi.com/h4-page
  Bài viết hay nhất3
Ví dụ link ảnh của mình là: http://i.imgur.com/Xfwdsz4.jpg
Bỏ tên host up ảnh đó ta được Xfwdsz4.jpg
Nếu thay đúng sẽ hiện :)
  Bài viết hay nhất4
mình thay đúng rồi, vẫn không hiện :(
  Bài viết hay nhất5

@truongchun wrote:mình thay đúng rồi, vẫn không hiện :(

Code bạn sửa lại sai bét rồi thì làm sao mà hiện được.

Chèn đoạn code này vào lại trang html của bạn.

Code:
<script type="text/javascript">
/* ==== start script ==== */
setTimeout(function() {
  m3D.init(
      [
{ src: 'StZB9rQ.jpg' },
{ src: 'b9BqF0H.jpg' },
{ src: '1oKWu0U.jpg' },
{ src: 'bSli3Hw.jpg' },
{ src: 'K8iCvjK.jpg' },
{ src: 'lm4437u.jpg' },
{ src: 'dClVMpK.jpg' },
{ src: 'ezost0g.jpg' },
{ src: 'oImOiS2.jpg' },
{ src: 'hrzQ5DM.jpg' },
{ src: 'fLRl3qU.jpg' },
{ src: 'awOvpYo.jpg' },
{ src: '2pldP8m.jpg' },
{ src: 'ABeh1sH.jpg' },
{ src: 'Riw70af.jpg' },
{ src: '2lVfxT1.jpg' },
{ src: '8JjlGT6.jpg' },
{ src: 'Jk2HdPe.jpg' },
{ src: 'E6O9v1n.jpg' },
{ src: 'fxokBfe.jpg' },
{ src: 'DohMhPP.jpg' },
{ src: '6WwZphJ.jpg' },
{ src: 'RdolOdH.jpg' },
{ src: 'AIELKSl.jpg' },
{ src: 'OD1ZkiE.jpg' },
{ src: 'EDTlWa7.jpg' },
{ src: '2VkYbro.jpg' },
{ src: 'MFDaprY.jpg' },
{ src: 'b9c09CP.jpg' },
{ src: 'ugrqyYQ.jpg' },
{ src: 'bxnNmYB.jpg' },
{ src: 'lmgF1zH.jpg' },
{ src: 'ZZNIyye.jpg' },
{ src: 'ZNlMXwb.jpg' },
{ src: 't09tiM6.jpg' },
{ src: 'WtDbaCQ.jpg' },
{ src: 'us3iHp2.jpg' },
{ src: 'NteJIyg.jpg' },
{ src: 'ZRKyDdg.jpg' },
{ src: 'zkXIxhf.jpg' },
{ src: 'T8pCdBR.jpg' },
{ src: 'HKlUgCF.jpg' },
{ src: 'L0sCJis.jpg' },
{ src: 'BVVbh8y.jpg' },
      ]
  );
}, 500);
</script>
  Bài viết hay nhất6
tks bạn mình thay vào được rồi mà mình thấy nó vẫn vậy mà, tại lúc copy có cả http://imgur... nữa nên đưa vào word ctrl + H luôn nên kb có sai sót gì mà vẫn k thấy @@
  Bài viết hay nhất7

@truongchun wrote:tks bạn mình thay vào được rồi mà mình thấy nó vẫn vậy mà, tại lúc copy có cả http://imgur...  nữa nên đưa vào word ctrl + H luôn nên kb có sai sót gì mà vẫn k thấy @@

Bạn lẫn lộn dấu ` và dấu ' đó mà.
Trong Jquery sai một dấu là lỗi hết.
  Bài viết hay nhất8
ừ nhỉ, tại nhìn na ná nhau :D
You cannot reply to topics in this forum