jQuery实现横向带缓冲的水平运动效果(附demo源码下载)


Posted in Javascript onJanuary 29, 2016

本文实例讲述了jQuery实现横向带缓冲的水平运动效果。分享给大家供大家参考,具体如下:

这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果。

点击此处查看在线演示效果。

具体代码如下:

<!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>水平移动</title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#panel").click(function(){
    $(this).animate({left: "500px"}, 3000);
  })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

完整实例代码点击此处本站下载。

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

Javascript 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
JavaScript判断DIV内容是否为空的方法
Jan 29 #Javascript
基于javascript实现listbox左右移动
Jan 29 #Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 #Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 #Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 #Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 #Javascript
javascript实现tab响应式切换特效
Jan 29 #Javascript
You might like
php读取纯真ip数据库使用示例
2014/01/26 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
Destoon实现多表查询示例
2014/08/21 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Ubuntu下安装PyV8
2016/03/13 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python的互斥锁与信号量详解
2019/09/12 Python
QML使用Python的函数过程解析
2019/09/26 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
详解Python yaml模块
2020/09/23 Python
python实现移动木板小游戏
2020/10/09 Python
一封普通求职者的求职信
2013/11/20 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
校庆活动策划方案
2014/06/05 职场文书
党委班子对照检查材料
2014/08/19 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android