jQuery让控件左右移动的三种实现方法
方法一
【注】需把控件的 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>
效果图 
相关推荐
-
C语言中的内存泄露 怎样避免与检测
有些程序并不需要管理它们的动态内存的使用.当需要内存时,它们简单地通过分配来获得,从来不用担心如何释放它.这类程序包括编译器和其他一些运行一段固定的(或有限的)时间然后终止的程序.当这种类型的程序终止时,所有内存会被自动回收.细心查验每块内存是否需要回收纯属浪费时间,因为它们不会再被使用. 其他程序的生存时间要长一点.有些工具如日历管理器.邮件工具以及操作系统本事经常需要数日及至数周连续运行,并需要管理动态内存的分配和回收.由于C语言通常并不使用垃圾回收器(自动确认并回收不再使用的内存块),这些
-
jQuery让控件左右移动的三种实现方法
方法一 [注]需把控件的 CSS 的 position 属性设置为 relative 或 absolute. 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script language="javascript"> $(document).ready(function(){ $("#right
-
DropDownList控件绑定数据源的三种方法
本文给大家分享web 中 DropDownList绑定数据源的几种方式,先给大家分享三种常见的方式,具体详情如下所示: 第一种 this.ddltype.DataTextField = "btName";//显示的值 this.ddltype.DataValueField = "btId";//获取dropdownlist中的值 ddltype.DataSource = service.GetBusinessTypeAll(""); this
-
Jquery网页出现的乱码问题的三种解决方法
1.当导入Jquery代码时:网页中其它文字正常,而Jquery代码显示异常.解决方案: 将Jquery代码用文本(.txt)或word打开,再另存为并改变其编码方式(通常改为utf-8或gb2312). 2.当要改ASP.NET中整个网站的编码问题时.在web.config文件中修改< globalization requestEncoding="gb2312" responseEncoding="gb2312"culture="zh-CN&quo
-
Jquery获得控件值的三种方法总结
一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu
-
ANGULARJS中使用JQUERY分页控件
首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控
-
ASP.NET MVC引入JQUERY JQRTE控件
主要步骤如下: 1,在asp.net mvc项目中引入jqrte类库,声明辅助类用于存储服务器端上载文件的信息 复制代码 代码如下: public class ViewDataUploadFilesResult { public string message { get; set; } //public int Length { get; set; } public string imagepath { get; set; } public string error { get; set; }
-
设置jquery UI 控件的大小方法
如下所示: #ui-datepicker-div { font-size: 12px; } 以上这篇设置jquery UI 控件的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
自己动手写的jquery分页控件(非常简单实用)
最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo
-
jQuery控制控件文本的长度的操作方法
在Web项目开发中,有时候会碰到这样一个问题,控件被文本内容撑爆了,但是怎么控制控件文本的的内容呢?可能有的人会用Javascript中的substring对控件显示的文本进行控件,但由于字母大小写,汉字,其它语言等每个字符的大小是不一样的,这导致了同样是substring(0, 10),有的内容小,有的内容大,而想要使用CSS控制控件的宽度时,有时候并不起作用,除非你很精通CSS,否则很难通过CSS控制控件中的文本内容,下面的方法可以解决这个问题. HTML内容,h2中的文本通过jQuery控
-
jquery 分页控件实现代码
复制代码 代码如下: <!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> <title>jquery分页控