jQuery让控件左右移动的三种实现方法


Posted in Javascript onSeptember 08, 2013

方法一
【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。

<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right1").click(function(){ 
$(".block1").animate({left: '+=50px'}, "slow"); 
}); 
$("#left1").click(function(){ 
$(".block1").animate({left: '-=50px'}, "slow"); 
}); 
}); 
</script>

方法二
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right2").click(function(){ 
$(".block2").css("margin-left","+=50px"); 
}); 
$("#left2").click(function(){ 
$(".block2").css("margin-left","-=50px"); 
}); 
}); 
</script>

方法三
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#right3").click(function(){ 
$(".block3").animate({width:"+=50px"}, 222); 
}); 
$("#left3").click(function(){ 
$(".block3").animate({width:"-=50px"}, 222); 
}); 
}); 
</script>

全部代码
<!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="js/jquery-1.8.0.js"></script> 
<script language="javascript"> $(document).ready(function(){ 
$("#right1").click(function(){ 
$(".block1").animate({left: '+=50px'}, "slow"); 
}); 
$("#left1").click(function(){ 
$(".block1").animate({left: '-=50px'}, "slow"); 
}); 
$("#right2").click(function(){ 
$(".block2").css("margin-left","+=50px"); 
}); 
$("#left2").click(function(){ 
$(".block2").css("margin-left","-=50px"); 
}); 
$("#right3").click(function(){ 
$(".block3").animate({width:"+=50px"}, 222); 
}); 
$("#left3").click(function(){ 
$(".block3").animate({width:"-=50px"}, 222); 
}); 
}); 
</script> 
</head> 
<body style="text-align:center;"> 
<button id="left1">«</button> 
<button id="right1">»</button> 
<div class="block1" id="block" style="position:relative;"> 
<img src="img/csdn_res.jpg"/> 
</div> 
<button id="left2">«</button> 
<button id="right2">»</button> 
<div class="block2" id="block"> 
<img src="img/csdn_res.jpg"/> 
</div> 
<button id="left3">«</button> 
<button id="right3">»</button> 
<div class="block3" id="block"> 
<img src="img/csdn_res.jpg"/> 
</div> 
</body> 
</html>

效果图
jQuery让控件左右移动的三种实现方法
Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 快速排序函数代码
May 30 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
移动节点的jquery代码
Jan 13 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
将Datatable转化成json发送前台实现思路
Sep 06 #Javascript
json数据的列循环示例
Sep 06 #Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 #Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 #Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 #Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 #Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 #Javascript
You might like
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python计算日期之间的放假日期
2018/06/05 Python
浅析python中while循环和for循环
2019/11/19 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
园艺师求职信
2014/04/27 职场文书
水电站项目建议书
2014/05/12 职场文书
计算机系本科生求职信
2014/05/31 职场文书
小学中队活动总结
2015/05/11 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
八年级作文之友情
2019/11/25 职场文书