JQUERY代码：
コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JQUERY は、左側の TIPS のスライドインおよびスライドアウト効果を実装します_jquery

JQUERY は、左側の TIPS のスライドインおよびスライドアウト効果を実装します_jquery

WBOY
リリース： 2016-05-16 17:31:08
オリジナル
1225 人が閲覧しました

左側では、スライドインおよびスライドアウトのスムージング効果を求めるプロンプトが表示されます。同様の効果が発生した場合は、それを適用できます:
JQUERY は、左側の TIPS のスライドインおよびスライドアウト効果を実装します_jquery
JQUERY コード:

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

//左に浮動します
$(".reading").hover( function(){
$(this).animate({left:"50"});
$(".read").animate({left:"0"},600); >$(".read_close" ).click( function(){
$(".read").animate({left:"-287"},600);
$(".reading") .animate({left:" 0"},800);


HTML:


コードをコピーします> コードは次のとおりです。
> JQUERY は、左側の TIPS のスライドインおよびスライドアウト効果を実装します_jquery

コードをコピー
コードは次のとおりです: .reading{position:fixed;left:0px;bottom:30px;cursor:pointer;width: 25px;height :75px; _position:absolute;//IE6 と互換性があります _top:expression(eval(document.documentElement.scrollTop document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop) ,10)| |0)-(parseInt(this.currentStyle.marginBottom,30)||0)));
//IE6 対応、下から 30 個< /PRE>}.read { border:1px Solid #d0d0d0;width:285px;height:100px; -moz-box-shadow:0px 1px 2px #ccc; -webkit-box-shadow:0px 1px 2px #ccc; shadow:0px 1px 2px # ccc;//シャドウ効果、CSS3background:#fff;position:fixed;left:-287px;bottom:30px;z-index:10;_position:absolute;_top:expression(eval(document.documentElement) .scrollTop document.documentElement. clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,30)||0));}.read
p{font- size:14px;line-height:22px;padding:15px 0 0 16px;width:240px;}.read p.read_btn{text-align:right;padding-top:5px}.read_close{float :right;padding:2px ;cursor:pointer;}







関連ラベル：
jquery
ソース：php.cn
前の記事：ScrollPic を解析すると、ie8 では 1 回だけスクロールされ、その後空白になります。ie6、ie7、chrome、firefox_javascript スキルでは正常です。 次の記事：Unit PNG Fix.js に基づくソリューションは、ie6_javascript スキルの下では正しく動作しないことがある
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...
から 2024-04-06 21:24:04
0
1
606
MySQL でグループ化してカウントするにはどうすればよいですか? 友人に送信され、削除されていないメッセージの合計数を抽出するクエリを作成しようとしています。これはテーブル構造のスクリーンショットです。 達成したい出力は次のとおりです。 idme...
から 2024-04-06 18:30:17
0
1
353
ループするために MySQL の結果を ID ごとにグループ化する mysqlにフライトデータを含むテーブルがあります。 codeigniter3Journey_idair_idFlightDurationout_or_inflightdurati...
から 2024-04-06 17:27:56
0
1
406
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
内部クエリに Eloquent を使用する 画像アドレスには、場所とユーザーの総数が含まれています。 Users::with(['address'=>function($query){$query->where(...
から 2024-04-06 16:45:50
0
1
515
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート