上にスクロールする画像とswitching_jqueryを実装するjqueryコードの短い文-jsチュートリアル-php.cn

上にスクロールする画像とswitching_jqueryを実装するjqueryコードの短い文

WBOY

リリース： 2016-05-16 18:02:38

オリジナル

1063 人が閲覧しました

animate() パラメータの概要:
animate() メソッドは、CSS プロパティセットのカスタムアニメーションを実行します。
このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティ値は徐々に変化し、アニメーション効果を作成できます。
アニメーション化できるのは数値のみです (例: 「margin:30px」)。文字列値はアニメーション化できません（「background-color:red」など）。
追記: ただし、最新の jquery ui フレームワークを参照すると、backgroudColor や color などの属性でもグラデーションを実装できます。
追記: 相対アニメーションを作成するには、「=」または「-=」を使用します。
まず第一に、やはり jquery フレームワークを参照する必要があります。
もう一度コードを見てみましょう:

コードをコピーしますコードは次のとおりです:

無題ドキュメント

スクリプトタイプ = "テキスト/javascript" src="jquery.js">
<スクリプトタイプ="テキスト/javascript">
$(document).ready(function() {
var Top=-350;//上向きの移動距離を定義します。この値は画像または DIV の高さに等しいです
var Time=500;//速度を定義します
関数 move() {
$ ("#box").animate({"margin-top":Top},Time);//animate メソッドは数値のグラデーションのみ可能
Top =-350;// で 1 ずつインクリメントします画像の高さ
if(Top==-1050)// 高さの合計が DIV または画像の高さの合計より大きいかどうかを判断します
{
Top=0;//距離を 0 に戻します
Time= 400;//移動速度を上げます
}
else
{
Time=500;//それ以外の場合は速度を下げます
}
}
setInterval(move,3000); //move() を 3 秒ごとに実行します
})

js 部分も次のようなロールバック効果を実現できます:

コードコードは次のとおりです: $(document ).ready(function(){

var Top=-350;

var Time=500; 
var more =-50; 
function move(){ 
$("#box ").animate({"margin-top":Top more},Time); animate({"margin-top":Top},300); 
トップ = -350) 
{ 
トップ = 0; 50; 
時間=400; 
} 
else 
 { 
時間=-50; 
} 
setInterval(移動) ,3000); 
}) 