`
txf2004
  • 浏览: 7131793 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

缓冲效果

F#JavaScriptXHTMLBBS活动 
阅读更多

<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body { font-size:12px}
#box { background:#FFFFCC; border:1px solid #FFCC66; width:600px; height:100px;display:none; text-align:right; margin:2px; overflow:hidden}
#box2 { background:#CDEDEC; border:1px solid #3399CC; width:600px; height:100px;display:none;text-align:right; margin:2px; overflow:hidden}
.bt_down {background: #DDDCE4 url(http://bbs.blueidea.com/images/default/arrow_down.gif) no-repeat 35px 46%; padding:5px 20px 5px 5px; text-align:left}
#my {}
#my .my_ { background:#DDDCE4; width:200px; height:150px; display:none; overflow:hidden}
#my .my_ ul{ list-style:none; padding:0; margin:10px 0 10px 10px; height:140px}
#my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0}
#s_img { width:430px; overflow:scroll; overflow-y:hidden;overflow-x:hidden; border:1px solid #ccc}
#imgs ul { list-style:none; margin-left:0; padding-left:0}
#imgs ul li{ float:left; margin:3px;}
</style>
<script>
//下面重复的类似的我就不做注释了~~
//fast to slow 由快到慢
//声明一个函数f_s()
function f_s(){
var obj=document.getElementById("box");//获取ID为box的对象
obj.style.display="block";//设置对象obj为显示
obj.style.width="1px"; //设置对象obj的宽度为1px
var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里)
var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；
if(obj_w<600){ //判断，如果宽度数值小于600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小
}
else{
clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。
}
}
var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW
}
//slow to fast 由慢到快
//声明一个函数s_f()
function s_f(){
var obj=document.getElementById("box2");
var e_add=1;//初始化递增量
obj.style.display="block";
obj.style.width="1px";
var changeW=function(){//我理解的是创建一个函数直接量并把它存进变量changeW里
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//以后每次递增的值都是
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//随着宽度的变长，递增量越来越大
}
else{
clearInterval(bw);
obj.style.width="600px";//因为(obj_w+e_add)这种计算方法会超出预定义的宽度,所以这里在缓冲完以后重新设置它的宽度.造成一种假象哈哈
}
}
var bw=window.setInterval(changeW,1)
}
//关闭层
function closeW(id,w){
var obj=document.getElementById(id);//获取ID为box的对象
obj.style.width=w;
var closeDiv=function(){
var obj_w=parseInt(obj.style.width);
if(obj_w>1){
obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小
}
else{
clearInterval(bw);
obj.style.display="none";
}
}
var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW
}
//下面这个函数是打开我的↓
function open_my(){
var obj=document.getElementById("my_");//获取ID为box的对象
obj.style.display="block";//设置对象obj为显示
obj.style.width="1px"; //设置对象obj的宽度为1px
obj.style.height="1px";
var changeW=function(){ //(关于函数这一点，什么闭包，什么类、原型的，弄的我头大了，以后慢慢理解吧。这里我理解的是创建一个函数直接量并把它存进变量changeW里)
var obj_w=parseInt(obj.style.width);//把对象的宽度转换为一个数值，并存入变量obj_w中；
var obj_h=parseInt(obj.style.height);
if(obj_w<200 && obj_h<150){ //判断，如果宽度数值小于600
obj.style.width=(obj_w+Math.ceil((200-obj_w)/20))+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小
obj.style.height=(obj_h+Math.ceil((150-obj_h)/15))+"px";
}
else{
clearInterval(bw);//如果大于等于600的话，不再执行setInterval,意思就是这个时候停止增加宽度了。
}
}
var bw=window.setInterval(changeW,1)//每0.001秒调用一次changeW
}
//下面这个函数是关闭我的↓显示出来的层
function close_my(id){
var obj=document.getElementById(id);//获取ID为box的对象
var closeDiv=function(){
var obj_w=parseInt(obj.style.width);
var obj_h=parseInt(obj.style.height);
if(obj_w>1 && obj_h >1){
obj.style.width=(obj_w-Math.ceil(obj_w)/20)+"px";//计算对象的宽度。。。随着宽度的变长，递增量越来越小
obj.style.height=(obj_h-Math.ceil(obj_h)/15)+"px";
}
else{
clearInterval(bw);
obj.style.display="none";
}
}
var bw=window.setInterval(closeDiv,1)//每0.001秒调用一次changeW
}
</script>
<body>
首先我要说的是,这些文章是献给和我一样想要学习的菜鸟们.<br /><br />
论坛里有几位朋友发过缓冲效果,但是象我这种菜鸟看他们的代码实在是一种痛苦,因为不是一个层次的.<br /><br />
所以我用最最冗余的代码来写出这种效果,目的就是希望菜鸟们能看懂,<br /><br />
当我们不菜的时候我们再回头去看高手们的东西.<br /><br />
最后,请相信这句话:<br /><br />
有一天菜鸟也会成为高手,(前提是你要努力哈哈^^)<br /><br />
<a href="#" onclick="f_s()">由快到慢</a> <br /><br />
<a href="#" onclick="s_f(); return false">由慢到快</a> <br /><br />
<div id="box" ><h3>快->慢<a href="#" onclick="closeW('box','600px')">[关闭]</a></h3></div>
<div id="box2" ><h3>慢->快<a href="#" onclick="closeW('box2','600px')">[关闭]</a></h3></div>
<h3>我们既然做出这种效果了，就要把它应用到实际当中去</h3>
<h3>现在来看一下缓冲效果在实际当中的应用</h3>
<div id="my">
<a href="#" class="bt_down" onmouseover="open_my()">我的</a>
<div class="my_" id="my_" >
<ul>
<li>我的话题</li>
<li>我的收藏</li>
<li>我的权限</li>
<li>我的投票</li>
<li>我的活动</li>
<li>我的同城</li>
<li>我的作品</li>
<li>我的地址</li>
<li>我的专长</li>
<li>我的好友</li>
<li>我的空间</li>
<li><a href="#" onclick="close_my('my_')">关闭</a></li>
</ul>
</div>
</div>
<br />
<br />
<div id="s_img" style="width:430px;">
<div id="imgs" style="width:1700px;">
<ul>
<li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8421_20080902_112516_6677857_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/09/01/work_352426_8413_20080901_201448_1164245_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/08/29/work_291488_8330_20080829_151402_6235352_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8423_20080902_115301_643310_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/08/30/work_23709_8344_20080830_123900_9878235_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/09/01/work_387129_8408_20080901_180829_5234680_t.png" /></li>
<li><img src="http://case.blueidea.cn/files/2008/08/31/work_443685_8362_20080831_093043_8349305_t.jpg" /></li>
<li><img src="http://case.blueidea.cn/files/2008/09/01/work_202433_8401_20080901_163123_1710510_t.jpg" /></li>

</ul>
</div>
</div><br />
<a href="#" onclick="scrol(); return false">向左滚动</a>
<a href="#" onclick="scror(); return false">向右滚动</a><br /><br />
当然,上面这种效果只是我用来演示缓冲效果的,<br /><br />
它并不适合做这种效果,因为我这里写的函数只会转一次.<br /><br />
多次的话用这种方法好象不是很好实现,<br /><br />
最后我说一下,不要被我这里的代码吓跑,<br /><br />看上去代码很多,主要是后面2个列子的原因使代码看起来很多<br /><br />
真正重要的是f_s(),s_f(),closeW()<br /><br />
如果能够看明白,那么你也可以举一反三了.<br /><br />
今天就说到这里了,希望这些东西能对你有一点帮助^^<br /><br />
by 褪色<br /><br />
<script type="text/javascript">
function scror(){
var obj=document.getElementById("s_img");
var h=function(){
var obj_w=parseInt(obj.style.width);
if(obj.scrollLeft<obj_w){
obj.scrollLeft=(obj.scrollLeft+Math.ceil((obj_w-obj.scrollLeft)/15));
}
else{
clearInterval(bw);
}
}
var bw=window.setInterval(h,1)
}
function scrol(){
var obj=document.getElementById("s_img");
var h=function(){
var obj_w=parseInt(obj.style.width);
if(obj.scrollLeft>1){
obj.scrollLeft-=Math.ceil(obj_w)/50;
}
else{
clearInterval(bw);
}
}
var bw=window.setInterval(h,1)
//obj.scrollLeft-=parseInt(obj.style.width);
}
</script>
</body>
</html>

http://www.corange.cn/archives/2008/11/2149.html

分享到：
| 招商银行购物网站的产品展示效果，循环播放
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    页面载入缓冲效果，页面缓冲特效

    在网页设计中，用户体验是至关重要的一个环节，而页面载入缓冲效果就是提升用户体验的一种巧妙方式。当用户点击链接或提交表单时，他们通常希望看到的不是枯燥无味的空白页面，而是有一个动态的、视觉上吸引人的加载...

    实用的jquery 折叠菜单 带缓冲效果，3种效果

    接着，我们探讨“缓冲效果”：缓冲效果是指在菜单展开或收起时，不是瞬间完成，而是有一个平滑的过渡过程，这通常通过CSS3的过渡效果或jQuery的动画函数来实现，以增加视觉吸引力和流畅性。 第一种效果：基础缓冲...

    带有缓冲效果的jquery打开和关闭层代码

    本示例中的"带有缓冲效果的jquery打开和关闭层代码"是利用jQuery实现的一种视觉效果，当打开或关闭层（通常称为弹窗或对话框）时，会有一种平滑的过渡动画，即缓冲效果。这种效果可以提高用户体验，使界面看起来更加...

    自动播放——Js幻灯片缓冲效果.rar

    自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar自动播放——Js幻灯片缓冲效果.rar

    缓冲效果返回顶部源代码

    本主题聚焦于一个特定的实现方式——"缓冲效果返回顶部"，这是一种更加平滑、优雅的滚动体验，而不是瞬间跳转到页面顶部。这种效果通常通过JavaScript实现，它可以模拟物体减速直至静止的过程，让页面滚动更加自然，...

    一款很好的缓冲效果下拉菜单

    标题中的“一款很好的缓冲效果下拉菜单”指的是一个具有平滑动画过渡的下拉菜单设计，这种设计在用户交互时可以提供更好的用户体验。在网页设计中，缓冲效果通常指的是通过平滑过渡或渐进加载来改善用户界面动态展示...

    一个缓冲区的动态库 （比如看电影时的缓冲效果 源代码）

    在这个场景下，源代码可能展示了如何实现类似看电影时的缓冲效果，即在视频播放前预先加载一部分数据，以减少播放过程中的停顿或卡顿。 缓冲区的基本思想是存储暂时不需要立即处理但未来会用到的数据。在视频播放中...

    点击图片或文字显示隐藏层，带缓冲效果（动画效果）

    本文将深入探讨“点击图片或文字显示隐藏层，带缓冲效果（动画效果）”这一主题，以及与之相关的“显示层”、“隐藏层”、“缓冲”和“动画”知识点。 首先，我们需要理解“显示层”和“隐藏层”的概念。在网页或...

    jquery弹出div加缓冲效果

    在本教程中，我们将探讨如何利用 jQuery 实现 div 的弹出并加上缓冲效果，以实现更加平滑且吸引人的用户体验。 首先，让我们了解“缓冲效果”在动画中的含义。缓冲效果，通常被称为“缓动”，是一种让元素在移动或...

    网站右击带缓冲效果弹出菜单

    "网站右击带缓冲效果弹出菜单"就是一个旨在增强用户交互体验的功能。这种功能通常使用JavaScript（JS）和层叠样式表（CSS）来实现，使得用户在鼠标右键点击网页时，弹出的菜单不会瞬间显示，而是有一个平滑的过渡...

    45种JavaScript缓冲效果集合演示

    在标题“45种JavaScript缓冲效果集合演示”中提到的“缓冲效果”，通常指的是动画平滑过渡的技术，这在网页设计中至关重要，因为它们能够提升用户体验，使页面元素的移动看起来更自然流畅。 缓冲效果主要通过调整...

    android边下载边播放音乐，有播放进度和缓冲效果

    本文将深入探讨如何在Android应用中构建这样一个系统，包括音乐下载、播放进度显示以及缓冲效果的实现。 首先，我们需要一个后台服务来处理音乐的下载任务。这个服务可以使用Android的DownloadManager类，它可以...

    缓冲效果--打开关闭层

    修改JQUERY的效果，很漂亮。可以关闭的，有缓冲效果。

    纵向下拉二级导航带缓冲效果，一级高亮，完整类

    "纵向下拉二级导航带缓冲效果，一级高亮，完整类"这个项目是针对这种需求的一个解决方案，它提供了一种高效的导航设计，使得用户在浏览网站或应用时能够更方便地访问深层次的内容。下面将详细阐述这一技术实现的各个...

    html5 缓冲效果 响应式布局

    在网页加载过程中，缓冲效果能平滑地展现内容的加载过程，提升用户体验。这通常通过JavaScript或者CSS3来实现。例如，使用JavaScript的`requestAnimationFrame`函数，可以创建流畅的动画效果，使内容逐渐呈现，而...

    一种具有缓冲效果的模具加工装置的制作方法.docx

    该文档介绍的是一种创新的模具加工装置，设计目的是提供一种具有缓冲效果的设备，以解决在模具加工过程中工作台因受力过大而产生晃动、影响使用寿命的问题。该装置主要包含以下几个关键部件和设计特点： 1. **缓冲...

    j2me最新滚动菜单（带缓冲效果）

    本主题聚焦于"j2me最新滚动菜单（带缓冲效果）"，这涉及到在J2ME环境中创建动态、流畅的用户界面元素，尤其是菜单的滚动机制。 滚动菜单是移动应用中常见的一种交互设计，用户可以通过上下滑动来浏览菜单项。在这个...

    jQuery 三级下拉横向菜单 动感缓冲效果.rar

    《jQuery 三级下拉横向菜单：动感缓冲效果详解》 在网页设计中，交互性和用户体验是至关重要的元素，而下拉菜单则是实现这一目标的重要工具。"jQuery 三级下拉横向菜单 动感缓冲效果"就是一个这样的解决方案，它将...

    动态带弹性缓冲效果的jQuery提示框插件.zip

    这个"动态带弹性缓冲效果的jQuery提示框插件"是为网页增加交互性和用户体验的一种实用工具。提示框插件通常用于显示通知、警告、错误信息或者进行简单的用户交互。 该插件的核心特性是动态性和弹性缓冲效果。动态性...

    as3 滚动条控制元件移动 带缓冲效果

    由于带滚动条的动态文本框无法竖着显示文字，于是通过把文本框转换成元件，遮罩层盖在内容层上，实现拉滚动条，元件左右移动，在遮罩层的帮助下，实现竖排文字左右移动的效果，然后通过代码加入移动的缓冲效果，注意...

Magicbox
Global site tag (gtag.js) - Google Analytics