Thứ Hai, 20 tháng 10, 2014

[js] Quảng cáo trượt 2 bên


 Quảng cáo trượt 2 bên
[js] Quảng cáo trượt 2 bên có rất nhiều kiểu viết. Code tôi giới thiệu ở đây, là đoạn javascript thuần, viết gọn, dễ chỉnh ổn nhất. Tùy bạn trình bày như đoạn 1 hoặc đoạn 2 đều như nhau:
  <style>
  #divAdRight,#divAdLeft {DISPLAY: none; POSITION: absolute; TOP: 0px;}
    #divAdRight img,#divAdLeft img{width:100px;}
  </style>
<div id="divAdRight">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<div id="divAdLeft">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<script>
    function FloatTopDiv() {
        startLX = ((document.body.clientWidth - MainContentW) / 2) - LeftBannerW - LeftAdjust, startLY = TopAdjust + 80;
        startRX = ((document.body.clientWidth - MainContentW) / 2) + MainContentW + RightAdjust, startRY = TopAdjust + 80;
        var d = document;
        function ml(id) {
            var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            el.sP = function(x, y) {
                this.style.left = x + 'px';
                this.style.top = y + 'px';
            };
            el.x = startRX;
            el.y = startRY;
            return el;
        }
        function m2(id) {
            var e2 = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            e2.sP = function(x, y) {
                this.style.left = x + 'px';
                this.style.top = y + 'px';
            };
            e2.x = startLX;
            e2.y = startLY;
            return e2;
        }
        window.stayTopLeft = function() {
            if (document.documentElement && document.documentElement.scrollTop)
                var pY = document.documentElement.scrollTop;
            else if (document.body)
                var pY = document.body.scrollTop;
            if (document.body.scrollTop > 30) {
                startLY = 3;
                startRY = 3;
            }
            else {
                startLY = TopAdjust;
                startRY = TopAdjust;
            };
            ftlObj.y += (pY + startRY - ftlObj.y) / 16;
            ftlObj.sP(ftlObj.x, ftlObj.y);
            ftlObj2.y += (pY + startLY - ftlObj2.y) / 16;
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);
            setTimeout("stayTopLeft()", 1);
        }
        ftlObj = ml("divAdRight");
        //stayTopLeft();
        ftlObj2 = m2("divAdLeft");
        stayTopLeft();
    }
    function ShowAdDiv() {
        var objAdDivRight = document.getElementById("divAdRight");
        var objAdDivLeft = document.getElementById("divAdLeft");
        if (document.body.clientWidth < 1000) {
            objAdDivRight.style.display = "none";
            objAdDivLeft.style.display = "none";
        }
        else {
            objAdDivRight.style.display = "block";
            objAdDivLeft.style.display = "block";
            FloatTopDiv();
        }
    }
</script>
<script>
    MainContentW = 1000;
    LeftBannerW = 125;
    RightBannerW = 125;
    LeftAdjust = 5;
    RightAdjust = 5;
    TopAdjust = 10;
    ShowAdDiv();
    window.onresize = ShowAdDiv;
</script>

Hoặc
  <style>
  #divAdRight,#divAdLeft {DISPLAY: none; POSITION: absolute; TOP: 0px;}
    #divAdRight img,#divAdLeft img{width:100px;}
  </style>
<div id="divAdRight">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<div id="divAdLeft">
    <a href="#">
        <img src="***.png"/>
    </a>
</div>
<script src="//bendoi.googlecode.com/svn/trunk/js2/ads-truot-2ben.js"> </script>
<script>
    MainContentW = 1000;
    LeftBannerW = 125;
    RightBannerW = 125;
    LeftAdjust = 5;
    RightAdjust = 5;
    TopAdjust = 10;
    ShowAdDiv();
    window.onresize = ShowAdDiv;
</script>

Nếu website bạn đang có JS framework thì tốt nhất kiếm cái plugin cho tiện ích đó thay vì dùng dài dòng thế này.
aaa
2-party advertising slide,Quảng cáo trượt 2 bên
Thứ Bảy, 6 tháng 9, 2014

