<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>
分享到:
相关推荐
并且通过CSS来控制下拉菜单的显示和隐藏,如#navdiv设置为默认不显示(display:none),并且当鼠标悬停在#nava上时改变背景色和文字颜色来提升用户体验。 3. JavaScript实现逻辑:实现下拉菜单的核心是JavaScript。...
"展开收起"通常应用于文章摘要、评论列表、菜单项、配置选项等场景,通过控制显示的字数,使得大量信息可以有组织地呈现。 标题“展开收起消息内容,控制字数的显示收起”提示我们,这个功能主要涉及如何动态地展示...
1. **CSS样式设置**:定义`.parent`、`.child`和`.regular`类,控制菜单项及其子菜单的显示状态。 2. **浏览器兼容性处理**:检测当前浏览器是否支持层叠样式表(CSS)或所有元素(IE4及以上),并根据结果调整代码...
这样,我们就介绍了如何使用JavaScript实现展开和隐藏效果,涉及了基础语法、DOM操作、CSS样式控制、事件监听、动画效果以及类操作等知识点。在实际项目中,可以根据需求选择合适的方法来实现这种交互效果。
在本例中,JS 用来监听鼠标的移动事件,控制导航菜单的显示和隐藏。 2. **HTML结构**:在`index.html`文件中,会定义一个左侧导航菜单的基本HTML结构,可能包含`<nav>`、`<ul>`、`<li>`等元素。每个`<li>`元素代表...
以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明: 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现,检查每个选项的`...
这个需求可以通过JavaScript实现,让点击右侧的小图能够在左侧显示大图,并且附带控制按钮,以方便用户进行切换或关闭。下面我们将详细探讨如何使用JavaScript来实现这一功能。 首先,我们需要在HTML中构建页面结构...
"JS树形结构菜单展开收缩代码"就是利用Vue.js的特性来实现一个可动态展开和收缩的树形菜单。 首先,Vue.js的组件化设计是实现这一功能的基础。每个菜单项可以被视为一个独立的组件,包含其自身的状态(如是否展开)...
为了使效果更优雅,可以添加一些过渡动画,例如使用CSS3的`transition`属性,或者使用JavaScript库如jQuery来实现平滑的展开和收起效果。 此外,如果你的项目中使用了框架或库,如React、Vue或Angular,实现这种...
本教程将深入探讨如何利用JavaScript API来实现图层的控制显示,这对于初学者来说是非常实用的知识点。ArcGIS Server则提供了地理处理服务和地图服务,使得开发者能够在线上部署地图应用。 首先,我们来了解`...
总之,这个"js树状显示功能代码"示例是一个结合了JavaScript、jQuery和CSS技术的前端项目,它展示了如何构建一个交互式的、可自定义的树形结构。通过理解并实践这些技术,开发者可以创建出更复杂、功能丰富的用户...
综上所述,这个项目提供了一个使用JavaScript实现分竖条点击展开的实例,对于学习和理解JavaScript的DOM操作、事件处理、CSS样式控制以及交互式界面设计具有一定的参考价值。开发者可以通过分析和修改源代码,进一步...
本主题主要围绕"图片显示特效javascript"展开,探讨如何利用JavaScript实现各种图片展示的动态效果。 1. 图片加载:JavaScript可以监测图片的加载状态,例如使用`onload`事件来处理图片加载完成后执行的代码,确保...
在这个特效中,我们可能会为子菜单项添加过渡效果,使其在展开和收起的过程中有优雅的动画效果,提高用户体验。 此外,为了保证兼容性和性能,我们需要考虑不同浏览器对JS和CSS3的支持情况。使用像jQuery这样的库...
4. **动画效果**:在事件处理函数中,利用JavaScript改变二级菜单的CSS属性,比如`opacity`(透明度)和`transform`(平移、旋转等),来实现滑动展开和关闭的效果。这里可能需要用到`requestAnimationFrame`来实现...
在网页设计中,控制页面元素的展开和关闭是一项常见的需求,尤其在构建交互式和动态内容时。这个任务可以通过结合HTML和CSS来实现,而无需借助JavaScript等更复杂的编程语言。"控制页面展开和关闭"的实践主要涉及到...
总结来说,创建一个JS无限级(+ - 展开)菜单涉及到HTML结构的设计、CSS样式控制以及JavaScript事件处理和可能的动画效果。通过递归处理,可以轻松应对任何级别的菜单深度,使得网页的导航更加直观和便捷。
6. **动画效果**:jQuery的动画功能可以让内容展开或收起时有平滑的过渡,`slideDown()`和`slideUp()`分别用于向下展开和向上收起元素。 7. **条件判断**:使用`if...else`结构判断当前内容的状态,决定是展开还是...
例如,可以将二级菜单默认隐藏,然后通过JavaScript控制其显示。 ```css .sub-nav { display: none; position: absolute; /* 需要绝对定位,以便于在点击一级菜单后滑出 */ } .nav-item.active .sub-nav { ...
在网页设计中,为了优化用户体验,我们经常遇到需要在页面上只显示文章部分内容,而其余内容则通过“加载更多”或“展开”按钮来获取。这个场景在标题和描述中被提及,涉及到的技术主要是HTML和JavaScript。下面我们...