<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>缓冲</title>
<style>
.divname{ width:400px; height:100px;overflow:hidden;background:#f30; margin:0 auto;}
span{float:left;display:block;padding:5px; cursor:pointer;}
</style>
<script>
//选择器
function $(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
//========================================================================
//id：对象id
//butid：按钮id
//dir：1为水平方式，2为上下方式
//fnum：最终目标值
//mouse：鼠标事件
//sp：速度
var tt;
function Unfold(id,butid,dir,fnum,mouse,sp){
$(butid)[mouse]=function(){clearInterval(tt);tt=setInterval(mov,5);} //鼠标事件执行效果
function mov(){
var idwh=(dir==1)?parseInt($(id).offsetWidth):parseInt($(id).offsetHeight); //得到容器的宽或高
var v=(fnum<idwh)?Math.floor((fnum-idwh)/sp):Math.ceil((fnum-idwh)/sp); //算出每次运动量
(dir==1)?$(id).style.width=idwh+v+"px":$(id).style.height=idwh+v+"px";
if (v==0){clearInterval(tt);}
$("abc").innerHTML=idwh+"<br>";
}
}
</script>
</head>
<body>
<div style="clear:both; height:30px;">
<span id="but1">左右展开</span>
<span id="but2">左右缩起</span>
<span id="but3">上下展开</span>
<span id="but4">上下缩起</span>
<span id="abc"></span>
</div>
<div class="divname" id="divid"></div>
<script>Unfold("divid","but1",1,900,"onclick",6);</script>
<script>Unfold("divid","but2",1,10,"onclick",6);</script>
<script>Unfold("divid","but3",2,500,"onclick",6);</script>
<script>Unfold("divid","but4",2,10,"onclick",6);</script>
</body>
</html>
分享到：
相关推荐
在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...
接着，我们探讨“缓冲效果”：缓冲效果是指在菜单展开或收起时，不是瞬间完成，而是有一个平滑的过渡过程，这通常通过CSS3的过渡效果或jQuery的动画函数来实现，以增加视觉吸引力和流畅性。 第一种效果：基础缓冲...
本示例中的"带有缓冲效果的jquery打开和关闭层代码"是利用jQuery实现的一种视觉效果，当打开或关闭层（通常称为弹窗或对话框）时，会有一种平滑的过渡动画，即缓冲效果。这种效果可以提高用户体验，使界面看起来更加...
自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar
本主题聚焦于一个特定的实现方式——"缓冲效果返回顶部"，这是一种更加平滑、优雅的滚动体验，而不是瞬间跳转到页面顶部。这种效果通常通过JavaScript实现，它可以模拟物体减速直至静止的过程，让页面滚动更加自然，...
标题中的“一款很好的缓冲效果下拉菜单”指的是一个具有平滑动画过渡的下拉菜单设计，这种设计在用户交互时可以提供更好的用户体验。在网页设计中，缓冲效果通常指的是通过平滑过渡或渐进加载来改善用户界面动态展示...
在这个场景下，源代码可能展示了如何实现类似看电影时的缓冲效果，即在视频播放前预先加载一部分数据，以减少播放过程中的停顿或卡顿。 缓冲区的基本思想是存储暂时不需要立即处理但未来会用到的数据。在视频播放中...
本文将深入探讨“点击图片或文字显示隐藏层，带缓冲效果（动画效果）”这一主题，以及与之相关的“显示层”、“隐藏层”、“缓冲”和“动画”知识点。 首先，我们需要理解“显示层”和“隐藏层”的概念。在网页或...
在本教程中，我们将探讨如何利用 jQuery 实现 div 的弹出并加上缓冲效果，以实现更加平滑且吸引人的用户体验。 首先，让我们了解“缓冲效果”在动画中的含义。缓冲效果，通常被称为“缓动”，是一种让元素在移动或...
"网站右击带缓冲效果弹出菜单"就是一个旨在增强用户交互体验的功能。这种功能通常使用JavaScript（JS）和层叠样式表（CSS）来实现，使得用户在鼠标右键点击网页时，弹出的菜单不会瞬间显示，而是有一个平滑的过渡...
在标题“45种JavaScript缓冲效果集合演示”中提到的“缓冲效果”，通常指的是动画平滑过渡的技术，这在网页设计中至关重要，因为它们能够提升用户体验，使页面元素的移动看起来更自然流畅。 缓冲效果主要通过调整...
本文将深入探讨如何在Android应用中构建这样一个系统，包括音乐下载、播放进度显示以及缓冲效果的实现。 首先，我们需要一个后台服务来处理音乐的下载任务。这个服务可以使用Android的DownloadManager类，它可以...
修改JQUERY的效果，很漂亮。可以关闭的，有缓冲效果。
"纵向下拉二级导航带缓冲效果，一级高亮，完整类"这个项目是针对这种需求的一个解决方案，它提供了一种高效的导航设计，使得用户在浏览网站或应用时能够更方便地访问深层次的内容。下面将详细阐述这一技术实现的各个...
在网页加载过程中，缓冲效果能平滑地展现内容的加载过程，提升用户体验。这通常通过JavaScript或者CSS3来实现。例如，使用JavaScript的`requestAnimationFrame`函数，可以创建流畅的动画效果，使内容逐渐呈现，而...
该文档介绍的是一种创新的模具加工装置，设计目的是提供一种具有缓冲效果的设备，以解决在模具加工过程中工作台因受力过大而产生晃动、影响使用寿命的问题。该装置主要包含以下几个关键部件和设计特点： 1. **缓冲...
本主题聚焦于"j2me最新滚动菜单（带缓冲效果）"，这涉及到在J2ME环境中创建动态、流畅的用户界面元素，尤其是菜单的滚动机制。 滚动菜单是移动应用中常见的一种交互设计，用户可以通过上下滑动来浏览菜单项。在这个...
《jQuery 三级下拉横向菜单：动感缓冲效果详解》 在网页设计中，交互性和用户体验是至关重要的元素，而下拉菜单则是实现这一目标的重要工具。"jQuery 三级下拉横向菜单 动感缓冲效果"就是一个这样的解决方案，它将...
这个"动态带弹性缓冲效果的jQuery提示框插件"是为网页增加交互性和用户体验的一种实用工具。提示框插件通常用于显示通知、警告、错误信息或者进行简单的用户交互。 该插件的核心特性是动态性和弹性缓冲效果。动态性...
由于带滚动条的动态文本框无法竖着显示文字，于是通过把文本框转换成元件，遮罩层盖在内容层上，实现拉滚动条，元件左右移动，在遮罩层的帮助下，实现竖排文字左右移动的效果，然后通过代码加入移动的缓冲效果，注意...