Tencent Weibo アプリの JS シミュレートされた紙引き裂き効果の例 code_javascript スキル

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Tencent Weibo アプリの紙を破るエフェクト</title> <style type="text/css"> body{margin:0;padding:0;font-size:14px;line-height:22px;} .content,content_mack{width:300px;height:400px;overflow:hidden;font-size:12px;line-height:20px;background:#f2eee3;cursor:pointer;} .content_mack{position:absolute;top:0px;left:0;} .mack{position:absolute;width:300px;height:50px;overflow:hidden;top:0px;left:0px;background:#fff;} .bg_sizhi{position:absolute;width:300px;height:50px;overflow:hidden;background:url('http://files.jb51.net/file_images/article/201305/2013521101603617.gif');top:0px;left:0;line-height:50px;text-align:center;} </style> <div style="width:300px;height:400px;overflow:hidden;position: relative;float:left;"> <div class="content" id="content"> <div class="content">04-262.59MCerberus FTP サーバー中国語バージョン 2.48FTP ソフトウェア 04-253.55MWeb ページ メーカー簡易 Web ページ制作 v3.1 Web ページ制作 04-25990Kリモート デスクトップスパイ サーバー監視、リモート コントロール v5.2 サーバー ソフトウェア 04-252.20Kx3389 リモートポート変更 Server 1.0 サーバー ソフトウェア 04-25210K リモート デスクトップ 3389 バッチ ログイン ソフトウェア 3.0 リモート コントロール 04-25789KTable2CSS テーブル レイアウトを Div CSS 3.0 に! 04-2314.1Mjre1.6 ダウンロード | jre 1.6 JAVA 仮想マシン環境パッケージのプログラミングと開発 04-2393.9KVC 正規表現テスターのプログラミングと開発 04-2331.6K 右クリックの制限を解除し、Web ページのコピーを禁止する小型ソフトウェア Web マスター ツール231.49MDiagram デザイナー ベクトル エディター。 </div> <div class="bg_sizhi" id="bg_sizhi">Tencent Weibo アプリの JS シミュレートされた紙引き裂き効果</div> <div class="mack" id="mack"> <div class="content content_mack" id="content_mack">05-0114.3KC# IP アドレス自動変更 ネットワーク関連 05-0117.0KC# ネットワーク送受信統計プログラム ネットワーク関連 05-0115.8K LAN IP スキャナー C# ソースコード ネットワーク関連 05-01411K jQuery Web ページのスライド前をスムーズに回転コード以降 フォーカス スライド 05-01300KVB RichTextBox コントロールの使用ガイド pdfVB チュートリアル 05-01925KVB 関数クイック リファレンス マニュアル pdfVB チュートリアル 05-01509KHTML5 および CSS 包括的なアニメーション効果フォーカス マップ特殊効果フォーカス スライド 05-014.49K jquery マルチレベル拡張ドロップダウン類似ツリーメニューへ メニュー メニュー ナビゲーション 05-0136.0K Flash の背景を模倣し、左右にスライドするカラフルな Web ページのメニュー ナビゲーション 04-3016.9M Java サンプル開発ブック CD ソース コードブック ソース コード 04-30916K Android および Js インタラクティブ ソース コード サンプル Android のスライディング メニューの作成 RenRenSlidingLayout コード Android ソース コード 04-30644KFlat UI HTML ユーザー インターフェイス共通コード パッケージ Ajax/JavaScript04-3053.3KJavaScript 模倣百度百科事典のエントリ統計アニメーション効果 Ajax/JavaScript04-30267KjQuery の外側から内側への縮小効果の例 jQuery04-306.41KDelphi モード属性使用例 コントロールコンポーネント 04-306.03KStartPosプロパティ - Delphiの使用法 その他のカテゴリ 04-306.47KNotifyValueプロパティの使用例 Delphiのソースコード その他のカテゴリ 04-30</div> </div> </div> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]<script> function $(id){/* 获取id */ return typeof id === "string" ? document.getElementById(id) : id; } function getStyle(obj, attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; } function startMove(obj, json, fnEnd){ if(obj.timer){ clearInterval(obj.timer); } obj.timer=setInterval(function (){ doMove(obj, json, fnEnd); }, 10); var oDate=new Date(); if(oDate.getTime()-obj.lastMove>30){ doMove(obj, json, fnEnd); } } function doMove(obj, json, fnEnd){ var iCur=0; var attr=''; var bStop=true;//假设运动已经该停止了 for(attr in json){ iCur = attr=='opacity'?parseInt(100*parseFloat(getStyle(obj, 'opacity'))):parseInt(getStyle(obj, attr)); if(isNaN(iCur)){ iCur=0; } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(parseInt(json[attr])!=iCur){ bStop=false; } if(attr=='opacity'){ obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")"; obj.style.opacity=(iCur+iSpeed)/100; } else{ obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop){ clearInterval(obj.timer); obj.timer=null; if(fnEnd){ fnEnd(); } } obj.lastMove=(new Date()).getTime(); } var flag = 0; $('content').onclick = function(ev){ var oEvent=ev||event; if(!flag){ var Y = oEvent.clientY-25; Y = Y<0?0:Y; Y = Y>350?350:Y; $('bg_sizhi').style.top = $('mack').style.top = Y+'px'; $('content_mack').style.top = -Y+'px'; startMove($('mack'),{'left':-300}); flag = 1; }else{ startMove($('mack'),{'left':0}); flag = 0; } } </script>