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下用gb2312编码解码实现方法
Dec 31 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
记一次react前端项目打包优化的方法
Mar 30 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
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
js重写方法的简单实现
2016/07/10 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
js实现旋转木马效果
2017/03/17 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
原生js实现购物车功能
2020/09/23 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
刑事和解协议书范本
2014/11/19 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记