jQuery 实现上下,左右滑动

最新推荐文章于 2021-06-30 11:52:35 发布
最新推荐文章于 2021-06-30 11:52:35 发布
阅读量283 收藏
点赞数
文章标签： javascript xhtml ViewUI
   

前几天的任务:http://t.sina.com.cn/  的下滑效果.

渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白

 

我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.

闲话不多说,上码

Js代码   收藏代码
  1. //isw2 zhouxianglh 2010.07.07  
  2. //移动ul  
  3. var slideOperate = {  
  4.     slideUlId : "",//UL id 用于操作Ul  
  5.     fadeInTime : 2000,//淡出淡入时间  
  6.     slideDownTime : 2000,//滑动时间  
  7.     nextLeft:function(){//往右滑动  
  8.         var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");  
  9.         $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容  
  10.         $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li  
  11.             $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置  
  12.         });  
  13.         $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度  
  14.             lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示  
  15.         }});  
  16.     },  
  17.     nextDown:function(){//往下滑动(前提Ul竖排)  
  18.         var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");  
  19.         $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容  
  20.         $(lastLi).hide();//隐藏最后一个li  
  21.         $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置  
  22.         $(lastLi).slideDown(slideOperate.slideDownTime,function(){  
  23.             lastLi.find("div").fadeIn(slideOperate.fadeInTime);  
  24.         });  
  25.     }  
  26. };  

 HTML页面

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>列</title>  
  6.         <link href="css/slideRow.css" rel="stylesheet" type="text/css" />  
  7.         <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>  
  8.         <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>  
  9.         <script language="javascript" type="text/javascript">  
  10.         $(document).ready(  
  11.             function(){  
  12.                 slideOperate.slideUlId = "ulRowCount";  
  13.                 setInterval("slideOperate.nextLeft()",5000);//定时  
  14.             }  
  15.         );  
  16.         </script>  
  17.     </head>  
  18.     <body>  
  19.         <ul id="ulRowCount">  
  20.             <li class="liRow">  
  21.                 <div class="rowDiv">  
  22.                     你好1  
  23.                     <br />  
  24.                     你好1  
  25.                     <br />  
  26.                     你好1  
  27.                     <br />  
  28.                     你好1  
  29.                     <br />  
  30.                 </div>  
  31.             </li>  
  32.             <li class="liRow">  
  33.                 <div class="rowDiv">  
  34.                     你好2  
  35.                 </div>  
  36.             </li>  
  37.             <li class="liRow">  
  38.                 <div class="rowDiv">  
  39.                     你好5asdfasdf  
  40.                     <br />  
  41.                     你好5  
  42.                     <br />  
  43.                     你好5  
  44.                     <br />  
  45.                     你好5  
  46.                     <br />  
  47.                     <br />  
  48.                     你好5  
  49.                     <br />  
  50.                     <br />  
  51.                     你好5dsfasdfasdfas  
  52.                     <br />  
  53.                 </div>  
  54.             </li>  
  55.         </ul>  
  56.     </body>  
  57. </html>  
                 
  •          
  • WebRoot.zip (16.3 KB)                    
  • 下载次数: 617        
             
