ホームページ > 記事 > ウェブフロントエンド > 携帯電話の最初の画面の記事の展開と非表示_html/css_WEB-ITnose
携帯電話の最初の画面の記事の展開と非表示_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:331458ブラウズ
本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多，所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到，这时就要尽可能地将重点呈现给用户。
内容又由文字，图片等等信息组成，如果文字过长，就显得冗余，这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持：CSS3，一般jQuery库；
HTML代码如下：
Html代码
CSS代码如下：
Css代码
.slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;b order:1px solid #fff;text -align: center;padding: 10px;background: #999;color:#fff;font-weight:bold;border-radius: 0 0 8px 8px;}
- .the_height{height: 450px;}
- .slidedown{高さ: 自動;}
- .btn_click{表示: ブロック;幅: 120px;高さ: 30px;位置:相対;行の高さ:30px;マージン: 10px 自動;カラー: #fff;背景: #999;text-align : center;text-decoration: none;text-indent:-1em;border-radius: 5px;}
- .arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;位置: 絶対;上: 10px;右:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}
- .arrowup:before{content: "";width: 6px;height : 6px;border: 1px solid #fff;position: absolute;top: 15px;right:20px;border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}
- .arrowdown:after{ content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 8px;right:18px;border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg) ;}
- .arrowdown:before{content: "";width: 6px;height: 6px;border: 1px solid #fff;position: absolute;top: 7px;right:20px;border-width: 1px 1px 0 0; -webkit-transform:rotate(135deg);}
Js代码
$('.btn_click').click (関数(){
- var class_lists=$('.slideup').attr('class');
- var class_index=class_lists.indexOf('isdown');
- if(class_index==-1){
- $('.slideup').slideDown().addClass('isdown slidedown');
- $('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');
- }else{
- $('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');
- $('.btn_click').html("展开もっと").removeClass('arrowup').addClass('arrowdown');
- }
- });
- $(document).ready(function(){
- var article_height=$('.slideup').height();
- //alert(article_height);
- if(article_height $('.btn_click').hide();
- $('.slideup').addClass('slidedown');
- }else{
- $('.slideup')クラス('the_height' );
- }
- });
如果文字高
大以上450px、就隐藏、如下：
通过点击展开更多按钮即可展开更多文字，如下：
照按钮の状態、1 つは文章の高さが 450px より大きいとき、按钮隐藏; 2 番目は文章の高さが 450px より小さいとき、按钮表示ボタンが表示されると、文章が受信されている状態と文章が展開されている状態の 2 つの状態に分かれます。
2. CSS キー分析: .slideup: ページの読み込み時にページの初期スタイルを設定します。記事の高さが 450 ピクセルを超える場合は、このクラスを追加します。 : 記事を展開するときのスタイルを設定します。;.btn_click: ボタンの初期スタイルを設定します。 .arrowup:after、.arrowup:before、.arrowdown:after、.arrowdown:before はそれぞれ、記事を展開するときの矢印の方向を設定します。
3.js コード分析: HTML ドキュメントが読み込まれた後、最初に判断を行い、記事の高さが 450px 未満の場合は、記事を通常に表示し、展開と折りたたみのボタンを非表示にします。 ; 記事の高さが 450px を超える場合は、記事の高さを 450px に設定し、展開して折りたたむと、スタートボタンが表示されます。次に、記事の高さが450pxを超える場合、初期状態では記事の余分な部分が非表示になっており、ボタンをクリックすると記事の余分な部分が表示され、ボタンの状態が変わります。同時。
携帯電話での記事の表示と非表示についてまとめました。さらに情報を共有していただければ幸いです。