JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧

复制代码 代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现默认显示部分文字,点击按钮显示全部</title>
</head>
<body>
<div id="box">
<h2>民间机构提前3天预报大理地震 地震局称违法</h2>
<p>17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。</p>
<p>记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息。对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但民间机构对外公开发布地震预报信息是违法的。</p>
<p><strong>民间机构预报地震受网友追捧</strong></p>
<p>“预计72小时内黑色圈圈内的地区都将有一次较强震感,初步锁定为5级地震,浅源,发生的位置主要是云南东北昭通(余震)、大理西南部和腾冲交界区域、和缅甸交界区域一线(地壳运动所致)云南巧家县和四川宁南县交界区域。”早在4月14日凌晨时分,微博名为“预报中心”的网民就在微博上发布了云南地震预报信息。该微博被网友转发了377次。在大理5.0级地震发生后,“小丛”等知名网友都转发了该微博。“跪了。”知名网友“小丛”在微博上表示。</p>
<p>在大理5.0级地震发生之前,“预报中心”还陆续发布了3条地震预报的微博,并附有预报将发生地震的地图,及一张昆明地震监测点的原始数据图。</p>
<p>这一微博得到了一些网友的转发及称赞。“顶,预报高手在民间,持续关注中。”网民“orfila2011”在评论中表示;“陕西蓝天救援队”官方微博也表示,民间在地震预测工作中有价值的经验方法,有关部门应给予足够的重视。</p>
<p><strong>预报根据省地震局数据分析得出</strong></p>
<p>该民间地震预报微博的资料显示,所在地位于湖北。“很久以前,该微博就已经在微博上播报地震预测信息,但一直很神秘。”有网友表示。昨日,记者通过微博联系上这一神秘民间地震预报机构。</p>
<p>该民间机构是怎样获得地震预报信息的?该微博博主向记者表示,他们是根据云南省地震局官网云南地震数据共享中心查询到了云南省内的一些地震监测数据,分析得出的预报信息。记者发现,确实可以通过该网站查到云南各地震监测点的预处理数据。</p>
<p>>该微博博主还透露,分析这些相关数据需要很多专业知识,但并不需要仪器。对于民间机构预报地震的动力,该博主表示“物质和精神都有”。对于其他信息,该博主不愿意更多透露。</p>
<p><strong>省地震局:民间仅限于学术交流</strong></p>
<p>“地震预测预报必须遵守相应的法律法规。”省地震局科学技术处处长、新闻发言人张俊伟在接受记者采访时表示,根据我国法律,任何个人或民间机构对外发布地震预报信息都是违法行为。</p>
<p>国家《地震预报管理条例》规定,省、自治区、直辖市的地震长期预报、地震中期预报、地震短期预报和临震预报,由省、自治区、直辖市人民政府发布。</p>
<p>对于这些民间的地震预报机构,张俊伟表示,云南省地震局一直都有所关注和了解。除了本次发布预报信息的“预报中心”外,这样的民间地震预报机构及人士还有很多。对于有网友提出能否加强官与民的合作交流。张俊伟表示,目前他个人并没有与这些民间机构取得过联系,但地震局对这些民间机构一直抱着包容与开放的态度,欢迎其与地震局进行学术探讨和交流。</p>
<p>“但另一方面,对外公开发布地震预报信息始终是违法的。我们对这些公开发布地震预报信息的民间机构也很头痛,担心给社会带来不良的影响。”张俊伟认为,市民、网友不应采信民间机构发布的地震预报消息。</p>
</div>
<script>
function show(){
var box = document.getElementById("box");
var text = box.innerHTML;
var newBox = document.createElement("div");
var btn = document.createElement("a");
newBox.innerHTML = text.substring(0,200);
btn.innerHTML = text.length > 200 ? "...显示全部" : "";
btn.href = "###";
btn.onclick = function(){
if (btn.innerHTML == "...显示全部"){
btn.innerHTML = "收起";
newBox.innerHTML = text;
}else{
btn.innerHTML = "...显示全部";
newBox.innerHTML = text.substring(0,200);
}
}
box.innerHTML = "";
box.appendChild(newBox);
box.appendChild(btn);
}
show();
</script>
</body>
</html>

jQuery插件:jquery.limittext.js

复制代码 代码如下:

