Jquery中滑动效果的实现

最近由于做项目一直在做网页,然而想要自己的网页变得更加的炫丽,Jquery就必不可少,今天就来说一下自己刚体验到的几个滑动函数。

1.slideDown函数,可以向下滑动元素。调用的方式是$(selecter).slideDown(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

2.slideUp函数,与slideUp相反,slideUp是向上滑动元素。调用的方式是$(selecter).slideUp(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

3.slideToggle函数,slideToggle函数是slideDown函数和slideUp函数的中和,调用该函数时,如果元素已经向上滑动,那么元素就向下滑动;如果元素已经向下滑动,那么元素就向上滑动,格式为:$(selecter).slideToggle(speed,function())其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数.

下面就是我学习它们的一些例子:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slide</title>
<script src="123/jquery.js" type="text/javascript"></script>
</head>
    <body>
        <input id="test1" type="button" value="dianjiwo"></input>
        <input id="test2" type="button" value="dianjiwo2"></input>
        <p class="flip">打开</p>
        <p class="flip2">关闭</p>
        <div class="panel">
        <p>我叫邓远奇</p>
        <p>hello</p>
        </div> 
        <script type="text/javascript">
        $(document).ready(function(){
             $("#test1").click(function(){
                $(".flip").click(function(){
                    $(".panel").slideDown("fast");
                })
                 $(".flip2").click(function(){
                    $(".panel").slideUp("fast");
                })
                $(".flip").click(function(){
                    $(".panel").slideToggle("fast");
                    $("")
                 })
            })             
        </script>
    </body>
</html>

时间: 2024-08-10 19:15:36

Jquery中滑动效果的实现的相关文章

jquery中动画效果的函数

在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo():把被选元

jQuery中的效果函数方法整尺寸及位置的取和设

1.offset(); 获取位置值: $(selector).offset().left; $(selector).offset().top; 设置位置值: $(selector).offset({top:100:left:100}); 2.height(); 获取元素的高度值: $("selector").height(); 设置元素的高度值: $("selector").height(20); 3.width(); 获取元素当前计算的宽度值:(不包括补白.边框和

jquery中read与js中onload区别

在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的时候需要用到. 1 2 3 window.onload = function(){     // 当网页加载完成后执行这里的代码块 }; 而在jQuery中也有一个对应的函数,即等待网页加载完后执行代码块 1 2 3 $(document).ready(fu

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

JQuery中的动画效果

JQUERY DAY03: * 动画效果 * 显示与隐藏 * show() - 显示 * 无参版本 - 不具有动画效果 * show(speed,callback)有参版本 - 具有动画效果 * speed - 设置动画执行的时长,单位为毫秒 * 三个预定义值 - slow|normal|fast * callback - 当动画执行完毕后执行的函数 * hide() - 隐藏 * 无参版本 - 不具有动画效果 * hide(speed,callback)有参版本 - 具有动画效果 * spee

关于jQuery中实现放大镜效果

1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向大家介绍通过jQuery实现放大镜效果. 目录 实现原理 mousemove事件 相对坐标 background-position属性 mousewheel事件 1.1.2 正文 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位

jquery 如何实现回顶部 带滑动效果

$("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollTop: 0 }, speed); return false; }); 返回顶部:设置为body的scrollTop为0 滑动效果:animate(Jquery的自定义动画) 备注:returnTop为触发返回顶部的元素id

css中overflow滑动效果在IOS中不流畅

最近新作的一个项目中遇到一个问题,有一段很长的表格,手机显示器展示不全,需要做滑动继续展示的效果: OK,很简单,使用overflow-x:auto;谷歌模拟器一切正常,安卓正常,可是打完包在IOS上,滑动效果慢到完全跟随手指的移动而移动,这样是肯定不行的经过百度发现了解决之道: -webkit-overflow-scrolling: touch; 度娘说这句话是启动了硬件加速的特性,所以滑动起来会非常流畅:不过会影响性能:经过测试,发现影响看不出,果断选择用它: 完美解决~~~~~~~

jquery 实现导航栏滑动效果

精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m