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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jquery左右滑动效果的实现</title>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function () {
- $("#bta").click(function () {
- $("#unit").css("left", "300px");
- document.getElementById("unit").style.left = "300px";
- // var container = document.getElementById("unit");
- // try {
- // container.insertBefore(container.lastChild, container.firstChild)
- // }
- // catch (e) { alert(e); }
- $("#unit").prepend($("#unit>div:last"));
- $("#unit").animate({ "left": 0 }, 500);
- //$("#unit").stop(true, false).animate({ "left": 0 }, 500);
- });
- $("#btb").click(function () {
- $("#unit").animate({ "left": -300 }, 500);
- //$("#unit").stop(true, false).animate({ "left": -300 }, 500);
- function gundong() {
- $("#unit").css("left", "0px");
- //document.getElementById("unit").style.left = "0px";
- $("#unit").append($("#unit>div:first"));
- // var container = document.getElementById("unit");
- // try {
- // container.appendChild(container.firstChild);
- // }
- // catch (e) { alert(e); }
- }//等待动画滚动后执行
- setTimeout(function () { gundong() }, 700);
- })
- });
- </script>
- <style type="text/css">
- *
- {
- padding: 0;
- margin: 0;
- }
- #box
- {
- width: 300px;
- height: 150px;
- margin-bottom: 50px;
- position: relative;
- overflow: hidden;
- }
- #unit
- {
- width: 1200px;
- position: absolute;
- }
- #unit div
- {
- float: left;
- width: 300px;
- height: 150px;
- }
- #bga
- {
- background-color: #F30;
- }
- #bgb
- {
- background-color: #F90;
- }
- #bta, #btb
- {
- float: left;
- width: 50px;
- padding-right: 50px;
- color: #FFF;
- cursor: pointer;
- }
- </style>
- </head>
- <body>
- <div style="width: 800px; height: 300px; padding-top: 100px; background-color: #999;
- margin: 0 auto;">
- <div id="box">
- <div id="unit">
- <div id="bga">
- 框一</div>
- <div id="bgb">
- 框二</div>
- <div id="bgc">
- 框三</div>
- <div id="bgd">
- 框四</div>
- </div>
- </div>
- <div id="bta">
- 左</div>
- <div id="btb">
- 右</div>
- </div>
- </body>
- </html>
jquery左右滑动效果的实现的更多相关文章
- js进阶 13-2 jquery动画滑动效果哪些注意事项
js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...
- jquery 上下滑动效果
<script type="text/javascript"> var myar = setInterval('AutoScroll(".li_gundong ...
- Jquery Mobile左右滑动效果
首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug
jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...
- jquery 如何实现回顶部 带滑动效果
$("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动
今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...
随机推荐
- CSS--字体
通用字体系列 CSS中定义了5种通用字体系列 举例说明:指定通用字体系列 body { font-family:sans-serif;/*如果你希望文档使用一种sans-serif字体而并不关心是哪一 ...
- 从.o文件中提取指定开头依赖于外部接口的脚本
nm -g audio_la-audio.o | grep " U " | awk '{ print $2}' | grep "^gst_"
- 签名有元程序集 Signed Friend Assemblies
下面的例子演示了创建签名程序集和有元程序集.这就要求两个程序集都是强命名,在下面的例子中,两个程序集都用了同一个秘钥,也可以用不同的秘钥. 1. 生成秘钥, 这个在前面的博客中有说明,生成秘钥文件sn ...
- nginx 学习笔记(9) 配置HTTPS服务器--转载
HTTPS服务器优化SSL证书链合并HTTP/HTTPS主机基于名字的HTTPS主机带有多个主机名的SSL证书主机名指示兼容性 配置HTTPS主机,必须在server配置块中打开SSL协议,还需要指定 ...
- CentOS7安装Nginx并部署
服务器IP是192.168.36.136 1.直接yum install nginx即可 2.主配置文件是/etc/nginx/下的nginx.conf,另外一个是/etc/nginx/conf.d/ ...
- 初识Hadoop一,配置及启动服务
一.Hadoop简介: Hadoop是由Apache基金会所开发的分布式系统基础架构,实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS:Hadoo ...
- JavaWeb学习笔记——javabean
- 快速lable内边距
- Django笔记-helloworld
网上的Django资料太乱了,我想写一下自己的学习过程(只记大体过程,有时间就完善).(用eclipse+PyDev工具开发的) 1.项目结构 2.关键代码:(注意缩进,可能贴上来缩进格式等有变化,我 ...
- ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver
ASP.NET WebAPI 08 Message,HttpConfiguration,DependencyResolver Message WebAPI作为通信架构必定包含包含请求与响应两个方法 ...