/**
* demo:
* 1.$("#limittext").limittext();
* 2.$("#limittext").limittext({"limit":1});
* 3.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}});
* 4.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true,"moretext":"更多","lesstext":"隐藏部分","fullfn":function(){alert("more")},"lessfn":function(){alert("less")}}})
* 5.$("#limittext").limittext({"limit":1,"fill":"......","morefn":{"status":true}}).limit("all");
* @param {Object} opt
* {
* limit:30,//显示文字个数
* fill:'...'//隐藏时候填充的文字
* morefn:{
* status:false,//是否启用更多
* moretext: "(more)",//隐藏部分文字时候显示的文字
* lesstext:"(less)",//全部文字时候显示的文字
* cssclass:"limittextclass",//启用更多的A标签的CSS类名
* lessfn:function(){},//当文字为更少显示时候回调函数
* fullfn:function(){}//当文字为更多时候回调函数
* }
* @author Lonely
* @link http://www.liushan.net
* @Download:http://down.liehuo.net
* @version 0.2
*/
jQuery.fn.extend({
limittext:function(opt){
opt=$.extend({
"limit":30,
"fill":"..."
},opt);
opt.morefn=$.extend({
"status": false,
"moretext": "(more)",
"lesstext":"(less)",
"cssclass": "limittextclass",
"lessfn": function(){
},
"fullfn": function(){
}
},opt.morefn);
var othis=this;
var $this=$(othis);
var body=$this.data('body');
if(body==null){
body=$this.html();
$this.data('body',body);
}
var getbuttom=function(showtext){
return "<a href='javascript:;' class='"
+opt.morefn.cssclass+"'>"
+showtext
+"<a>";
}
this.limit=function(limit){
if(body.length<=limit||limit=='all'){
var showbody=body+(opt.morefn.status?getbuttom(opt.morefn.lesstext):"");
}else{
if(!opt.morefn.status){
var showbody=body.substring(0,limit)
+opt.fill;
}else{
var showbody=body.substring(0,limit)
+opt.fill
+getbuttom(opt.morefn.moretext);
}
}
$this.html(showbody);
}
this.limit(opt.limit);
$("."+opt.morefn.cssclass).live("click",function(){
if($(this).html()==opt.morefn.moretext){
showbody=body
+getbuttom(opt.morefn.lesstext);
$this.html(showbody);
opt.morefn.fullfn();
}else{
othis.limit(opt.limit);
opt.morefn.lessfn();
}
});
return this;
}
});

时间: 2024-09-20 20:47:45

JS/jQuery实现默认显示部分文字点击按钮显示全部内容_javascript技巧的相关文章

js jquery-JS/jQuery实现默认显示部分文字点击按钮显示全部内容

问题描述 JS/jQuery实现默认显示部分文字点击按钮显示全部内容 <!doctype html> JS实现默认显示部分文字,点击按钮显示全部 民间机构提前3天预报大理地震 地震局称违法 17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注. 记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息.对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但民间机构对外公开发布地震预

js,jQuery 排序的实现代码,网页标签排序的实现,标签排序_javascript技巧

js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签数组; //排序从文字短的到长的 复制代码 代码如下: //排序从文字短的到长的 var arr_a=new Array(); var i=0; $(".type_list_txt > span:contains('T恤')").parent().chil

基于JS+Canves实现点击按钮水波纹效果_javascript技巧

近来看到个不错的按钮点击效果,当点击时产生一次水波涟漪效果,挺好玩的,于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧,如下图(录制gif软件有点渣,看起来卡卡的...) 这种效果可以由元素内嵌套canves实现,也可以由css3实现. Canves实现 网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下 html代码 <a class="btn color-1 material-design" data-color="

点击按钮显示谷歌地图

原文:点击按钮显示谷歌地图 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

这是加入购物车代码 点击按钮显示:未实现该方法或操作。是什么意思哪位大神看一下

问题描述 这是加入购物车代码 点击按钮显示:未实现该方法或操作.是什么意思哪位大神看一下 protected void btnShop_Click(object sender, EventArgs e) { string Orderid; if (Session["UserName"] == null) { Alert.AlertAndRedirect("您还没有登录,请登录后再购买,谢谢合作!", "Default.aspx"); } else

前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例_实用技巧

前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

基于JS代码实现当鼠标悬停表格上显示这一格的全部内容_javascript技巧

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

js通过更改按钮的显示样式实现按钮的滑动效果_javascript技巧

通过更改按钮的显示样式,来实现按钮动态滑动 复制代码 代码如下: <!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> &

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes