[JQ权威指南]移动位置的动画
2016-07-05 10:06
225 查看
<!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> <script type="text/javascript" src="../jquery-2.1.4.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:#eee;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毫秒内,以动画的形式向左移动52个像素 $(".divList").animate({ left: "-=52px" }, 3000); }) $("input:eq(1)").click(function() { //右移按钮点击事件 //在3000毫秒内,以动画的形式向右移动52个像素 $(".divList").animate({ left: "+=52px" }, 3000); }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" value="左移" class="btn" /> <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>
相关文章推荐
- JS(去掉前后空格或去掉所有空格)的用法
- 【算法杂谈】如何寻找出现次数超过50%的数
- DeepLearning之路 (五) CNN
- cf688B-Lovely Palindromes
- nyist_1011 So Easy[II]
- 解决问题的步骤
- 分治策略
- Java环境jdk安装
- PostgreSQL远程连接配置
- Java lambda 以及 Lambda在集合中的使用
- Jtest工具介绍及使用案例
- 在必须创建Activity的情况下又如何让Activity不显示
- 清理iOS工程里无用的图片,可瘦身ipa
- Spring定时任务,Spring4整合quartz2.2,quartz-scheduler定时任务
- javascript:console.log()是什么js库里的?
- C程序之修改Windows的控制台颜色(转载)
- poj 2186 Popular Cows
- 2016.7.5 安防界面layout的相关问题
- Python3 学习手册(二) 流程控制语句
- sql server 2008 代理服务提供的凭据无效