Đừng lạm dụng jquery hoặc JavaScript Frameworks quá mức


Đừng lạm dụng jquery quá mức
Hôm nay tôi viết bài này vì gàn đây tôi bắt gặp khá nhiều bạn hỏi hiệu ứng nọ kia bằng jquery. Tôi không có ý nói và cũng không thể nói việc đi từ A đến B phải đi bằng con đường này mà không phải là con đường kia. Và việc dùng thế nào là quyền của người dùng, miễn sao họ tới dích là được. Thậm trí tôi còn ủng hộ xu hướng "đa đảng" vì có như thế mới có sự phát triển nếu không html, css hay jq sẽ độc tôn và dừng một chỗ.
Qua nhiều câu hỏi và các demo dường như nhiều bạn đang lạm dụng jquery nhiều hơn là tham khảo tìm tòi học hỏi. Vì có nhiều hiệu ứng khá đơn giản mà vẫn dùng jquery, có vẻ một số chưa học html css một cách nghiêm túc nhất, thực tế thì cho dù bạn có đến lớp gặp thầy dạy html css thì cũng không ai dạy bạn hết món. Chỉ có tự học trên w3c lần lượt từ đầu và tham khảo các ví dụ ở mấy trang nước ngoài mới vỡ ra nhiều điều.
Thực tế html css ngày nay có thể làm được nhiều việc hơn mọi ngưởi tưởng, các hiệu ứng chuyển động, xử lý thời gian, thuộc tính sự kiện, thậm trí đến cả tính toán mà không cần đụng đến dòng <script> nào
Vậy nên ngoại trừ học hỏi tìm hiểu những thứ lặt vặt trong jquery để góp vốn xây dựng những tiện ích lớn hơn thì những gì html css không thể làm được thì mới phải cầu đến jquery hoặc loại JavaScript Frameworks khác. Mặt khác khi tham khảo các ứng dụng lạ lạ của nước ngoài đôi khi họ cũng tính toán tìm một loại Framework Javascript thích hợp nhất chứ không nhất thiết phải Jquery như thói quen số đông Việt Nam.
Một điểm yếu của html css là sự lỗi thời của một số trình duyệt bảo thủ như IE vì nó là "doanh nghiệp nhà nước". Có nhiều cái không có tác dụng.
Nhưng ưu điểm lớn nhất là nhẹ, ngắn, chạy nhanh hơn.
Còn nhược điểm của jquery là dài dòng, chậm. Nếu áp dụng không đúng chỗ thì nó giống như cảnh bạn dùng ô tô để chở 1 cái bánh mì nhỏ thay vì đi bộ hoặc xe đạp sẽ tiện hơn.

thaotrinh
jquery là gì, lạm dụng jquery, tận dụng html css, lợi thế của html, JavaScript Frameworks css
Thứ Năm, 17 tháng 7, 2014

Js - Đo kích thước màn hình để tự động chuyển trang bằng javascript



Có nhiều cách khác nhau để website tự động chuyển trang
Ở đây tôi giới thiệu một mẹo nhỏ dùng javascript đo kích thước màn hình thiết bị, tùy kích thước màn hình thì nó sẽ tự động chuyển trang. Hiện tượng này tương tự như khi truy cập dantri.vn trên di động.
<script type="text/javascript">
//<![CDATA[
document.write("<p>Kích thước màn hình của máy bạn là: " + screen.width + " x " + screen.height + "</p>");
if(screen.width>=100)
    {self.location = "http://m.bendoi.vn";}
//]]>
</script>
thaotrinh
javascript đo kích thước màn hình, javascript measurement sizes of the screen
Thứ Hai, 10 tháng 2, 2014

[js] Tự động thay thế chuỗi ký tự trong bài viết


Tự động thay thế chuỗi ký tự trong bài viết
Đây là code bằng js đơn giản, dùng js tìm kiếm những thừ khóa được liệt kê, những từ khóa này sẽ bị thay thế bằng những chuỗi ký tự tùy ý. Chúng ta ứng dụng nó vào việc như: Tự động chèn link vào từ khóa, tự động tạo định dạng cho từ khóa, hoặc tạo hiệu ứng khi di chuột vào từ khóa sẽ xuất hiện box quảng cáo.

 <script type='text/javascript'>
