原文:html Div层的展开与收缩的特效源代码下载
源代码下载地址:http://www.zuidaima.com/share/1550463332338688.htm
div展开收缩代码-www.zuidaima.com-最代码
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content, #class2content,#class3content { height:50px;overflow:hidden;display:none;}
function $(element){
return element = document.getElementById(element);
}
function $D(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
h+=50; //设置层展开的速度
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
h-=50;//设置层收缩的速度
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(targetid,objN){
var d=$(targetid);
var sb=$(objN);
if (d.style.display=="block"){
$D2(targetid);
d.style.display="none";
sb.innerHTML="展开";
} else {
var p=document.getElementsByTagName("p");
var span=document.getElementsByTagName("span");
for(var i=0,l=p.length;i<l;i++){
if(p[i]!=d){
p[i].style.height=0;
p[i].style.display="none";
span[i].innerHTML="展开";
}
}
$D(targetid);
d.style.display="block";
sb.innerHTML='收缩';
}
}
div展开收缩效果
展开
something.........
div展开收缩效果
展开
something.........
div展开收缩效果
展开
wojiade
分享到:
相关推荐
html Div层的展开与收缩的特效源代码下载
"CSS层折叠(或收缩)与展开特效"是一个结合了这两种技术,实现网页元素动态显示与隐藏的交互效果。这种效果常见于导航菜单、侧边栏、内容区块等,它允许用户点击后展开或折叠内容,提高用户体验,尤其在内容丰富的...
在提供的压缩包文件中,"使用帮助.txt"可能包含了关于如何应用这些代码的说明,"谷普下载.url"和"说明.url"可能是下载源和更详细文档的链接,而"jiaoben7295"可能是示例代码文件。通过阅读这些资源,你可以更深入地...
2. **js** 文件夹:这包含了项目的JavaScript源代码。在`main.js`中,你会发现用于控制广告行为的核心代码。这部分代码可能包括了广告的显示、隐藏、自动收缩和扩展的逻辑,以及可能的动画效果。 3. **images** ...
非常漂亮的jquery前端案例源代码(包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动)100个合集: jQuery+CSS实用图片收缩与放大效果插件 jquery+div实现同时滑动切换的图文展示特效插件下载 jquery+div带动画...
5.jquery+div带动画按钮图片手动与自动切换的特效代码 6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9...
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
在提供的文件列表中,`说明.htm`可能是包含代码解释和使用指南的HTML文档,而`jiaoben5470`可能是源代码文件,可能包含HTML、CSS和JavaScript文件,用于实现所述的特效。要查看和应用这个特效,需要将这些文件部署到...
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
在实际开发中,"jiaoben7888"这个文件很可能是项目的源代码,包含了HTML、CSS和JavaScript文件。通过对这些文件的学习和研究,你可以更深入地了解如何将理论知识应用到实践中,进一步提升你的jQuery技能。 总的来说...
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
提供的`jiaoben7572`文件可能是实现这一功能的源代码文件,包括HTML、CSS和JavaScript。`说明.htm`可能是对如何使用这些代码的解释或示例。下载并解压这些文件后,开发者可以在自己的项目中直接引用,或者根据需求...
`src`目录通常包含了项目的源代码,其中可能有HTML、CSS和JavaScript文件。`.idea`目录是IntelliJ IDEA等IDE的配置文件,包含了项目的元数据和设置,帮助开发者进行代码编辑和调试。 总的来说,这个项目是HTML和CSS...
在"纵向手风琴滚动切换.zip"压缩包中的"jiaoben18389"文件,很可能是该效果的源代码或者示例文件。这个文件可能包含了HTML文件(用于结构布局)、CSS文件(用于样式设定)和JavaScript文件(用于实现动态效果)。...
5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9....
对于有能力进行二次修改的开发者来说,可以通过查看源代码,了解每个部分是如何协同工作的,然后根据需求调整样式、动画速度、触发事件等参数,以满足个性化需求。此外,还可以扩展功能,比如添加过渡动画、实现多级...