<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
function init(){
var len = 14; //默认显示字数
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?"<img src='d:\\right.jpeg' width='15' height='15' />展开":""; //设置a的显示
a.href = "javascript:void(0)";
a.onclick = function(){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "<img src='d:\\up.jpeg' width='15' height='15' />收起";
span.innerHTML = content;
}else{
a.innerHTML = "<img src='d:\\right.jpeg' width='15' height='15' />展开";
span.innerHTML = content.substring(0,len);
}
}
// 设置div内容为空，span元素 a元素加入到div中
ctn.innerHTML = "";
ctn.appendChild(span);
ctn.appendChild(a);
}
</script>
<body onload="init()">
<div id="content">
那片笑声让我想起我的那些花儿</br>
在我生命每个角落静静为我开着</br>
我曾以为我会永远守在他身旁</br>
今天我们已经离去在人海茫茫
</div>
</body>
</html>
截图
分享到：
相关推荐
Javascript实现文字的显示与隐藏.doc
JavaScript实现文字展开和收起效果 列表式的文字的展开和收起的实现，供大家参考，具体内容如下 需求： 1、当文字超出目标值，则截取目标值，其他隐藏,同时显示“展开”二字和下拉箭头； 2、点击“展开”显示...
主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下
本文实例讲述了JavaScript实现定时隐藏与显示图片的方法。分享给大家供大家参考。具体如下： 这里使用JavaScript实现定时隐藏与显示图片，设定图片在几秒后会自动显示，也会自动隐藏，秒数这个自己去定义吧，在...
本文实例讲述了JavaScript实现隐藏省略文字效果的方法。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv=Content-Type content=text/html; charset=GB2312 /> <title>...
这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三方插件，因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示...
3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本...
3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
实例385 自动隐藏式菜单 637 第18章 JavaScript与PHP结合 641 18.1 窗口与对话框 642 实例386 弹出提示对话框并重定向网页 642 实例387 关闭弹出窗口时自动刷新父窗口 643 实例388 在弹出的网页模式...
12.7.4 改变位置--创建一个绕圆圈旋转的文字 12.7.5 编辑控制及其范例 12.7.6 改变样式及其范例 12.7.7 改变行为 12.8 XML DOM 12.8.1 什么是XML DOM 12.8.2 如何使用XML DOM--一个利用...
116.425, 39.900】），页面里面也实现了隐藏poi文字、还有覆盖物清除、进行测距（在地图上随意标俩个点就可以获得之间的直线距离）、随意放大和缩小地图的按键也可通过鼠标。最后一个路径规划的输入框，是输入一个...
javascript实现的查看隐藏的密码框中明文信息的方法，用户输入密码时显示星号，如何查看明文信息呢，用js可以实现查看密码框的明文。 在密码框中输入密码，会以星号来显示，文字内容被自动隐藏了。 用户输入密码时...
30.2.htm JavaScript检测 30.3.htm 获取浏览器窗口大小 30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟...
step1 设置弹窗容器，包含关闭按钮和文本区域，设置display为隐藏（none)，并设置在顶层。 step2 设置弹窗按钮（这里是点击段落内容呀），并书写对应的js函数（将弹窗的display显示）。 step3 设置关闭按钮的js函数...
设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这： if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0 }else...