Khi lang thang vào những website chuyên giới thiệu các sản phẩm công nghệ, phong cách giao diện metro. Chúng ta thấy đôi khi họ sử dụng hiệu ứng trượt theo chiều ngang hoặc chiều dọc khá đẹp mắt.

Để làm được hiệu ứng đó, nhiều bạn cứ nghĩ phải đụng đến jquery hay đại loại là cần đến javascript. Và hầu hết các website giải quyết vấn đề theo cách này.
Với tôi thì nghĩ khác, tại sao chúng ta lại phải dùng js, nếu trinh duyệt tắt js thì sao. Trong khi vấn đề đó có thể được giải quyết đơn giản.



 Bài viết này là một demo mẫu viết bằng HTML + CSS, rất dễ tùy biết, nhanh gọn đẹp.

<style>
    #bendoi{width:500px; height:300px; border:0px solid #ccc; float:left;overflow:hidden;}
    .ngang, .doc {float:left; margin:5px; padding:5px; border:1px solid #ccc;display: block;overflow:hidden;box-align:center;text-align:center; min-width:50px; min-height:100px; position: relative;
    display: table-cell;vertical-align: middle;
    }
    /*ngang*/
    .ngang .trai {float: left;position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s;
      padding-top:35px}
 
   .ngang .phai { float: right;width: ;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s; padding-top:35px}
 
    .ngang:hover .trai {margin-left: 120px;}
    .ngang:hover .phai {margin-right: 120px;}
    /*doc*/
    .doc .tren {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;   -o-transition-duration: 1s; top:10px}
 
   .doc .duoi {position: absolute;transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;      -o-transition-duration: 1s;
      bottom:10px;}
 
    .doc:hover .tren {margin-top: 70px;}
    .doc:hover .duoi {margin-bottom: 70px;}
 
  </style>

  <div id="bendoi">
    <div class="ngang" style="width:150px; ">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="ngang" style="width:150px;  height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
   
     <div class="ngang" style="width:150px; height:;">
      <div class="trai"> trai </div>
      <div class="phai"> phai </div>
    </div>
 
    <div class="doc" style="width:; height:;">
      <div class="tren"> tren </div>
      <div class="duoi"> duoi </div>
    </div>
 
  </div>   gửi email đến tôi nếu bạn muốn có một thiết kế riêng thật đẹp mắt và không "đụng hàng"

trai

phai

tren

duoi

tren

duoi

trai

phai

trai

phai

tren

duoi

trai

phai

tren

duoi

Thao Trinh

http://web.bendoi.vn/2013/09/css-hieu-ung-truot-len-xuong-trai-phai.html

Nếu như bạn từ xem bài mot-so-kieu-hien-thi-co-dinh-tren-man-hinh thì kiểu này khá đơn giản và nhanh chóng.
Nếu bạn muốn nó cầu kỳ hơn, tạo hiệu ứng trượt và ẩn khi đang ở trên cùng thì tham khảo code này.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
<style type="text/css">
#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
</style>
<a href="#" id="toTop">Scroll to Top</a>

Có nhiều trang giới thiệu nhưng không ghi rõ nguồn thậm chí có trang khá nổi tiếng do nhiều người quản trị còn đề tên mình lên code.
Mình lùng sục tìm nó thì thấy đây là Version: 1.0, 12/03/2009 tại ph-creative.com. Hiện nay trang đó không còn bài này!
Ghi chú: Mình giữ nguyên phần javascript, còn css và html rút gọn lại cái quan trọn và cho đơn giản dễ nhìn nhất.
Theo mình thì bạn chỉ nên sử dụng code này nếu trang web đã có sẵn file jquery.min.js, còn nếu không thì chẳng cần tốn cái jquery.min.js cho 1 hiệu ứng này mà ta có thể thay thế nó bằng bài đơn giản hơn chỉ với html+css.
Bạn có thể thay chữ "Scroll to Top" bằng link ảnh tại những kho icon, ví dụ như trang http://findicons.com/search/top#ajax

---

thao! bendoi.vn

Lên trên nào

Nhấn đồng thời giữ chuột vào bức ảnh rồi kéo sang bên đối diện

Xem ví dụ

<style type="text/css">
#div1ev, #div2ev
{float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev){ev.preventDefault();}
function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1ev" ondragover="allowDrop(event)" ondrop="drop(event)"> <img draggable="true" id="drag1" ondragstart="drag(event)" src="http://bit.ly/bendoi001" width="180" />bendoi.vn</div>
<div id="div2ev" ondragover="allowDrop(event)" ondrop="drop(event)"> </div>
</fieldset>

Xem Kết quả

bendoi.vn

Thank: w3c

<!-- co lien quan den vi tri ban chu thich -->
<STYLE type=text/css>#dhtmltooltip {
BORDER-RIGHT: black 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: black 1px solid;
PADDING-LEFT: 2px; Z-INDEX: 100;
FILTER: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
LEFT: -300px;
VISIBILITY: hidden;
PADDING-BOTTOM: 2px;
BORDER-LEFT: black 1px solid;
WIDTH: 150px;
PADDING-TOP: 2px;
BORDER-BOTTOM: black 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: lightyellow
}
#dhtmlpointer {
Z-INDEX: 101;
LEFT: -300px;
VISIBILITY: hidden;
POSITION: absolute
}
</STYLE>
<!-- onmouseout=hideddrivetip() : duy tri thong bao theo chuot -->
<a class=orange onmouseover="ddrivetip('<strong><center><img src=http://tusachphathoc.org/gallery/images/hinh-cac-duc-phat/hinh-phat-di-lac/botatdilac001.jpg border=0 width=200><br><font color=blue>Trịnh Thế Thạo <br>Bóc tách code năm 2008</font><br>trinhthaovn@Gmail',200)" href ="http://tusachphathoc.org/gallery/images/hinh-cac-duc-phat/hinh-phat-di-lac/botatdilac001.jpg" target="_self">
<b>
<span style="text-decoration: none">Sieu Lien ket...</b></span></a> <br>

<br><br><br><br>
<A class=orange onmouseout=hideddrivetip() onmouseover="ddrivetip('<strong><li>Chu den:<font color=red> chu mau do</font><li><font color=blue>Chu mau xanh duong </font><li><font color=#008000>Chu xanh la cay</font><li><font color=#1078F7>Chu xanh nhat khoi</font>',200)" href="C:\WINDOWS\Help\Tours\htmlTour" target="_self">
<img src="http://tusachphathoc.org/gallery/images/hinh-cac-duc-phat/hinh-phat-di-lac/botatdilac001.jpg" width="100" height="100" border="0">
</a>
</body>
</html>
<SCRIPT type=text/javascript>
var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip
var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
document.write('<div id="dhtmltooltip">') // (Neu them </div> se co hinh khi chuot cham slk) write out tooltip DIV
document.write('<img id="dhtmlpointer">') //write out pointer image
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20
var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY
var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</SCRIPT>