コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryは、アニメーション効果の非表示と表示/入力ボックスの文字の動的な減少/ナビゲーションボタンswitching_jqueryを実装します。

jqueryは、アニメーション効果の非表示と表示/入力ボックスの文字の動的な減少/ナビゲーションボタンswitching_jqueryを実装します。

WBOY
リリース： 2016-05-16 17:30:45
オリジナル
1058 人が閲覧しました

csdn アカウントにログインしてから 2 年以上が経ち、途中でいくつかのサイド作業をしましたが、今はプログラムに戻っていますが、多くのことをほとんど忘れています。まだ私の考え方を修正して、ゆっくり時間をかけて、フロントエンドで歩き回って、幸せな魚座になる必要があります。
道は一歩ずつ歩き、知識は少しずつ蓄積され、記録は財産になります。さあ、一緒に要約してメモをとることを学びましょう。

私がバックグラウンド記事を書いている一部のページでは、インタラクティブ性を向上させるために何らかのエフェクトを実行する必要があるのですが、これは間違いなく js が最良の選択ですが、ブラウザーの互換性が常に不十分なためです。 jquery フレームワークを使用すると、css スタイル、dom ノード、および独自の関数を通じて、より優れたユーザー エクスペリエンスを実現できます。このケースには 3 つの機能ポイントがあります。

1. jquery 独自の toggle() 関数を使用して、レイヤーの非表示と表示アニメーションを実装します。
2. Sina および Tencent Weibo 入力ボックスの文字の動的減少効果を模倣します (別の js 、導入後は汎用になります);
3. タブと同様に、複数のナビゲーション ボタンを実装します。

以下はすべてのコードです。 >

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





用jquery实现两个table的显示与隐藏


<script> <br>/*控制文章字数输入函数*/ <br>$(function(){ <br>$("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 <br>}) <br>/* <br>words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 <br>dom：当前要操作的对象 <br>num：限制字符数量 <br>id:通过传入id值动态添加需要操作的span <br>*/ <br>function words_deal(dom,num,id) <br>{ <br>var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 <br>if(curLength>num)//判断是否大于限制字符数量 <br>{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 <br>var totalNum=$(dom).val().substr(0,num); <br>$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 <br>alert("超过字数限制，多出的字将被截断！" ); <br>} <br>else <br>{ <br>if(curLength>num-10) <br>{//如果输入字符为倒数10个字符时改变样式将字体变红 <br>$('.textCount_'+id).addClass("textAfter"); <br>} <br>else <br>{//否则移除样式 <br>$('.textCount_'+id).removeClass("textAfter"); <br>} <br>$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 <br>} <br>} <br>//文章列表菜单栏效果控制函数 <br>function fun_search(dom,id){ <br>//控制搜索层显示或隐藏 <br>if(id!=1){ <br>$(".article_search").toggle("fast",function(){ <br>}); <br>} <br>//控制切换样式 <br>var className = $(dom).attr("class"); <br>if(className != 'on'){ <br>$('.search_table a').removeClass('on'); <br>$(dom).addClass('on'); <br>} <br>} <br></script>

































* 标题
剩余40个字
缩略图:




  
  
  
    

自定义属性
首页头条推荐
首页焦点图推荐
视频首页每日热点
视频首页头条推荐
视频首页焦点图
首页图片推荐


栏目首页推荐
视频栏目精彩推荐
网站顶部推荐
TAG标签
  (','号分开，单个标签小于12字节)



























著者別の最新記事
最新の問題
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
クリックしてスクロールすると div を非表示/表示します 検索アイコンをクリックすると表示され、ユーザーがクリックまたはスクロールすると非表示になる、非表示の検索フォームを作成したいと考えています。
から 2024-04-06 12:20:46
0
1
386
特定のメニュー項目にマウスオーバーしても、非表示のサブメニューが表示されない メニュー項目を呼び出すことができるように、メニュー項目用にいくつかのクラスを作成しました。 .dropdownBox{display:none;}.dropdownli:hover...
から 2024-04-04 14:39:08
0
1
359
フォーカスが機能しないときに非表示を表示からブロックを表示に変更する 「searchbarinput」をクリックしたときに「searchbardropdown」を表示させようとしていますが、うまくいきません。何が起こっているのか知っている人はいますか...
から 2024-04-04 14:24:47
0
1
371
クリック後画像を非表示にし、再度クリックすると画像を表示する方法はありますか？ オブジェクトに画像を重ねています。クリックして非表示にし、オブジェクト (360 度の仮想ツアー) を表示し、仮想ツアーをクリックするとまったく同じ画像を表示したいと考えています。...
から 2024-04-03 20:13:41
0
1
311
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート