javascript实现一段文字展开、收起(默认收起)
2017-05-02 23:35
597 查看
在线演示
html:
CSS:
javascript:
以上就是实现展开、收起效果的代码。
如果不用箭头符号来表示,而是以图片形式来展示那么就使用下面代码替换相应代码:
html:
<div id="content"> 2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。 </div>
CSS:
<style> #content { width: 500px; background-color: #ccc; line-height: 26px; } a { text-decoration: none; color: red; } </style>
javascript:
<script> function init(){ var len = 60; //默认显示字数 var ctn = document.getElementById("content"); //获取div对象 var content = ctn.innerHTML; //获取div里的内容 //alert(content); var span = document.createElement("span"); //创建<span>元素 var a = document.createElement("a"); //创建<a>元素 span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符 a.innerHTML = content.length>len?"... 展开":""; ////判断显示的字数是否大于默认显示的字数 来设置a的显示 a.href = "javascript:void(0)";//让a链接点击不跳转 a.onclick = function(){ if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起" a.innerHTML = "<< 收起"; span.innerHTML = content; }else{ a.innerHTML = "... 展开"; span.innerHTML = content.substring(0,len); } } // 设置div内容为空,span元素 a元素加入到div中 ctn.innerHTML = ""; ctn.appendChild(span); ctn.appendChild(a); } </script>
以上就是实现展开、收起效果的代码。
如果不用箭头符号来表示,而是以图片形式来展示那么就使用下面代码替换相应代码:
a.innerHTML = content.length>len?"<img src='images/right.png' width='15' height='15' />展开":""; //设置a的显示
相关文章推荐
- javascript实现一段文字展开、收起(默认收起)
- javascript实现一段文字展开、收起(默认展开)
- javascript实现文字隐藏 展开收起
- javascript 特效实现(1)——展开选项和收起效果
- 巧妙利用before和after伪类实现文字的展开和收起
- JavaScript实现兼容IE6的收起折叠与展开效果实例
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- 巧妙利用before和after伪类实现文字的展开和收起
- JavaScript实现“展开-收起”效果
- 一段javascript实现缩略图的好代码
- javascript实现的文字加密解密
- javascript实现的文字加密解密
- 用JavaScript实现变色背景和文字
- javascript在一段文字中的光标处插入其他文字
- 一段javascript实现缩略图的好代码
- 一段javascript实现缩略图的好代码
- 慢慢展开再慢慢收起的javascript广告效果
- 『改进』逐行滚动文字效果的Javascript实现
- 一段javascript实现缩略图的好代码,可以实现缩略图
- 如何实现将一段文字赋值倒Windows剪切板里??????