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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
几种显示数据的方法的比较
2006/10/09 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python中zip和unzip数据的方法
2015/05/27 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python爬取微信公众号文章
2018/08/31 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
天游软件面试
2013/11/23 面试题
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
家长学校教学计划
2015/01/19 职场文书
降价通知函
2015/04/23 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技