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 相关文章推荐
点图片上一页下一页翻页效果
Jul 09 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
vue.js的提示组件
Mar 02 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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 $_SERVER详解
2009/01/16 PHP
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python练习程序批量修改文件名
2014/01/16 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python实现Dijkstra算法
2018/10/17 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
使用python画社交网络图实例代码
2019/07/10 Python
Django框架视图函数设计示例
2019/07/29 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
助残日活动总结
2014/08/27 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android