[置顶] 手机端第一屏页面文章的展开和隐藏
2015-07-13 22:25
387 查看
本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多,所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到,这时就要尽可能地将重点呈现给用户。
内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持:CSS3,一般jQuery库;
HTML代码如下:
CSS代码如下:
js代码如下:
最终效果如下:
如果文字高度大于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,初始状态为文章超出部分隐藏,点击按钮后,文章超出部分显示,同时按钮的状态改变。
这是对手机端文章显示和隐藏的一个总结,望多多交流。
大小: 13.3 KB
大小: 15.3 KB
查看图片附件
内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持:CSS3,一般jQuery库;
HTML代码如下:
<div class="slideup">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. </div> <a href="javascript:void(0)" class="btn_click arrowdown">展开更多</a>
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代码如下:
$('.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,初始状态为文章超出部分隐藏,点击按钮后,文章超出部分显示,同时按钮的状态改变。
这是对手机端文章显示和隐藏的一个总结,望多多交流。
大小: 13.3 KB
大小: 15.3 KB
查看图片附件
相关文章推荐
- [置顶] 一个app下载框
- 手机端JavaScript实战技巧小总
- 手机浏览器下怎么打开app应用
- IOS 根据输入值改变button颜色
- Cocos2d-x vector使用遇到问题。
- IOS 分节表视图
- iOS 各种传值方式
- Android简化xml sax解析
- IOS开发-08.自定义按钮
- IOS开发-07.自定义HUD(提示框)
- 【C++】深度探索C++对象模型读书笔记--关于对象(Object Lessons)
- Android中ImageButton边框完全填充
- iOS之NSAttributedString-------字符属性
- Swift 函数Count,Filter,Map,Reduce
- 用Unity3D和VuforiaSDK简单做AR应用(入门)
- IOS 带搜索栏表视图
- Swift值字典使用
- Android(java)学习笔记128:使用proguard混淆android代码
- IOS 创建简单表视图
- How To Debug Android By Adb