window.onload=function replaceText()
{
if(!document.getElementById){return;}
bodyText = document.getElementById("bodytext");
theText = bodyText.innerHTML;
theText = theText.replace(/bd/gi, "<a href=\'http://bendoi.vn\' target=\'_blank\'/>bên đời</a> ");
theText = theText.replace(/facebook/gi, "<b>facebook</b> ");
theText = theText.replace(/fb/gi, "<a href=\'https://www.facebook.com/groups/bendoibendoi/\' target=\'_blank\'>bendoibendoi</a>");
bodyText.innerHTML = theText;
}
replaceText();
</script>
<div id="bodytext">
bd có trang facebook là fb
</div>


kết quả:
bên đời có trang facebook là bendoibendoi
Thao Trịnh
Chủ Nhật, 14 tháng 7, 2013

jquery- Tự động cố định đối tượng tại trung tâm màn hình


 Đây là code có sử dụng jquery có tác dụng căn một đối tượng ra giữa màn hình với bất kỳ màn hình nào, nó không phụ thuộc vào độ rộng dài của trang web mà phụ thuộc vào cỡ màn hình để lựa chọn vị trí giữa.
<script src="http://code.jquery.com/jquery-1.7.1.js"  type='text/javascript'></script>
<script type='text/javascript'>function resizePopup() {$("#popuplayer1").css({height:$(window).height(),width:$(window).width() });}$(function() { resizePopup(); });$(window).resize(function() { resizePopup(); }); </script>
 <style>
#popuplayer0{position: fixed;left:0px;top:0px;}
#popuplayer1 {display: table-cell;vertical-align: middle;text-align:center;background:#ccc;opacity:0.8;}
#popupcontent {width:255px;padding: 10px;display:inline-block;box-shadow: 0px 0px 50px 5px;background:#A6CDA4;}
</style>
<div id='popuplayer0'>
<div id='popuplayer1'>
<div id='popupcontent'>
Nội dung HTML <br/> <b>blog.bendoi.vn</b>
</div>
</div>
 </div>

sưu tầm có sửa chữa và chắp vá code
http://web.bendoi.vn/2013/07/jquery-tu-dong-co-dinh-doi-tuong-tai-trung-tam.html
Thứ Tư, 5 tháng 6, 2013

JS - Đếm ký tự trong textBox


 Demo 1:
<style>
textarea.in{width:100%;height:500px;}
input.out{width:auto;border:0;}
</style>
<script>
  function dem()
  {
    str= fdem.text.value;
    fdem.kq.value=str.length;
  }
</script>
<form name='fdem' method='post' action='#'>
  <textarea name='text' onkeyup='dem()' onclick='this.select()' class='in'></textarea>
  <input name ='kq' class='out' />
</form>


TTTj - bendoi.vn
Thứ Tư, 15 tháng 5, 2013

javascript- lật ảnh như lật trang sách

Code lật ảnh như lật trang sách

<SCRIPT type=text/javascript>
var Book_Image_Width=200; // kich thuoc anh tuong duong voi 1 trang sach cua 1 quyen sach
var Book_Image_Height=200;// xem kich thuoc anh truoc roi moi dien thong so
var Book_Border=false;
var Book_Border_Color="#111";
var Book_Speed=15;
var Book_NextPage_Delay=1500;
var Book_Vertical_Turn=0;
Book_Image_Sources=new Array(
"https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/392340_572346372785625_1057918685_n.jpg","#",
"https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/380799_572332229453706_195755014_n.jpg","#",
"https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/969472_572332416120354_875840481_n.jpg","#",
"https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-snc6/183106_572332502787012_2133974666_n.jpg","#"
);
/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);
function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI); B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI); B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages()}}
function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px"; B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}
function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}
function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}
function B_Rstrt(){B_Stppd=false}
</SCRIPT>
   
<style>
  #Book{width:400px;height:200px;position:relative; margin:auto;}
  </style>
 <DIV id="Book">  <script>    ImageBook(); </script> </DIV>

javascript- hiển thị các ảnh khi mouse đi qua các link


Đoạn code js hiển thị nội dung khi mouse chạm tới các <a>.
Ngày nay khi css đã khá hoàn thiện thì hiệu ứng tương tự như thế này được giải quyết bằng css cho kết quả tốt hơn.
Tuy nhiên ngày trước thì js là cứu cánh cho rất nhiều hiệu ứng.

<SCRIPT language=javascript>
  var defaultImg = "http://png-4.findicons.com/files/icons/694/longhorn_r2/228/printers_and_faxes.png";
  function nameHover(o,img){
  o.className = 'comingwed_name_on';
  document.getElementById("comingWedThumb").src=img;
  }
  function nameOut(o){
  o.className = 'comingwed_name';
  document.getElementById("comingWedThumb").src=defaultImg;
  }
</SCRIPT>
<div id="demo-menu">
  <DIV class=comingwed_name onmouseout=nameOut(this) onmouseover="nameHover(this,'http://png-4.findicons.com/files/icons/51/capital_suite/128/img.png')">    <A title="" href="" target=_blank> - menu 1 - </A></DIV>
  <DIV class=comingwed_name onmouseout=nameOut(this) onmouseover="nameHover(this,'http://png-4.findicons.com/files/icons/67/ethereal_2/128/img.png')">    <A title="" href="" target=_blank> - menu 2 - </A></DIV>
  <DIV class=comingwed_name onmouseout=nameOut(this) onmouseover="nameHover(this,'http://png-2.findicons.com/files/icons/66/ethereal/128/img.png')">    <A title="" href="" target=_blank> - menu 3 - </A></DIV>
  <DIV class=comingwed_name onmouseout=nameOut(this) onmouseover="nameHover(this,'http://png-3.findicons.com/files/icons/1657/lha_objects/128/filetype_img.png')">    <A title="" href="" target=_blank> - menu 4 - </A></DIV>
</div>
<div id="demo-show">  <IMG id=comingWedThumb src="http://png-2.findicons.com/files/icons/39/aqcua/128/img.png"/></div>
<style>
  #demo-menu  {float: left;border:1px solid #999; width:200px; height:200px;}
  #demo-show  {float: left;border:1px solid #999; width:200px; height:200px;}
</style>


js- đôi mắt nhìn theo mouse

Code Sưu tầm *.js từ 20h21 ngày 13/02/2004 :
<script language='javascript'>
var jseyesimg="http://i.imgur.com/nUF1RRg.gif";
var jseyeimg="http://i.imgur.com/W4ve9uC.gif";
var jseyeslink="#";
var jseyeso=null, jseye1=null, jseye2=null;
var browserversion=0.0;
var browsertype=0; // 0: unknown; 1:MSIE; 2:NN
function browserdetect() {
  var agt= navigator.userAgent.toLowerCase();
  var appVer= navigator.appVersion.toLowerCase();
  browserversion= parseFloat(appVer);
  var iePos= appVer.indexOf('msie');
  if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
  var nav6Pos = agt.indexOf('netscape6');
  if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
  browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
  return(browsertype>0);
}
browserdetect();
function jseyesobj(id) {
  var i, x;
  x= document[id];
  if (!x && document.all) x= document.all[id];
  for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
  if (!x && document.getElementById) x= document.getElementById(id);
  return(x);
}
function jseyesmove(x, y) {
  var ex, ey, dx, dy;
  if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
    ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
    dx=x-ex; dy=y-ey;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye1.style.left= r*dx+36.5; jseye1.style.top= r*dy+44;
    ex+=56; dx-=56;
    r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
    jseye2.style.left= r*dx+92.5; jseye2.style.top= r*dy+44;
  }
}
function jseyes() {
  var img;
  var x, y, a=false;
  if (arguments.length==2) {
    x= arguments[0];
    y= arguments[1];
    a= true;
  }
  if (browsertype>0 && browserversion>=5) {
    img= "<div id='jseyeslayer' style='position:"+
           (a ? "absolute; left:"+x+"; top:"+y : "relative")+
      "; z-index:5; width:150; height:150 overflow:hidden;margin:auto'>"+
    "<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+
      "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
    "</div>"+
    "<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+
      "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
    "</div>"+
    "<img src='"+jseyesimg+"' width=150 height=150 onClick=\"location.href='"+jseyeslink+"'\">"+
"</div>";
    document.write(img);
    jseyeso=jseyesobj('jseyeslayer');
    jseye1=jseyesobj('jseye1');
    jseye2=jseyesobj('jseye2');
    switch (browsertype) {
      case 1:
        document.onmousemove=jseyesmousemoveIE;
break;
      case 2:
        document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=jseyesmousemoveNS;
break;
    }
  }
}
function jseyesmousemoveNS(e) {
  jseyesmove(e.pageX, e.pageY);
  //return(false);
}
function jseyesmousemoveIE() {
  jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);
  //return(false);
}
</script>
<script>
    jseyes();
