jQuery实现的鼠标响应缓冲动画效果示例


Posted in jQuery onFebruary 13, 2018

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

先来看看运行效果:

jQuery实现的鼠标响应缓冲动画效果示例

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>js动画-缓冲动画</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
  font-family:"微软雅黑"
}
#box{
  height:100px;
  width:100px;
  background-color:#0099CC;
  margin-top:200px;
  position:relative;
  /*速速、缓冲变化*/
  left:-100px;
}
span{
  display:block;
  color:blue;
  width:25px;
  height:100px;
  background-color:#FFFF99;
  position:absolute;
  left:100px;
}
</style>
</head>
<body>
  <div id="box">
    <span>移动</span>
  </div>
<script>
window.onload=function(){
  var div1=document.getElementById("box");
  div1.onmouseover=function(){
    startMove(0);
  }
  div1.onmouseout=function(){
    startMove(-100);
  }
}
var timer=null;
function startMove(itarget){
    clearInterval(timer);
    var div1=document.getElementById("box");
    timer=setInterval(function(){
      var speed=(itarget-div1.offsetLeft)/20;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(div1.offsetLeft==itarget){
        clearInterval(timer);
      }else{
        div1.style.left=div1.offsetLeft+speed+"px";
      }
    },30)
}
</script>
</body>
</html>

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 #jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 #jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
You might like
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
解析strtr函数的效率问题
2013/06/26 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
python写入xml文件的方法
2015/05/08 Python
python字符类型的一些方法小结
2016/05/16 Python
Python类的继承和多态代码详解
2017/12/27 Python
python下载库的步骤方法
2019/10/12 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
超市开店计划书
2014/09/15 职场文书
合理化建议书
2015/02/04 职场文书
学风建设主题班会
2015/08/17 职场文书