上下切换js
<div class="wview">
<span class="prevs" id="prevs-j"></span> <ul class="JQ-slide-content" id="slide-j">
<li>
<a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a>
<li>
<a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3333D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> </ul> <span class="nexts" id="nexts-j"></span>
</div>
$("#prevs-j").click(function(){
var wrap = $("#slide-j"),
h = wrap.height(),
lis = wrap.find('li').first();
if(!lis.is(":animated")){
lis.animate({'margin-top':'-'+ h + 'px'},1000,function(){
lis.css('margin-top',0).appendTo(wrap);
});
}
});
$("#nexts-j").click(function(){
var wrap = $("#slide-j"),
h = wrap.height(),
lis = wrap.find('li').last();
lis.css('margin-top','-'+ h + 'px').prependTo(wrap);
if(!lis.is(":animated")){
lis.animate({'margin-top':0},1000);
}
});
上下切换js的更多相关文章
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- bootstrap 标签页tab切换js(含报错原因)
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
- 标签切换JS代码
//标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleA ...
- tab选项卡切换(js原生、jQuery )
思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...
- html 原生tab切换js
$("#ulId li").on('click', function () { $("#li-container").children().hide(); $( ...
- jquery封装的图片切换js
原文发布时间为:2010-10-09 -- 来源于本人的百度文章 [由搬家工具导入] http://jquery.malsup.com/cycle/browser.html
- 点击切换JS
$(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...
- weui 多网页切换效果分析
weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...
随机推荐
- 【排障】tomact未能看到网页
[排障]tomact未能看到网页 文:食梦貘 这是几个月前的事情了,那时候我在安装xwiki,需要用到tomcat,但是初次安装好时碰上过一个故障: 安装tomcat后,客户机用IE网址上输入:服务端 ...
- WPF 中的绑定方式
1.元素间的绑定 xaml方式 <Slider Name="slider1" Value="20"/> <TextBlock T ...
- HTML5与CSS3基础教程第八版学习笔记1~6章
第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
- JAXB - Annotations, Class Fields as Attributes: XmlAttribute
Provided that XML lets you represent a data item as a single value, there is no cut-and-dried rule f ...
- 也谈一下Activiti工作流节点的自由跳转
最近在搞openwebflow的工作流节点自由跳转功能,在网上看了一些资料,感觉不是很好,总结原因如下: 直接手动调用SqlSession的操作,感觉会漏掉一些重要的初始化操作(如:启动新节点之后加载 ...
- Cordova+angularjs+ionic+vs2015开发(一)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...
- solr-tomcat 中文乱码
<Connector URIEncoding="UTF-8" port="8080" protocol="HTTP/1.1" conn ...
- 使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型
如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 WebGL, 典型的例如 three.js(http://mrdoob.github.com/three.js/), 但是 WebGL 对 ...
- iOS推送通知流程
①注册推送通知使用方法:registerUserNotificationSettings, registerForRemoteNotifications ④APP发送deviceToken到第三方: ...
- angular2 select change 事件
刚开始这是啥?(wrong!!! change事件会在 选择option行为 之前执行prodDirId,是取不到选择后正确的id值的,取得是选择行为前prodDirId的值(有试过setTi ...