lyuharvey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现上下左右滑动的方法
10-24
在jQuery中实现元素的上下左右滑动效果是一种常见的交互设计，尤其适用于移动设备或网页中的导航和切换场景。本示例通过四个按钮控制两个具有相同尺寸的绝对定位的div（#first 和 #sec）进行滑动切换，实现了四种...
动画效果-fadeIn fadeOut淡入浅出
z . s . j
04-16 1605
*{ margin:0; padding:0;}  body{font-size:15px;}  #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;}  .head{ background:#999; padding:5px; cursor:pointer;}  .content{ te
jQuery中通过animate做一个简单的上下滑动的动画案例
chaplinlong的博客
04-22 1万+
先说一下案例的目的。鼠标移动过去时，做上下切换动作，鼠标离开上下切换动作消失。当然，不是简单的展示和关闭。看源代码：<body> <div id="main"> <ul> <li>天空<div>1019</div></li> <li>第三人称<div>1019</div> </li> <li>马甲上的绳<div>1019</div></li> <li>妥协<div
jQuery之动画效果
ajwqb06628的专栏
12-08 759
jQuery之动画效果 1、show()显示效果 　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,...
jquery实现：页面上下滚动效果
我的地盘
07-25 4211
现在的网站流行一个很长的页面，通过滚动条上下移动
jQuery的动画-上下滑动
bwf_erg的博客
01-05 999
三、上下滑动 1.slideDown()：向下滑动元素 2.slideUp()：向上滑动元素 3.slideToggle()：在 slideDown() 与 slideUp() 方法之间进行切换 这个3个方法的使用方法是一样的，这里以slideDown方法为例： $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长。它可以
jQuery简单实现上下,左右滑动的方法
10-22
总结来说，jQuery提供了强大的方法来实现页面元素的动画效果，上下左右滑动是其中非常实用的功能。通过熟练掌握`animate()`等函数，可以更加灵活地控制页面元素的动态变化，从而增强用户交互体验。在实际开发中，...
jQuery上下滑动及左右切换导航
04-07
- 对于水平方向的切换，可以改变元素的`width`属性，配合`animate()`函数实现平滑的左右滑动效果。 为了实现上下滑动及左右切换的导航，我们需要创建HTML结构，通常包含一个父容器（如`.navbar`）和多个子导航项...
（四）jQuery实现元素向上向下滑动效果
北斗星的爱886的博客
06-30 2382
1、slideDown（）方法 slideDown() 方法用于向下滑动元素。 $("button").click(function(){ $("#div").slideDown(); }); 2、slideUp（）方法 slideUp() 方法用于向上滑动元素。 $("button").click(function(){ $("#div").slideUp(); }); 3、slideToggle（）方法 slideToggle() 方法可以在 slideDown() 与 slide
jq实现上下滑动效果
10-01
jq实现页面的上下滑动效果是非常实用的，上下滑动翻页在实际的开发当中也是非常常见的
Jquery实现无缝隙上下左右滚动，超简便代码
08-02
Jquery实现无缝隙上下左右滚动，超简便代码 值得一看的代码
Jquery操作div上下浮动滚动
jiachunfeng的专栏
05-04 6578
将html部分加入到前 将CSS部分加入到CSS文件中 #updown { display:block; left:50%; margin-left:-520px; /*设置横向位置*/ position:absolute; top:40%; /*设置纵向位置*/ } #up { background:url(images/updown.gif) -34px 0
css中的BFC
weixin_48210599的博客
09-11 418
css中的BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 形成BFC的条件 ​ 1、浮动元素，float 除 none 以外的值； ​ 2、定位元素，position（absolute，fixed）； ​ 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； ​ 4、overflow
jquery 上下左右滑动
hukang00的专栏
01-01 1165
不说废话了，很简单，直接上代码。 无标题文档 $(document).ready(function(){ $("#btn").unbind().click(function(){ $("#first").hide(); $("#sec").css("left","-200px").animate({"left":"0px"},500).show();
jQuery -- touch事件之滑动判断（左右上下方向）
热门推荐
星辰大海
12-02 1万+
$("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } }
JqGrid实现超长水平（左右）滚动条功能
程序新视界
05-12 2912
使用JqGrid来实现列表功能非常方便快捷，但在使用的过程中还会遇到一些定制化的问题。这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。 字段较少情况 在字段较少的情况，直接使用即可，无效做其他调整。下面贴一下简单的示例代码： $(function () { $("#jqGrid").jqGrid({ url: baseURL + 'biz/message/list', datatype: "json", c
【easyui】datagrid横向滚动条自动滚动功能
柠檬加冰
05-09 7758
在datagrid的onLoadSuccess函数中，做如下处理//根据当前时刻，判断滚动条滑动的位置 var myDate = new Date(); var hour = myDate.getHours(); //获取当前小时数(0-23) if(hour > 7) {//1-8点无需滑动
jquery移动端图片左右滑动切换
最新发布
05-25
您可以使用touch事件和CSS的transform属性实现移动端图片左右滑动切换，以下是一个简单的示例代码： HTML： ```html ``` CSS： ```css .slider { overflow: hidden; width: 100%; } .slider-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值