编程 Javascript

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 相关文章推荐

根据经纬度计算地球上两点之间的距离js实现代码

Mar 05 Javascript

JavaScript字符串插入、删除、替换函数使用示例

Jul 25 Javascript

javascript阻止浏览器后退事件防止误操作清空表单

Nov 22 Javascript

window.onload追加函数使用示例

Mar 03 Javascript

AngularJS模块学习之Anchor Scroll

Jan 19 Javascript

JS实现点击登录弹出窗口同时背景色渐变动画效果

Mar 25 Javascript

javascript使用 concat 方法对数组进行合并的方法

Sep 08 Javascript

js中变量的连续赋值(实例讲解)

Jul 08 Javascript

Cropper.js 实现裁剪图片并上传(PC端)

Aug 20 Javascript

JavaScript函数绑定用法实例分析

Nov 14 Javascript

详解如何使用 vue-cli 开发多页应用

Dec 16 Javascript

vue2.0 中使用transition实现动画效果使用心得

Aug 13 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