`
yhc7231
  • 浏览: 1301 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

【JavaScript】运用jQuery实现控件左右移动的三种方法

 
阅读更多
方法一
【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。
[javascript] view plaincopy
<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> 

方法二
[javascript] view plaincopy
<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> 

方法三
[javascript] view plaincopy
<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> 

全部代码
[html] view plaincopy
<!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让控件左右移动的三种实现方法

    方法一 【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。 代码如下: [removed][removed] [removed] $(document).ready(function(){ $(“#right1”).click(function(){ $(“.block1”).animate({...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    打包50种实例的大型树形菜单控件JSTree(基于jQuery)下载 30.打包两款实用jquery+div横向滑动的下滑菜单代码(兼容性好)下载 31.非常帅jquery仿雅虎网超大菜单导航代码 32.分享jquery带阴影效果折叠菜单dropdown...

    超实用的jQuery代码段

    1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...

    jquery 弹出窗口,可缩放,可拖拽

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸...

    jquery.slideControl.js:基于jQuery的滑动控件插件

    #jquery.slideControl.js jquery.slideControl.js 是一个轻量级、响应式、基于 jQuery 的滑动控件插件,它支持嵌入步骤并包括回调功能。演示浏览器支持在 IE6+ 和所有主要桌面和移动浏览器上使用 jQuery v1.9.1 进行...

    基于JQUERY的菜单栏插件

    花生米AJAX-UI系列之:基于JQUERY的GooMenubar工具栏类UI控件0.1版 特点: 可定义四个边框有没有显示 可以enable或者disable一个按钮(这时按钮无法点击了) 工具栏中按钮的图标、文字、点击时触发的事件方法都是...

    JavaScript实例精通

    JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...

    jstree.js Tree控件

    jsTree 是一个 基于 jQuery 的 Tree 控件。支持 XML,JSON,Html 三种数据源。提供创建,重命名,移动,删除,拖 " 放节点操作。可以自己自定义创建,删 除,嵌套,重命名,选择节点的规则。在这些操作上可以添加...

    JogDial.js:用于慢速拨盘控件JavaScript插件

    一个用于慢速拨盘控件JavaScript插件。 JogDial是一个简单JavaScript插件,可帮助您轻松在网页上创建拨号样式控制器。 支持的浏览器和设备 JogDial支持Chrome,Safari,FireFox,Internet Explorer 7+,并且大多数...

    jQuery Smart Tab:灵活的 jQuery 选项卡控件插件-开源

    项目已移动,请在此处查看最新版本 http://techlaboratory.net/jquery-smarttab Smart Tab 是一个灵活的 jQuery(一个 JavaScript 库)Tab Control 插件。

    pickadate是一个移动友好响应和轻量的jQuery日期和时间输入选择器

    pickadate是一个移动友好,响应和轻量的jQuery日期和时间输入选择器

    jQuery攻略.pdf

     第1章 jQuery基础知识 1 1.1 jQuery的安装 1 1.2 选择DOM节点 2 1.3 延迟JavaScript的执行 3 1.4 把CSS应用到元素上 3 1.5 选择一系列非标准的HTML元素 4 1.6 计数DOM节点和显示其文本 5 1.7 获得一个元素的HTML...

    TMS WEB Core for RAD Studio 10.3

    可以使用其他jQuery控件或其他Javascript框架。 在jQWidgets库中为jQuery控件提供Pascal类包装器。 简单的接口,以REST云服务,包括TMS XData数据库。 容易部署 应用程序由HTML和Javascript文件组成,可以轻松地...

    通过Infragistics点燃UI-JavaScript开发

    在jQuery的Ignite UI中,您将找到用于创建引人入胜的业务线Web应用程序的用户体验控件和组件,这些应用程序针对移动和桌面环境的浏览器。 关于jQuery的Ignite UI jQuery的Ignite UI建立在jQuery和jQuery UI上,并与...

    基于JQUERY的WEB在线流程图设计器GooFlow

    折线还可以左右/上下移动其中段。 ? 具有区域划分功能,能让用户更直观地了解哪些节点及其相互间的转换,是属于何种自定义区域内的。 ? 具有标注功能,用橙红色标注某个结点或者转换线,一般用在展示流程进度时。 ...

    jquery-rsSliderLens:UI滑块控件,可放大当前值

    jquery-rsSliderLens 呈现功能强大的输入范围控件。 除了细微的差别外,所有浏览器都以几乎相同的方式呈现&lt;input type="range" /&gt; : 使用此插件,默认情况下,相同的标记呈现为: 或您想像力带给您的几乎任何...

    基于JQUERY的WEB在线流程图设计器GOOFLOW 0.1版

     跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程...

    Telerik UI for JSP 2022.2.510

    Telerik UI for JSP拥有由Kendo UI for jQuery支持的40+ JSP组件,同时通过Kendo UI for jQuery的支持能使用JSP封装包构建现代的HTML5和JavaScript站点及移动应用程序。Telerik UI for JSP拥有创建基于JavaScript和...

    Telerik UI for JSP 2022.1.119

    Telerik UI for JSP拥有由Kendo UI for jQuery支持的40+ JSP组件,同时通过Kendo UI for jQuery的支持能使用JSP封装包构建现代的HTML5和JavaScript站点及移动应用程序。Telerik UI for JSP拥有创建基于JavaScript和...

Global site tag (gtag.js) - Google Analytics