Jquery 动画效果左右移动

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>移动位置的动画</title><script type="text/javascript"src="jquery.js"></script><style type="text/css">body{font-size:13px}.divFrame{border:solid 1px #666;width:168px;text-align:center;}.divFrame .divTitle{background-color:#eee;padding:5px 0px 5px 0px}.divFrame .divContent{width:108px;height:52px;padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;overflow:hidden}.divFrame .divContent .divList{width:162px;position:absolute}.divFrame .divContent .divList span{border:solid 1px #ccc;background-color:red;width:50px;height:50px;float:left;margin-right:2px}.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)}</style><script type="text/javascript">$(function() {$("input:eq(0)").click(function() { //左移按钮点击事件//在3000毫秒内，以动画的形式向左移动520个像素$(".divList").animate({ left: "-=520px" }, 3000);})$("input:eq(1)").click(function() { //右移按钮点击事件//在3000毫秒内，以动画的形式向右移动520个像素$(".divList").animate({ left: "+=520px" }, 3000);})})</script>
</head>
<body><div class="divFrame"><div class="divTitle"><input id="Button1" type="button" value="左移" class="btn" />&nbsp;<input id="Button2" type="button" value="右移" class="btn" /></div><div class="divContent"><div class="divList"><span>1</span><span>2</span><span>3</span></div></div></div>
</body>
</html>

Jquery 动画效果左右移动相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...
前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
文章目录 1 JQuery动画效果 1. 基本效果 2. 滑动效果 3 淡入淡出效果 4 自定义动画 5 动画控制 6 设置 7 事件 7-1 常用事件 7-2 事件绑定 7-3 移除事件 7-4 阻 ...
JavaScript - jQuery动画效果
trigger:触发v.触发器n toggle:触发器.开关n [ jQuery动画结束时的回调函数 ] .hide(1000,function(){alert("123"); } ...
jQuery介绍 jQuery基本使用 jQuery选择器 jQuery样式操作 jQuery动画效果
1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封 ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
jQuery 动画效果
1.基本效果 (1)隐藏 hide() hide(speed [,callback]) (2)显示 show() show(speed [,callback]) (3)交替显示隐藏 toggle() ...
jQuery动画效果animate和scrollTop结合使用实例
animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画.该方法通过CSS样式将元素从一个状态改变为另一个状态. CSS属性值是逐渐改变的,这样就可以创建动画 ...
jQuery学习笔记（三）jQuery动画效果
1.对角线动画效果:让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意: 1. 括号中可以加动画时长(slow normal fast 毫秒数) ...

Jquery 动画效果左右移动

Jquery 动画效果左右移动相关推荐

最新文章

热门文章

Jquery 动画效果 左右移动

Jquery 动画效果 左右移动相关推荐

最新文章

热门文章

Jquery 动画效果左右移动

Jquery 动画效果左右移动相关推荐