js实现更多内容的收缩与展开效果

发布时间：2018-11-06 17:22:31 所属栏目：交互来源：站长网

导读：Java SCript完成的一段文字收缩与展开的特效代码，在电影网站里，经常会看到电影简介，但是为了页面整体美观的情况下，会隐藏一部分文字以使网页整齐美观，当你想详细看的时候点击更多会展开所有的文字，本代码就是实现了这样一种功能，点击运行查看效果吧

　　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> <title>文字收缩与展开 - Liehuo.Net</title> <style> .zone{ width:162px; position:absolute; left:0; top:0; margin-top:15px;} .zoneTop{ height:38px; background-position:left -55px;} .zoneCon{ font-size:12px; line-height:22px; text-align:left; padding:0 18px; height:223px; overflow:hidden;} .zoneCon a{ color:#000; padding-right:3px;} .zoneCon a:hover{ color:#ff0;} .zoneHot{ background-position:-85px 10px; height:9px; line-height:9px; font-size:0; padding:10px 0 8px; overflow:hidden;} .zoneLine{ height:7px; line-height:5px; font-size:0; border-bottom:1px dotted #000; margin:0 -4px 8px;} .zoneMore,.zoneClose{ width:138px; height:22px; background-color:#FF5D05; margin-left:88px; position:absolute; right:11px; bottom:12px; display:none;} .zoneMore span,.zoneClose span{ width:38px; height:16px; float:right; display:inline; margin-right:5px; background-position:-85px -29px; cursor:pointer; overflow:hidden;} .zoneClose span{ background-position:-128px -29px;} .zoneBottom{ height:12px; font-size:0; line-height:12px; background-position:left -93px; overflow:hidden;} .zoneAll{ margin-bottom:20px; overflow:hidden;} </style> <script> function F$(){var elements=[];for(var i=0;i<arguments.length;i++){var elem=arguments[i];if(typeof elem=="string"){elem=document.getElementById(elem);} if(arguments.length==1){return elem;} elements.push(elem);} return elements;};function addEvent(elem,type,fn){if(elem.nodeName==="A"&&type==="click"){elem.setAttribute("href","javascript:void(0)")};if(elem.addEventListener){elem.addEventListener(type,fn,false);return true;}else if(elem.attachEvent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);} elem.attachEvent("on"+type,elem[type+fn]);return true;} return false;};function cpu(t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;};function slowdown(element,theClass,start,space,speed,_f){var count=0;var speed=speed||50;function place(){element.style[theClass]=cpu(count,start,space,speed)+"px";count++;if(count===speed){clearTimeout(command);count=0;element.style[theClass]=space+start+"px";if(_f)_f();return false;} var command=setTimeout(place,15);} place();} function izone(){ var elem, modHeight, showHeight; elem = F$("izone"); modHeight = elem.scrollHeight; showHeight = elem.offsetHeight; //alert(modHeight+" & "+showHeight) var more = F$("zoneMore"); var myTime; if(modHeight > showHeight){ more.style.display = "block"; addEvent(more, "click", zoneSwitch); } addEvent(elem, "mouseover", function(){ clearTimeout(myTime) }); addEvent(elem, "mouseout", function(){ if(more.className == "zoneClose"){ myTime = setTimeout(zoneSwitch, 1000) }; }); function zoneSwitch(){ if(more.className == "zoneMore"){ navigator.userAgent.indexOf('<b>Opera</b>')>=0 ? elem.style.height = "auto" : slowdown(elem, "height", showHeight, (modHeight-showHeight), 20);// 兼容opera获取溢出隐藏的所有高度bug做的特殊处理 more.className = "zoneClose"; }else{ navigator.userAgent.indexOf('Opera')>=0 ? elem.style.height = showHeight +"px" : slowdown(elem, "height", modHeight, (showHeight-modHeight), 20);// 兼容opera获取溢出隐藏的所有高度bug做的特殊处理 more.className = "zoneMore"; } } //alert(+" & "+); } </script> </head> <body> <div class="zone"> <div class="zoneTop"></div> <div class="zoneCon" id="izone"> <div class="zoneHot"></div> <p> <a href="#">北京</a> <a href="#">上海</a> <a href="#">南京</a> <a href="#">广州</a> <a href="#">深圳</a> <a href="#">江苏</a> </p> <div class="zoneLine"></div> <p class="zoneAll"> <a href="#">台湾</a> <a href="#">杭州</a> <a href="#">天津</a> <a href="#">河北</a> <a href="#">乌鲁木齐</a> <a href="#">桂林</a> <a href="#">云南</a> <a href="#">哈克苏</a> <a href="#">西双版纳</a> <a href="#">宁夏</a> <a href="#">哈克苏</a> <a href="#">台湾</a> <a href="#">香港</a> <a href="#">西安</a> <a href="#">杭州</a> <a href="#">桂林</a> <a href="#">云南</a> <a href="#">宁夏</a> </p> <div class="zoneMore" id="zoneMore"><span>更多...</span></div> </div> <div class="zoneBottom"></div> </div> <script type="text/javascript"> izone(); </script> </body> </html>点击“更多”查看效果。。。 <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：东莞站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

网络连接问题是物联网	工业物联网的五大关键
中国移动初心向人民，	中国电信董事长柯瑞文