ホームページ > ウェブフロントエンド > jsチュートリアル > Tencent Weibo アプリの JS シミュレートされた紙引き裂き効果の例 code_javascript スキル

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

WBOY
リリース: 2016-05-16 17:33:38
オリジナル
1077 人が閲覧しました

[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>
関連ラベル:
app
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート