jQuery滑动效果实例
parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。获取的是集合。
HTML 代码:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
jQuery 代码:
$("span").parents("p")
找到每个span的所有是p元素的祖先元素。
find(expr)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
HTML 代码:
<p><span>Hello</span>, how are you?
<span>I'm fine!</span></p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ,
<span>I'm fine!</span>
] siblings(expr) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
jQuery 代码:
$("div").siblings()
结果:
[ <p>Hello</p>, <p>And Again</p> ]
实例效果就是点击按钮,实现图片的切换效果。左右移动。
html代码如下:
<body><div class="v_show"><div class="v_caption"><h2 class="cartoon" title="卡通动漫">卡通动漫</h2><div class="highlight_tip"><span class="current">1</span><span>2</span><span>3</span><span>4</span></div><div class="change_btn"><span class="prev" >上一页</span><span class="next">下一页</span></div><em><a href="#">更多>></a></em></div><div class="v_content"><div class="v_content_list"><ul><li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li><li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li><li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li><li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li><li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li></ul></div></div> </div> </body>
jQuery代码部分:
<script type="text/javascript"> $(function(){var page = 1;var i = 4; //每版放4个图片//向后 按钮$("span.next").click(function(){ //绑定click事件var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素var v_width = $v_content.width() ;var len = $v_show.find("li").length;var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画if( page == page_count ){ //已经到最后一个版面了,如果再向后,必须跳转到第一个版面。$v_show.animate({ left : '0px'}, "slow"); //通过改变left值,跳转到第一个版面page = 1;}else{$v_show.animate({ left : '-='+v_width }, "slow"); //通过改变left值,达到每次换一个版面page++;}}$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");});//往前 按钮$("span.prev").click(function(){var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素var v_width = $v_content.width();var len = $v_show.find("li").length;var page_count = Math.ceil(len / i) ; //只要不是整数,就往大的方向取最小的整数if( !$v_show.is(":animated") ){ //判断“视频内容展示区域”是否正在处于动画if( page == 1 ){ //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");page = page_count;}else{$v_show.animate({ left : '+='+v_width }, "slow");page--;}}//改变数字的样式,先是添加,然后去除,这里是有顺序的。$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");}); });</script>
jQuery滑动效果实例相关推荐
- jQuery滑动效果
1.1 jQuery中的滑动效果 ① slideDown():概述: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配 ...
- android 滚动动画效果代码,Android Scroll滑动效果实例
相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...
- jquery滑动效果及事件切换
1.滑动效果 还有一个slideToggle方法:它的功能可以让元素动态地上滑或者下滑,如若动画是下滑的,它可以动态切换为上滑,如若动画是上滑的,它可以动态切换为下滑 从滑动的变化来看得出以下结论: ...
- python自动化滑动解锁_Python中Selenium模拟JQuery滑动解锁实例
滑动解锁一直做UI自动化的难点之一,我补一篇滑动解锁的例子,希望能给初做Web UI自动化测试的同学一些思路. 首先先看个例子. 当我手动点击滑块时,改变的只是样式: 1.slide-to-unloc ...
- php图片滑动代码,jQuery如何实现图片滑动效果
图片滑动在很多地方都需要,本文主要介绍了jQuery实现图片滑动效果的实例,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 思路:当鼠标进入元素时,触发hover中的第一个函数,离开 ...
- CSS+jQuery实现滑动幻灯片实例详解
HTML部分代码 Start with having a wrapping container div called main_view , and two sections nested insid ...
- 15优秀免费JQuery 图片 滑动效果
免费jquery滑块图片的网站. 滑块插件帮助显示华丽的动画效果. 15优秀免费JQuery 图片 滑块 在这篇文章里,我们想展示你的列表15优秀免费jquery图像滑块插件2015可以使用它来构建一 ...
- php左右滑动翻页代码,C#_NGUI实现滑动翻页效果实例代码,废话不多说了,直接给大家上 - phpStudy...
NGUI实现滑动翻页效果实例代码 废话不多说了,直接给大家上干货了. 具体代码如下所示: using UnityEngine; using System.Collections; public cla ...
- Jquery Mobile左右滑动效果
为什么80%的码农都做不了架构师?>>> 首先,页面里有两个<div data-role="page">,捡重点的写是,省掉其中的header和 ...
最新文章
- JavaMail学习之一-邮件传输协议
- Android之关于Intent的Flag属性的讲解
- 汇编语言 实验10.1 显示字符串
- C指针原理(40)-递归(1)
- mysql-5.6.16-win32_mysql-5.6.16-win32免安装配置方法
- 电脑测速软件_不服跑个分!常见固态硬盘测速工具性价比盘点(上)
- Linux 网络编程八(epoll应用--大并发处理)
- android 5. 蓝牙 mesh,蓝牙mesh组网
- android 百度地图开发 怎么减小包的大小,最新的百度地图Android开发包中,如何隐藏右下角的放大缩小控件...
- JAVA学习篇--Java类加载
- Dubbo(RPC原理、Dubbo架构负载均衡配置方式)(1)
- c++ 优先队列_数据结构 | TencentOStiny中队列、环形队列、优先级队列的实现及使用...
- Cookie、LocalStorage 与 SessionStorage的区别
- Tomcat优化详细教程
- PTA 基础练习答案
- 微信授权 php laraval,Laravel中微信网页授权
- 程序员装b指南(转)
- 布线可视化管理12芯OM3室内多模光缆
- 长春理工大学第八届电子设计大赛 之 开关电源(2)
- 如何把分布式远程总线IO应用到项目中
热门文章
- Java学习笔记(八)--字符串生成器
- 学习笔记Kafka(二)—— Kafka安装配置(1)—— JDKZookeeper安装、Zookeeper 常用操作
- Go中的Map实现机制
- ROS知识 【6】Ubuntu20.04下安装ROS-noetic
- 相关方登记册模板_项目的主要相关方
- 2021-03-29 自动控制-滑模控制 Simulink仿真
- angular中的依赖注入
- 伽卡他卡电子教室 百度百科_怎么创建人物百度百科?人物百度百科创作技巧...
- Vue学习01-v-on事件修饰符
- HAAR、LBP分类器训练