`
ahut9923
  • 浏览: 239081 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

JS 控制显示 和 展开

阅读更多

<style>
#content,#intro{
 font: 13px/25px;
 width: 200px;
 height: 40px;
 background: #eee;
 padding: 10px;
 border: 4px #ccc double;
        border-bottom:0;
 overflow: hidden;
}
#intro {
 color: #036;
 font:12px;
        border: 4px #ccc double;
        border-top:0;
        height:70px;
}
#key{color:#900;float:right}
hr{height:1px;border:1px #ccc dotted}
</style>
<script>
var s=5;
var minheight=40;
var maxheight=500;
function shoppingcat(){
 var key = document.getElementById("key").innerText;
 if(key=="展开"){
  content.style.pixelHeight+=s;
  if(content.style.pixelHeight<maxheight){
   setTimeout("shoppingcat();",1);
  }else{
   document.getElementById("key").innerText="关闭";
  }
 }else{
  content.style.pixelHeight-=s;
  if(content.style.pixelHeight>minheight){
   setTimeout("shoppingcat();",1);
  }else{
   document.getElementById("key").innerText="展开";
  }
 }
}
</script>
<div id="content">
孤雁儿
<br><br>
世人作梅词,下笔便俗。予试作一篇,乃知前言不妄耳。<br><br>
藤床纸帐朝眠起,<br>
说不尽、无佳思。<br>
沈香烟断玉炉寒,<br>
伴我情怀如水。<br>
笛声三弄,<br>
梅心惊破,<br>
多少春情意。<br><br>
小风疏雨萧萧地,<br>
又催下、千行泪。<br>
吹箫人去玉楼空,<br>
肠断与谁同倚?
一枝折得,<br>
人间天上,<br>
没个人堪寄。
</div>
<div id="intro" ><hr>作者:李清照<span id="key" onclick="shoppingcat();">展开</span><br>来源
:中国诗辞网</div>

分享到:
评论

相关推荐

    js实现点击向下展开的下拉菜单效果代码

    并且通过CSS来控制下拉菜单的显示和隐藏,如#navdiv设置为默认不显示(display:none),并且当鼠标悬停在#nava上时改变背景色和文字颜色来提升用户体验。 3. JavaScript实现逻辑:实现下拉菜单的核心是JavaScript。...

    展开收起消息内容,控制字数的显示收起

    "展开收起"通常应用于文章摘要、评论列表、菜单项、配置选项等场景,通过控制显示的字数,使得大量信息可以有组织地呈现。 标题“展开收起消息内容,控制字数的显示收起”提示我们,这个功能主要涉及如何动态地展示...

    js实现展开收起菜单

    1. **CSS样式设置**:定义`.parent`、`.child`和`.regular`类,控制菜单项及其子菜单的显示状态。 2. **浏览器兼容性处理**:检测当前浏览器是否支持层叠样式表(CSS)或所有元素(IE4及以上),并根据结果调整代码...

    利用js实现展开效果

    这样,我们就介绍了如何使用JavaScript实现展开和隐藏效果,涉及了基础语法、DOM操作、CSS样式控制、事件监听、动画效果以及类操作等知识点。在实际项目中,可以根据需求选择合适的方法来实现这种交互效果。

    很好用的JS左侧导航菜单,滑过显示,移开隐藏

    在本例中,JS 用来监听鼠标的移动事件,控制导航菜单的显示和隐藏。 2. **HTML结构**:在`index.html`文件中,会定义一个左侧导航菜单的基本HTML结构,可能包含`&lt;nav&gt;`、`&lt;ul&gt;`、`&lt;li&gt;`等元素。每个`&lt;li&gt;`元素代表...

    js控制select相关方法

    以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...

    js实现点击右侧小图左侧显示大图带控制按钮

    这个需求可以通过JavaScript实现,让点击右侧的小图能够在左侧显示大图,并且附带控制按钮,以方便用户进行切换或关闭。下面我们将详细探讨如何使用JavaScript来实现这一功能。 首先,我们需要在HTML中构建页面结构...

    JS树形结构菜单展开收缩代码.zip

    "JS树形结构菜单展开收缩代码"就是利用Vue.js的特性来实现一个可动态展开和收缩的树形菜单。 首先,Vue.js的组件化设计是实现这一功能的基础。每个菜单项可以被视为一个独立的组件,包含其自身的状态(如是否展开)...

    Js鼠标移上去动态展开

    为了使效果更优雅,可以添加一些过渡动画,例如使用CSS3的`transition`属性,或者使用JavaScript库如jQuery来实现平滑的展开和收起效果。 此外,如果你的项目中使用了框架或库,如React、Vue或Angular,实现这种...

    ArcGIS Javascript图层控制.

    本教程将深入探讨如何利用JavaScript API来实现图层的控制显示,这对于初学者来说是非常实用的知识点。ArcGIS Server则提供了地理处理服务和地图服务,使得开发者能够在线上部署地图应用。 首先,我们来了解`...

    js树状显示功能代码

    总之,这个"js树状显示功能代码"示例是一个结合了JavaScript、jQuery和CSS技术的前端项目,它展示了如何构建一个交互式的、可自定义的树形结构。通过理解并实践这些技术,开发者可以创建出更复杂、功能丰富的用户...

    JS分竖条显示 点击的时候展开.zip

    综上所述,这个项目提供了一个使用JavaScript实现分竖条点击展开的实例,对于学习和理解JavaScript的DOM操作、事件处理、CSS样式控制以及交互式界面设计具有一定的参考价值。开发者可以通过分析和修改源代码,进一步...

    图片显示特效javascript

    本主题主要围绕"图片显示特效javascript"展开,探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载:JavaScript可以监测图片的加载状态,例如使用`onload`事件来处理图片加载完成后执行的代码,确保...

    横向展开菜单JS网页特效

    在这个特效中,我们可能会为子菜单项添加过渡效果,使其在展开和收起的过程中有优雅的动画效果,提高用户体验。 此外,为了保证兼容性和性能,我们需要考虑不同浏览器对JS和CSS3的支持情况。使用像jQuery这样的库...

    js鼠标滑过展开下拉菜单.zip

    4. **动画效果**:在事件处理函数中,利用JavaScript改变二级菜单的CSS属性,比如`opacity`(透明度)和`transform`(平移、旋转等),来实现滑动展开和关闭的效果。这里可能需要用到`requestAnimationFrame`来实现...

    控制页面展开和关闭。

    在网页设计中,控制页面元素的展开和关闭是一项常见的需求,尤其在构建交互式和动态内容时。这个任务可以通过结合HTML和CSS来实现,而无需借助JavaScript等更复杂的编程语言。"控制页面展开和关闭"的实践主要涉及到...

    JS无限级(+ - 展开)菜单

    总结来说,创建一个JS无限级(+ - 展开)菜单涉及到HTML结构的设计、CSS样式控制以及JavaScript事件处理和可能的动画效果。通过递归处理,可以轻松应对任何级别的菜单深度,使得网页的导航更加直观和便捷。

    jQuery标题展开显示文字内容代码.zip

    6. **动画效果**:jQuery的动画功能可以让内容展开或收起时有平滑的过渡,`slideDown()`和`slideUp()`分别用于向下展开和向上收起元素。 7. **条件判断**:使用`if...else`结构判断当前内容的状态,决定是展开还是...

    js二级滑动展开菜单导航

    例如,可以将二级菜单默认隐藏,然后通过JavaScript控制其显示。 ```css .sub-nav { display: none; position: absolute; /* 需要绝对定位,以便于在点击一级菜单后滑出 */ } .nav-item.active .sub-nav { ...

    html+javascript只显示部分文章内容(一部分文字), 加载更多按钮 展开,收缩.zip

    在网页设计中,为了优化用户体验,我们经常遇到需要在页面上只显示文章部分内容,而其余内容则通过“加载更多”或“展开”按钮来获取。这个场景在标题和描述中被提及,涉及到的技术主要是HTML和JavaScript。下面我们...

Global site tag (gtag.js) - Google Analytics