</script>

  Hoặc viết:

<script src="eyes.js"></script>
<script>
    jseyes();
</script>

Hoặc  viết
<body onload="jseyes()">
<script src="eyes.js"></script>

  Trong đó file eyes.js có nội dung:
var jseyesimg="anh-khuon-mat.gif";
var jseyeimg="anh-doi-mat.gif";
var jseyeslink="#"; // đây là link liên kết khi click vào khuôn mặt
var jseyeso=null, jseye1=null, jseye2=null;
var browserversion=0.0;
var browsertype=0; // 0: unknown; 1:MSIE; 2:NN
function browserdetect() {
var agt= navigator.userAgent.toLowerCase();
var appVer= navigator.appVersion.toLowerCase();
browserversion= parseFloat(appVer);
var iePos= appVer.indexOf('msie');
if (iePos!=-1) browserversion= parseFloat(appVer.substring(iePos+5, appVer.indexOf(';',iePos)));
var nav6Pos = agt.indexOf('netscape6');
if (nav6Pos!=-1) browserversion= parseFloat(agt.substring(nav6Pos+10))
browsertype= (iePos!=-1) ? 1 : (agt.indexOf('mozilla')!=-1) ? 2 : 0;
return(browsertype>0);
}
browserdetect();
function jseyesobj(id) {
var i, x;
x= document[id];
if (!x && document.all) x= document.all[id];
for (i=0; !x && i<document.forms.length; i++) x= document.forms[i][id];
if (!x && document.getElementById) x= document.getElementById(id);
return(x);
}
function jseyesmove(x, y) {
var ex, ey, dx, dy;
if (jseyeso && jseye1 && jseye2 && jseyeso.style) {
ex=jseyeso.offsetLeft+46; ey=jseyeso.offsetTop+58;
dx=x-ex; dy=y-ey;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye1.style.left= r*dx+36.5; jseye1.style.top= r*dy+44;
ex+=56; dx-=56;
r=(dx*dx/49+dy*dy/289<1) ? 1 : Math.sqrt(49*289/(dx*dx*289+dy*dy*49));
jseye2.style.left= r*dx+92.5; jseye2.style.top= r*dy+44;
}
}
function jseyes() {
var img;
var x, y, a=false;
if (arguments.length==2) {
x= arguments[0];
y= arguments[1];
a= true;
}
// đây là đoạn css điều chỉnh kích thước ảnh nếu bạn thay ảnh khác với ảnh ví dụ
if (browsertype>0 && browserversion>=5) {
img= "<div id='jseyeslayer' style='position:"+
  (a ? "absolute; left:"+x+"; top:"+y : "relative")+
  "; z-index:5; width:150; height:150 overflow:hidden'>"+
"<div id='jseye1' style='position:absolute; left:36; top:44; z-index:6; width:21; height:29'>"+
  "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
"</div>"+
"<div id='jseye2' style='position:absolute; left:92; top:44; z-index:6; width:21; height:29'>"+
  "<img src='"+jseyeimg+"' width=21 height=29 onClick=\"location.href='"+jseyeslink+"'\">"+
"</div>"+
"<img src='"+jseyesimg+"' width=150 height=150 onClick=\"location.href='"+jseyeslink+"'\">"+
 "</div>";
document.write(img);
jseyeso=jseyesobj('jseyeslayer');
jseye1=jseyesobj('jseye1');
jseye2=jseyesobj('jseye2');
switch (browsertype) {
  case 1:
document.onmousemove=jseyesmousemoveIE;
break;
  case 2:
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=jseyesmousemoveNS;
break;
}
}
}
function jseyesmousemoveNS(e) {
jseyesmove(e.pageX, e.pageY);
//return(false);
}
function jseyesmousemoveIE() {
jseyesmove(event.clientX+document.body.scrollLeft, event.clientY+document.body.scrollTop);
//return(false);
}


 Sưu tầm *.js từ 20h21 ngày 13/02/2004
Thứ Hai, 13 tháng 5, 2013

Chuyển ảnh tự động có link

Hiệu ứng Trình diễn hình ảnh (Image slideshow) siêu liên kết của bạn, ngoại trừ trong IE5.5

<script language="JavaScript1.1">
<!--
//Visit http://www.dynamicdrive.com for this script
chỉ định khoảng cách giữa các slide (trong mili giây)
var slidespeed=3000
//specify images
var slideimages=new Array("/image1.png","image2.png","image3.png")
//specify corresponding links
var slidelinks=new Array("http://....com","http://....com","http://....com")
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
window.location=slidelinks[whichlink]
}
//-->
</script>
<a href="javascript:gotoshow()"><img src="photo1.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></a>
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>


Thanks: dynamicdrive.com!

Xoay và hiển thị luân phiên các ảnh

Tình cờ thấy hiệu ứng trên một trang hay hay sau đó mình đã viewcode để sưu tầm từ 2007.
Có vẽ như ngày này code này đã "lạc hậu" vì có cách viết khá đơn giản hơn và giửi quyết bằng css là đủ
<script type="text/javascript">
var chieu_ngang=200;
var chieu_doc=100;
var vien_ngoai=true;
var mau_vien="#cc00FF";
var toc_do=6;
var gk_dieu_khien=true;
var so_mat_phang=2;
hinh_anh=new Array(
"C:/WINDOWS/system32/oobe/images/newmark8.jpg","http://bendoi.vn",
"C:/WINDOWS/system32/oobe/images/monitor2.gif","",
"C:/WINDOWS/system32/oobe/images/oemcoa.jpg","",
"C:/WINDOWS/system32/oobe/images/wpakey.jpg","",
"C:/WINDOWS/system32/oobe/images/magnify.gif",""
);
hell=new Array(so_mat_phang/2+1);
cat=new Array(so_mat_phang/2);
gk=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4,0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var gkOf=so_mat_phang==4?0:so_mat_phang==6?2:so_mat_phang==8?5:9;
img_array=new Array(hinh_anh.length);
var goc=gk_dieu_khien?Math.PI/(so_mat_phang/2):0,gks=so_mat_phang,ngang_max,tong_so,dung=false,i,bu_trai,nua=so_mat_phang/2;
function chay_vong(){
if(document.getElementById){
for(i=0;i<hinh_anh.length;i+=2){
img_array[i]=new Image();img_array[i].src=hinh_anh[i]}
ngang_max=chieu_ngang/Math.sin(Math.PI/so_mat_phang)+nua+1;
Car_Div=document.getElementById("chay_vong");
for(i=0;i<nua;i++){
hell[i]=document.createElement("img");Car_Div.appendChild(hell[i]); hell[i].style.position="absolute";
hell[i].style.top=0+"px";
hell[i].style.height=chieu_doc+"px";
if(vien_ngoai){
hell[i].style.borderStyle="solid";
hell[i].style.borderWidth=1+"px";
hell[i].style.borderColor=mau_vien}
hell[i].src=hinh_anh[2*i];
hell[i].lnk=hinh_anh[2*i+1];
hell[i].onclick=duong_dan;
hell[i].onmouseover=dung_hinh;
hell[i].onmouseout=chay_lai}
nhung_hinh_anh()}}
function nhung_hinh_anh(){
if(!dung){
tong_so=0;
for(i=0;i<nua;i++){
cat[i]=Math.round(Math.cos(Math.abs(gk[gkOf+i]+goc))*chieu_ngang);
tong_so+=cat[i]}
bu_trai=(ngang_max-tong_so)/2;
for(i=0;i<nua;i++){
hell[i].style.left=bu_trai+"px";
hell[i].style.width=cat[i]+"px";
bu_trai+=cat[i]}
goc+=toc_do/720*Math.PI*(gk_dieu_khien?-1:1);
if((gk_dieu_khien&&goc<=0)||(!gk_dieu_khien&&goc>=Math.PI/nua)){
if(gks==hinh_anh.length)gks=0;
if(gk_dieu_khien){
hell[nua]=hell[0];
for(i=0;i<nua;i++)hell[i]=hell[i+1];
hell[nua-1].src=hinh_anh[gks];
hell[nua-1].lnk=hinh_anh[gks+1]}
else{for(i=nua;i>0;i--)hell[i]=hell[i-1];
hell[0]=hell[nua];
hell[0].src=hinh_anh[gks];
hell[0].lnk=hinh_anh[gks+1]}
goc=gk_dieu_khien?Math.PI/nua:0;gks+=2}}
setTimeout("nhung_hinh_anh()",50)}
function duong_dan(){if(this.lnk)window.location.href=this.lnk}
function dung_hinh(){this.style.cursor=this.lnk?"pointer":"default";dung=true;}
function chay_lai(){dung=false}
</script>
<body onload="chay_vong()">
<div id="chay_vong" style="position:relative"></div>
Thứ Năm, 9 tháng 5, 2013

Nút chuyển lên đầu trang web trượt đẹp


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

Disable mouse right



<SCRIPT language=javascript>
<!--
document.onselectstart=new Function('return false');
function ds(e){return false;}
function ra(){return true;}
document.onmousedown=ds; /* mouse right*/
document.onclick=ra; /* mouse left*/
document.oncontextmenu = function (){ return false};
-->
</SCRIPT>
Còn nhiều kiểu viết khác tuy nhiên cách này ngắn gọn và hoạt động trên nhiều trình duyệt hiện tại.

Bạn nên biết nguyên lý rằng: Nội dung hiện lên màn hình người xem thì có nghĩa là dữ liệu đã về máy của họ, họ có thể sao chép những gì họ nhìn thấy nếu muốn. Nếu bạn chuyển Text thành ảnh thì người ta cũng chụp ảnh màn hình rồi dùng phần mềm Free tách chữ khỏi ảnh. Bạn cho người ta xem video nhưng không cho down quá lắm thì họ cũng dùng phần mềm Free quay phim lại màn hình là xong. Bạn dùng javascript chặn chuột phải thì khóa javascript trên trình duyệt thì bạn cũng hết cách.
Tóm lại đoạn javascript chỉ làm "dân ngồi máy lạnh" ngại copy chứ không thể ngăn mọi người copy.

Link bằng form SELECT kết hợp javaScript


<script language="javascript" type="text/javascript">
<!--
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value, target="_top");
}
}
//-->
</script>
<form>
<select name="menu" onchange="jump(this.form)">
<option value="http://...">...</option>
<optgroup label="Nhóm 1">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
<optgroup label="Nhóm 2">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
<optgroup label="Nhóm 3">
<option value="http://...">...</option>
<option value="http://...">...</option>
<option value="http://...">...</option>
</optgroup>
</select>
</form>

Nếu không phải bất cứ link nào cũng target="_blank" thì bạn thay bằng đoạn javacript để đáp ứng 1 số link cá biệt:
<script language="javascript" type="text/javascript">
<!--
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
if (form.menu.options[myindex].value == "http://web.bendoi.vn/2013/01/tong-hop-css.html")
{window.open(form.menu.options[myindex].value, target="_top");}
else
{
window.open(form.menu.options[myindex].value, target="_blank");
}
}
}
//-->
</script>

Demo:

Thaotrinh!