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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
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
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python3中bytes和string之间的互相转换
2017/02/09 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python文件和文件夹复制函数
2020/02/07 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
个人自我评价分享
2013/12/20 职场文书
班组长岗位职责范本
2014/01/05 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
成立公司计划书
2014/05/07 职场文书
个人安全承诺书
2014/05/22 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
解除合同协议书范本
2016/03/21 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
创业计划书之美容店
2019/09/16 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
什么是SOLID
2022/03/24 Javascript