<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>层展开/关闭 - 运动缓冲效果</title>
<script type="text/javascript">
/*
函数名称: Scroll
Scroll(obj, h, s)
参数说明:
obj,[object] id值或对象. 必需
h,[height] 展开后的高度. 可选(默认为200px)
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}.
函数返回值:
true 展开(对象的高度等于展开后的高度)
false 关闭(对象的高度等于原始高度)
*/
function Scroll(obj, h, s){
var h = h || 200;
var s = s || 1.2;
var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
if(obj == undefined){return false;}
var status = obj.getAttribute("status")==null;
var oh = parseInt(obj.offsetHeight);
obj.style.height = oh;
obj.style.display = "block";
obj.style.overflow = "hidden";
if(obj.getAttribute("oldHeight") == null){
obj.setAttribute("oldHeight", oh);
}else{
var oldH = Math.ceil(obj.getAttribute("oldHeight"));
}
var reSet = function(){
if(status){
if(oh < h){
oh = Math.ceil(h-(h-oh)/s);
obj.style.height = oh+"px";
}else{
obj.setAttribute("status",false);
window.clearInterval(IntervalId);
}
}else{
obj.style.height = oldH+"px";
obj.removeAttribute("status");
window.clearInterval(IntervalId);
}
}
var IntervalId = window.setInterval(reSet,10);
return status;
}
window.onload= function(){
var $ = function(id){return document.getElementById(id)};
$('menu').onclick = function(){
Scroll('menu',this.scrollHeight,1.1);
}
$('test').onclick = function(){
Scroll('test',300,1.2);
}
}
</script>
</head>
<body>
<div id="test" style="border:1px solid #f00;width:200px">单击后 展开指定高度 300px</div>
<div id="menu" style="position:absolute;top:10px;left: 400px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;">
单击后 根据展开的高度根据内容而变<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
</div>
</body>
</html>
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/wszhoho/archive/2009/06/03/4238609.aspx
分享到：
相关推荐
标题中的“js实现缓冲运动效果的方法”指出本文将围绕如何利用JavaScript来实现一个元素在移动过程中速度逐渐减慢直至停止的效果。具体来说，这涉及到在网页设计中为元素添加动画效果，使其行为更加自然和符合物理...
标题中的“缓冲动画效果弹出层...总之，这个示例展示了如何利用JavaScript和CSS实现一个具有缓冲动画效果的可拖动弹出层。开发者可以根据自己的需求调整代码，例如修改动画速度、尺寸、颜色等，以适应不同的应用场景。
缓冲效果则是指元素在进入或离开视口时，不是立即显示或消失，而是通过一定的动画过渡，使得视觉变化更加流畅。这种技术在现代网页设计中非常常见，能够提升网页的动态感和专业性。 实现淡入层打开的JavaScript代码...
5. **缓冲效果**：为了增加缓冲效果，可能需要调整动画的缓动函数。jQuery的`animate()`方法允许设置`easing`参数，可以使用内置的`swing`（类似物理运动的缓动）或自定义的缓动函数来实现更个性化的滚动体验。 6. ...
这个"动态带弹性缓冲效果的jQuery提示框插件"是为网页增加交互性和用户体验的一种实用工具。提示框插件通常用于显示通知、警告、错误信息或者进行简单的用户交互。 该插件的核心特性是动态性和弹性缓冲效果。动态性...
以下是一个简单的JavaScript实现步骤： 1. **HTML结构**：在HTML中，我们可以为图片设置一个`data-src`属性，存储真实的图片URL，而`src`属性则设置为一个低质量的占位符或者空白。 ```html 延迟加载图片"> ``` 2...
总的来说，实现网页缓冲效果需要掌握JavaScript基础，特别是DOM操作、事件处理以及定时器的使用。对于初学者来说，理解这些代码可能有一定难度，但通过不断实践和学习，可以从简单的例子开始逐渐掌握更复杂的动态...
实现缓冲效果是JavaScript中非常实用的一个知识点，通过本文的示例，我们可以学习到如何通过数值取整、定时器和一些简单的数学运算来控制元素的运动，使得页面中的动画看起来更加自然。对于有志于深入了解和掌握...
以下是一个简单的示例代码实现返回顶部的缓冲效果： ```html <!DOCTYPE html> ; charset=utf-8" /> 返回顶部缓冲效果示例 /* ...CSS样式... */ <div class="bg"></div> <div id="gotop"><span>返回...
这个例子展示了JavaScript对DOM操作、事件处理和定时器的应用，这些都是JavaScript编程中非常基础且实用的技能。在实际项目中，还可以根据需求进行优化和扩展，比如添加触摸事件支持，以适应移动设备。
在本篇文章中，主要介绍了如何使用JavaScript实现一个带有缓冲效果的仿QQ面板折叠菜单代码。这种效果常见于腾讯QQ软件中的侧边栏或面板的展开和折叠动作。使用JavaScript定时函数递归调用是实现这种缓冲效果的核心...
本实验旨在介绍如何在Java中实现双缓冲，以创建平滑、流畅的图形显示效果。通过这个基础学习，我们可以深入理解Java 2D图形库的应用，并掌握提高应用程序视觉质量的关键技巧。 首先，我们要了解为什么需要双缓冲。...
这种缓冲效果是由jQuery的内置缓动函数自动处理的，无需开发者额外编写复杂的缓动算法。 总的来说，这个jQuery实例提供了一个理解并应用基本动画效果的良好起点。读者可以通过修改`animate()`参数，例如改变移动的...
总的来说，“loading网页正在缓冲图标gif集锦”是一个实用的设计资源库，它不仅提供了现成的加载图标，也为设计者和开发者提供了设计灵感和实践案例。通过巧妙地运用这些图标，可以提升用户的在线体验，使等待变得...
总之，CSS3页面的缓冲加载图片是一种有效的提升用户体验的方法，通过简单的CSS3动画和JavaScript控制，可以在数据加载期间提供视觉反馈，确保用户知道页面正在加载，同时也避免了不必要的操作。
它使用了一个简单的缓冲算法来计算元素应该移动到的位置，算法中的速度变量speed是目标位置和当前位置的差值除以一个固定的数值（在本示例中为20），这样就实现了速度随时间逐渐减慢的缓冲效果。 值得注意的是，...
在菜单的展开和折叠过程中，缓冲效果使得动画更加平滑，提升了用户体验。jQuery的animate()函数可以实现缓冲动画，通过设定时间和缓动函数参数，我们可以定制出各种流畅的过渡效果。 最后，"折叠菜单"是指菜单项在...
这个示例使用了简单的定时器和速度控制来实现缓冲效果，这是一种基础的实现方式，适用于许多基本的动画场景。在实际应用中，可能需要考虑更多的性能优化和兼容性问题，例如使用requestAnimationFrame代替setInterval...
它通过大量简单的图形——粒子——组合起来形成复杂的动态效果。在本案例中，我们将深入探讨如何在DirectX 9中构建一个粒子系统，以实现逼真的烟雾效果。 首先，我们需要理解粒子的基本概念。粒子是具有有限生命期...