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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
详解vue中的computed的this指向问题
Dec 05 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
将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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
详解PHP中的PDO类
2015/07/06 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
javascript string字符串优化问题
2011/07/31 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
python调用java的Webservice示例
2014/03/10 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
服务员岗位职责
2014/01/29 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
论群众路线学习笔记
2014/11/06 职场文书
文明倡议书
2015/01/19 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
少年雷锋观后感
2015/06/10 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
Redis分布式锁的7种实现
2022/04/01 Redis
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS