本文实例讲述了框架实现的鼠标响应缓冲动画效果。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！DOCTYPE html html html heartheta charset=' utf-8 '/title js动画-缓冲动画/title脚本src=' http :http://libs。百度。com/jquery/1。10 .2/jquery。js '/脚本样式* { margin : 0；padd : 0；字体系列： '微软雅黑} # box { height:100px宽度宽度：100像素背景色-: # 0099 cc；页边距-顶部：200像素；位置：相对；/*速速、缓冲变化*/左侧：-100px；} span { display:block颜色：蓝色；宽度：25 px高度：100 px背景-颜色： # FFFF99位置：绝对；left :100 px }/style/head body div id=' box ' span移动/span/div脚本窗口。onload=function(){ var div 1=document。getelementbyid(' box ')；1区。onmouseover=function(){ startMove(0)；} div 1。onmouseout=function(){ startMove(-100)；} } var计时器=null函数startMove(itar get){ clearInterval(计时器);var div 1=文档。getelementbyid(' box ')；timer=SetInterval(function(){ var speed=(itar get-div 1。offset left)/20；速度=速度0?Math.ceil(速度):路径。地板(速度);if(div 1。offsetleft==itar get){ clearInterval(定时器);} else { div 1。风格。left=div 1。偏移速度“px”；} },30)}/脚本/正文/html更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。