php中隐藏和展开文章,手机端第一屏页面文章的展开和隐藏_html/css_WEB-ITnose
本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多,所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到,这时就要尽可能地将重点呈现给用户。
内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持:CSS3,一般jQuery库;
HTML代码如下:
Html代码 This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.
CSS代码如下:
Css代码 .slideup{width:320px;height:auto;overflow:hidden;margin:0 auto;border: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{height: auto;}
.btn_click{display: block;width: 120px;height: 30px;position:relative;line-height:30px;margin: 10px auto;color: #fff;background: #999;text-align: center;text-decoration: none;text-indent:-1em;border-radius: 5px;}
.arrowup:after{content: "";width: 8px;height: 8px;border: 3px double #fff;position: absolute;top: 10px;right: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代码如下:
Js代码 $('.btn_click').click(function(){
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<=450){
$('.btn_click').hide();
$('.slideup').addClass('slidedown');
}else{
$('.slideup').addClass('the_height');
}
});
最终效果如下:
如果文字高度大于450px,就隐藏,如下:
通过点击展开更多按钮即可展开更多文字,如下:
这里也有几个重点和大家说下:
1.页面第一次加载时的状态:按照按钮的状态分,一是文章高度大于450px时,按钮隐藏;二是文章高度小于450px时,按钮显示。当按钮显示时,又分为两个状态,即为文章收起的状态和文章展开的状态;
2.CSS重点解析:.slideup:设置页面加载时页面的初始样式;.the_height:设置页面加载时,如果文章高度大于450px时,就添加该类;.slidedown:设置文章展开时的样式;.btn_click:设置按钮的初始样式;.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分别为文章展开和收起时的箭头的方向设置;
3.js代码解析:当HTML文档加载完毕后,先做一个判断,如果文章高度小于450px,那么就正常显示文章,展开收起按钮隐藏;如果文章高度大于450px,就将文章的高度设置为450px,展开收起按钮显示。接下来,如果文章的高度大于450px,初始状态为文章超出部分隐藏,点击按钮后,文章超出部分显示,同时按钮的状态改变。
这是对手机端文章显示和隐藏的一个总结,望多多交流。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php中隐藏和展开文章,手机端第一屏页面文章的展开和隐藏_html/css_WEB-ITnose相关推荐
- java项目中使用支付宝支付(手机端,web端)--菜鸟小回
java项目中使用支付宝支付(手机端,web端) 文章目录 java项目中使用支付宝支付(手机端,web端) @[toc] 一.Spring boot项目代码 二.支付宝沙箱环境配置 1. 因为上面c ...
- 手机端调试h5页面利器插件
手机端调试h5页面利器插件 现在越来越多的手机app或者公众号,里边大量的使用h5页面,而在手机端没法像pc谷歌浏览器那样调试页面,有些时候只能不断的进行alert,麻烦不说,有的时候还找不到问题所在 ...
- 织梦手机端生成静态页面实操
遇到问题:织梦手机端默认访问是域名/m/list.php?tid=id或者/m/view.php?aid=1,如何将动态地址修改为静态. 解决办法:网上搜索织梦手机端静态生成教程,基本插件实现.以下为 ...
- fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题
fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 参考文章: (1)fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题 ...
- 织梦手机站 html 插件,织梦DEDECMS手机端生成静态页面插件完整版
织梦DEDECMS手机端生成静态页面插件完整版[已解决] 实现手机端(wap版)静态生成 一.添加后台导航栏目链接 1 打开dede/inc/inc_menu.php,在146行下面添加代码: 二.更 ...
- unity 手机上获取手指触摸位置_Unity 操作检测的各种实现#2手机端 - 触屏与手势...
写在前面 继续填坑了.这次是讲手机端. 电脑端 [ 按我跳转 ] 键盘按键控制 [ 上文内容 ] 鼠标点击控制 [ 上文内容 ] 手机端 触屏控制 [ 本文内容 ] 手势控制 [ 本文内容 ] 重力控 ...
- HTML5响应式手机模板:电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- HTML5响应式手机模板:电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 ht ...
- jquery,js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图 使用了swiper插件,可手动滑动切换也可自动切换 效果图 css代码 只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
最新文章
- php怎么看数据化,3.2.11 查看和判断数据类型
- docker查看现有容器_如何使用Docker将现有应用程序推送到容器中
- 浅析基于双目视觉的自动驾驶技术
- 百度的云智一体,让视频变得“硬核性感”
- (GO_GTD_1)基于OpenCV和QT,建立Android图像处理程序
- boost::python::register_ptr_to_python相关的测试程序
- join 方法代码实例
- 《openssl 编程》之大数
- jq之mousedown
- 数据加密:RSA 密钥
- php while 语录,PHP While 循环
- 删除MyEclipse 6.5.1自带的Maven4MyEclipse
- Oracle DML封锁机制研究
- 怎样关闭eclipse中的tooltip提示
- HDU 1394 求逆序数(线段树)
- android清除图案锁 位置,安卓手机清除锁屏密码、锁屏图案的教程
- FusionCompute产品介绍
- fisher精确检验(fisher’s exat test)和超几何分布
- Qt之Base64编解码
- android 时间大小排序,android collection.sort()根据时间排序list