jsホームページの効果-3

4276 ワード

js特殊効果-Day 3
一、client家族
1.1 clientWidthとclient Height

ページの可視領域の幅:Dcument.body.client Width;

ページの可視エリアが高いです.document.body.clientHeight;

1.2 clientLeftとclientTop

clientLeft、clientTop

は、要素の枠のborder Widthを返します.

枠が指定されていない場合、または変更要素が位置決めされていない場合、その値は0

です.
1.3 offset、clientとscrollの違い分析

leftとtop分析:

clientLeft:左枠の幅;clientTop:上枠の幅

offset Left:現在の要素距離は親の箱の左側の距離があります.offset Top:現在の要素距離は、親の箱の上にある距離

です.

scrollLeft:左にスクロールする長さ;scrollTop:上のスクロールの長さ.

widthとheight分析

clientWidth/Height:コンテンツ+内縁距離

offset Width/Height:コンテンツ+内縁距離+外枠

scrollwidth/Height:スクロール内容の幅と高さ

二、画面の可視領域を取得する

ie 9およびそれ以上のバージョン、最新のブラウザ

window.innerWidth, window.innerHeight

標準モードブラウザ

document.documentElement.clientWidth, document.documentElement.clientHeight

怪異モード

document.body.clientWidth, document.body.clientHeight

一般的な書き方

function client() {    
       if(window.innerWidth){ // ie9         
           return{           
               width: window.innerWidth,
               height:  window.innerHeight  
           }    
       }else if(document.compatMode != 'CSS1Compat'){  //       
           return{           
               width: document.body.clientWidth,            
               height: document.body.clientHeight       
           }    
       }  
       //       
       return{      
             width: document.documentElement.clientWidth,        
             height: document.documentElement.clientHeight   
       }
}

三、よく使う窓口事件-onresize

ウィンドウまたはフレームのサイズが変更されると呼び出します.

オンスリゼは、一般的に適応ページレイアウトなどの多画面適応シーンに使用される.

アプリケーション:画面の幅>=960の時、ページの背景色は赤色です.画面の幅>=640の時、ページの背景色は青です.画面の幅<640の場合、ページの背景色は緑色ですか?

追加:スクリーンの解像度を取得する:window.screen.width window.screen.height

四、JSの事件伝達メカニズム
4.1発泡メカニズム

気泡は水底から上昇し、深いものから浅いものまで上に上がる.上昇する過程で,気泡は異なる深さ層の水を通過する.それに対して、この気泡は私達のところのイベントに相当します.水は私達のdomツリー全体に相当します.事件はdomツリーの下の層から、domのルートノードに伝達されるまで、上の層に伝達される.

IE 6.0:

div->body->>document

他のブラウザ:

div->body->>document->window

注意:すべての事件が泡を立てることができるのではありませんて、以下の事件は泡を立てません:blur、focus、ロード、unload

4.2発泡防止の方法

標準ブラウザとieブラウザ

w 3 c:event.stopPropagation()プロモーション伝達

IE:event.ccell Bbble=true bubble発泡キャンセル

準拠の書き方

if(event && event.stopPropagation){ // w3c      
    event.stopPropagation();
}else{ // IE   IE 678    
    event.cancelBubble = true;
}

最新の結論:
新版のGoogle、火狐、ieの高バージョンもcancel Bbbleをサポートしています.今は新版のブラウザには互換性がありません.
4.3現在の操作対象を取得する

開発において、イベントを実行する時、このイベントをトリガする対象は誰かを知る必要がありますか?では、どうやって取得しますか?

火狐、Google event.target

e 678 event.srcerement

は一般的にこのオブジェクトのIDを取得するものです.互換性のある書き方は以下の通りです.

   var targetId = event.target ? event.target.id : event.srcElement.id;

4.4ユーザが選択した内容を取得する

標準ブラウザ

window.get Select()

ieは、選択された文字

を取得する.

document.selection.reat Range().text;

互換性の書き方

var selectedText;
if(window.getSelection){ //                 
   selectedText = window.getSelection().toString();
}else{ // IE      
   selectedText = document.selection.createRange().text;
}

ミニブログ

http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + shareText + '&url=https://github.com/xuanzhihua'

五、総合アニメーション機能パッケージ

は開発の過程で、多くのアニメーションに接触します.例えば、フレームアニメーション、コアアニメーション、回転アニメーションなど、複雑なアニメーションは簡単なアニメーションパッケージで作られています.

均等速アニメーション関数パッケージ:

//       
function animate(obj, target, speed) {
    // 1.         
    clearInterval(obj.timer);    
    // 2.         
    var dir = target > obj.offsetLeft ? speed : -speed;    
    obj.timer  = setInterval(function () {
        obj.style.left = obj.offsetLeft + dir + 'px';
        // 2.1       --> offsetLeft ==    
        if (Math.abs(target - obj.offsetLeft) <= speed) {
            clearInterval(obj.timer);
            //       
            obj.style.left = target + 'px';
        }    
     }, 10)；
}

旭改のページコード