ホームページ  >  記事  >  ウェブフロントエンド  >  上にスクロールする画像とswitching_jqueryを実装するjqueryコードの短い文

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

WBOY
WBOYオリジナル
2016-05-16 18:02:38988ブラウズ

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

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





無題ドキュメント



1
2

3

スクリプトタイプ = "テキスト/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);
})

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。