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与google map api结合使用 控件,监听器
Mar 04 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
js保留两位小数方法总结
Jan 31 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
Vue组件生命周期运行原理解析
Nov 25 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python实现数独算法实例
2015/06/09 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
pandas去除重复列的实现方法
2019/01/29 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
详解Python高阶函数
2020/08/15 Python
python爬取代理ip的示例
2020/12/18 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
舞蹈教师自荐信
2014/01/27 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
辩护词范文大全
2015/05/21 职场文书