精华内容
下载资源
问答
  • jquery 滑动DIV

    2012-08-12 14:22:08
    点击左右按钮,实现图片或者DIV滑动,也可用于手机开发
  • jquery滑动框选div

    2021-06-01 20:18:38
    滑动选择范围内的div,同时支持对div的全选和反选。
  • slideUp() 方法:通过使用滑动效果,隐藏被选元素。 slideDown() 方法:通过使用滑动效果,显示隐藏的被选元素。 children() 方法:返回被选元素的所有直接子元素。 next() 方法:获得匹配元素集合中每个元素紧邻...

    slideUp() 方法:通过使用滑动效果,隐藏被选元素。

    slideDown() 方法:通过使用滑动效果,显示隐藏的被选元素。

    children() 方法:返回被选元素的所有直接子元素。

    next() 方法:获得匹配元素集合中每个元素紧邻的同胞元素。

    parent() 方法:获得当前匹配元素集合中每个元素的父元素。

    siblings()方法: 获得匹配集合中每个元素的同胞。

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    	ul{
    		list-style:none;
    	}
    	div{
    		height:160px;
    		width:200px;
    		background: green;
    		display: none;
    	}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="/3DT/js/jquery-2.1.1.js"></script>
    <script type="text/javascript">
    	$(function(){ 
    		$(".aaa").click(function(){
    			$(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000);
    		})
    	});
    </script>
    </head>
    <body>
    	<ul>
    		<li>
    			<span class="aaa"><a>点击展开div内容01</a></span>
    			<div>内容1111111111</div>
    		</li>
    		<li>
    			<span class="aaa"><a>点击展开div内容02</a></span>
    			<div>内容222222222</div>
    		</li>
    	</ul>
    </body>
    </html>

    效果图:(滑动效果得自己运行此代码)

    点击“点击展开div内容01”时:

    点击“点击展开div内容02”时:

    展开全文
  • jquery滑动

    2013-04-18 16:05:06
    jquery实现DIV流畅的滑动,资源中包含完整的资料,js文件,例子。
  • jquery hover事件鼠标悬停导航条浮动div滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div滑动高亮显示
  • jQuery实现div左右滑动

    千次阅读 2017-08-16 09:30:49
    直接上代码<body> <div class="v_out v_out_p"> <div class="prev"> (0)"> </div> <div class="v_show"> <div class="v_cont">

    直接上代码

    <body>  
            <div class="v_out v_out_p">
            <div class="prev">
                <a href="javascript:void(0)"></a>
            </div>
            <div class="v_show">
                <div class="v_cont">
                    <ul>
                        <li index="0" style="background: #f00">[第1讲]</li>
                        <li index="1" style="background: #ff0">[第2讲]</li>
                        <li index="2" style="background: #f0f">[第3讲]</li>
                        <li index="3" style="background: #999">[第4讲]</li>
                        <li index="4" style="background: #666">[第5讲]</li>
                    </ul>
                </div>
            </div>
            <div class="next">
                <a href="javascript:void(0)"></a>
            </div>
            <ul class="circle">
                <li class="circle-cur">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <script type="text/javascript">
            $(function () {
    
                /*======next======*/
                $(".next a").click(function () { nextscroll() });
    
                function nextscroll() {
    
                    var vcon = $(".v_cont ");
                    var offset = ($(".v_cont li").width()) * -1;
    
                    vcon.stop().animate({ left: offset }, "slow", function () {
    
                        var firstItem = $(".v_cont ul li").first();
                        vcon.find("ul").append(firstItem);
                        $(this).css("left", "0px");
    
                        circle()
    
                    });
    
                };
    
    
                function circle() {
    
                    var currentItem = $(".v_cont ul li").first();
                    var currentIndex = currentItem.attr("index");
    
                    $(".circle li").removeClass("circle-cur");
                    $(".circle li").eq(currentIndex).addClass("circle-cur");
    
                }
    
                //setInterval(nextscroll,2000)
    
                /*======prev======*/
                $(".prev a").click(function () {
    
                    var vcon = $(".v_cont ");
                    var offset = ($(".v_cont li").width() * -1);
    
                    var lastItem = $(".v_cont ul li").last();
                    vcon.find("ul").prepend(lastItem);
                    vcon.css("left", offset);
                    vcon.animate({ left: "0px" }, "slow", function () {
                        circle()
                    })
    
                });
    
                /*======btn====circle======*/
                var animateEnd = 1;
    
                $(".circle li").click(function () {
    
                    if (animateEnd == 0) { return; }
    
                    $(this).addClass("circle-cur").siblings().removeClass("circle-cur");
    
                    var nextindex = $(this).index();
                    var currentindex = $(".v_cont li").first().attr("index");
                    var curr = $(".v_cont li").first().clone();
    
                    if (nextindex > currentindex) {
    
                        for (var i = 0; i < nextindex - currentindex; i++) {
    
                            var firstItem = $(".v_cont li").first();
                            $(".v_cont ul").append(firstItem);
    
                        }
    
                        $(".v_cont ul").prepend(curr);
    
                        var offset = ($(".v_cont li").width()) * -1;
    
                        if (animateEnd == 1) {
    
                            animateEnd = 0;
                            $(".v_cont").stop().animate({ left: offset }, "slow", function () {
    
                                $(".v_cont ul li").first().remove();
                                $(".v_cont").css("left", "0px");
                                animateEnd = 1;
    
                            });
    
                        }
    
                    } else {
    
                        var curt = $(".v_cont li").last().clone();
    
                        for (var i = 0; i < currentindex - nextindex; i++) {
                            var lastItem = $(".v_cont li").last();
                            $(".v_cont ul").prepend(lastItem);
                        }
    
                        $(".v_cont ul").append(curt);
    
                        var offset = ($(".v_cont li").width()) * -1;
    
                        $(".v_cont").css("left", offset);
    
    
                        if (animateEnd == 1) {
    
                            animateEnd = 0;
                            $(".v_cont").stop().animate({ left: "0px" }, "slow", function () {
    
                                $(".v_cont ul li").last().remove();
                                animateEnd = 1;
    
                            });
    
                        }
    
                    }
    
                });
    
            })
    
        </script>
        <style>
            *
            {
                margin: 0px;
                padding: 0px;
                list-style-type: none;
            }
            .v_out
            {
                width: 748px;
                margin: 20px auto;
                overflow: hidden;
            }
            .v_show
            {
                width: 665px;
                overflow: hidden;
                position: relative;
                height: 280px;
                float: left;
            }
            .v_cont
            {
                width: 6650px;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            .v_cont ul
            {
                float: left;
                text-align: center;
                line-height: 50px;
            }
            .v_cont ul li
            {
                width: 665px;
                height: 250px;
                background: #f8f8f8;
                float: left;
                margin-top: 3px;
            }
    
            /*---圆圈---*/
            .v_out_p
            {
                position: relative;
                overflow: visible;
            }
            .circle
            {
                position: absolute;
                left: 40px;
                top: 290px;
            }
            .circle li
            {
                width: 120px;
                height: 60px;
                float: left;
                margin-right: 10px;
                background: #ccc;
            }
            .circle .circle-cur
            {
                background: #f00;
            }
    
            /*---切换---*/
            .prev, .next
            {
                float: left;
                padding: 105px 9px 0;
            }
            .prev a
            {
                background: #f00;
            }
            .prev .ico_1
            {
                background: url(input_a.gif) no-repeat 0 -3757px;
            }
    
            .next a
            {
                background: #f00;
            }
            .next .ico_2
            {
                background: url(input_a.gif) no-repeat right -3757px;
            }
            .prev, .prev a, .next, .next a
            {
                width: 21px;
                height: 28px;
                display: block;
            }
        </style>
        <div style="width: 1200px;height: 100px;background-color: red;"></div>
        </body>
    展开全文
  • jQuery滑动效果

    2018-09-05 11:36:22
    jQuery 滑动方法 通过 jQuery,可以在元素上创建滑动效果。 jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery slideToggle() 方法 jQuery slideToggle() 方法可以在 slideDown() 与 ...

    jQuery 滑动方法

    通过 jQuery,可以在元素上创建滑动效果。

    jQuery 拥有以下滑动方法:

    • slideDown()
    • slideUp()
    • slideToggle()

    jQuery slideToggle() 方法

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    如果元素向下滑动,则 slideToggle() 可向上滑动它们。

    如果元素向上滑动,则 slideToggle() 可向下滑动它们。

    $(selector).slideToggle(speed,callback);

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是滑动完成后所执行的函数名称。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".flip").click(function () {
                    $(".panel").slideToggle("slow");
                })
            })
        </script>
        <style type="text/css">
            div.panel,p.flip{
                margin: auto;
                padding: 5px;
                text-align: center;
                background-color: green;
            }
            div.panel{
                height:120px;
                display: none;
                width: auto;
            }
        </style>
    </head>
    <body>
    <p class="flip">请点击这里</p>
    <div class="panel">
        <p>csdn 博客</p>
        <p>在csdn博客,你可以找到你所需要的博客和知识。</p>
    </div>
    </body>
    </html>

     

    展开全文
  • jquery滑动固定

    2013-06-26 18:42:05
    jquery滑动固定特效,可以在一个div内固定上下,不超出访问,滚动条拖动
  • jQuery 滑动操作

    2018-08-23 16:26:22
    body : &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...jQuery滑动&lt;/title&gt; &lt;script src="jquery.min.js"

    body :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery滑动</title>
        <script src="jquery.min.js"></script>
        <script src="Move.js"></script>
        <style>
            #conteat,#flipshow,#fliphide,#fliptoggle{
                padding: 5px;
                text-align: center;
                background-color: lightblue;
                border: 1px lightblue solid;
            }
            #conteat{
                padding:50px;
                /*
                 display: none; 让内容隐藏
                */
                display: none;
            }
        </style>
    </head>
    <body>
    <div id="flipshow">点击</div>
    <div id="fliphide">隐藏</div>
    <div id="fliptoggle">点击/隐藏</div>
    <div id="conteat"> Hello World</div>
    </body>
    </html>

    js 文件

    $(document).ready(function () {
        $("#flipshow").click(function () {
            // slideDown 显示(执行时间)
            $("#conteat").slideDown(1000);
        });
        $("#fliphide").click(function () {
            // slideUp 隐藏(执行时间)
            $("#conteat").slideUp(1000);
        });
        $("#fliptoggle").click(function () {
            // slideUp 隐藏(执行时间)
            $("#conteat").slideToggle(1000);
        });
    
    });

    这里写图片描述

    展开全文
  • 采用jQuery实现div滑动,滚动条效果 使用鼠标滚轮时间, 代码拙略,希望大家批评指正。哈哈,谢谢
  •  <div class="imgBot"><a ><p class="bt_1">服饰</p><p class="bt_2">封面明星故事</span><span>2015春夏趋势</span><span>我爱海淘</span></p></a></div>       <div class="imgTop"><img /></div>  <div ...
  • jQuery 滑动方法

    千次阅读 2019-04-27 13:15:36
    jQuery 滑动方法可使元素上下滑动。 slideDown() slideUp() slideToggle() <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type=...
  • jquery控制div滑动隐藏和显示

    万次阅读 2012-09-03 19:12:12
    <script type="text/javascript" src = "js/jquery.js"> <script type="text/javascript" src = "js/aa.js"></script> <script type="text/javascript" src = "js/bb.js"></script> <head></head> for...
  • jQuery滑动导航菜单

    2014-07-02 17:13:56
    jQuery滑动导航菜单,鼠标指针经过、离开会产生延时慢动作效果,用户体验良好。
  • jQuery滑动操作

    2018-03-29 15:45:52
    jQuery滑动动作有三种操作,slideDown(),slideUp(),slideToggle().1、slideDown()滑动方法用于向下滑动元素,语法为:$(selector).slideDown(speed,callback);其中speed可以规定效果的时长,分别有”slow“,"...
  • jquery 滑动

    2013-02-22 11:11:00
    jQuery animate() 方法允许您创建自定义的动画。 语法: $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值:...
  • 采用jQuery实现的一个图片展示的小例子,右边采用div滑动产生滚动条,使用鼠标滚轮监听时间,。。。。。。代码拙略希望大家指正
  • jquery实现从屏幕上方滑动显示div。上传只为分享
  • jquery+div实现同时滑动切换的图文展示特效插件下载.rar
  • JQUERY滑动门最简单代码,在主文件里的代码仅仅就是6行 [removed] $(function(){ $("#tags_op div:not(:first)").hide(); $("#tags_op li").each(function(index){ $(this).mouseover( function(){ $("#tags_op...
  • jQuery 滑动改变价格

    千次阅读 2014-04-28 17:18:13
    jQuery 滑动改变价格演示 XML/HTML Codesection id="content" > div class="cube"> div class="a">divdiv class="b">divdiv class="c">divdiv class="d">divdiv id="slider-range-min">div>...
  • jQuery实现div滑动效果

    2012-11-16 19:05:20
     鼠标滑上div的时候,隐藏当前显示的div,显示另一个div,离开的话还原,使用slideUp()和slideDown()即可解决。    需要注意的是,设置延迟的话,离开的时候当前div的时候未到达延迟时间,会导致离开之后div...
  • 主要介绍了移动端jQuery修正Web页面滑动div问题的两则实例,分别针对顶部固定fixed不为0时滑动出现的闪动以及touchmove的受阻止的相关问题,需要的朋友可以参考下
  • jquery 滑动验证码

    千次阅读 2016-11-08 12:00:46
    只获取到滑动时间,滑动的长度。   效果:       html页面   >> 拖动滑块验证 var startTime =0;  varendTime = 0;  varnumTime = 0;  $(function() {  var slider = newSliderUnlock("#sli
  • 这是一款基于jQuery滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便。效果图...
  • jquery 滑动效果

    2014-02-17 15:41:27
    jQuery支持使用下面方法来实现HTML元素的滑动效果:   slideDown() slideUp() slideToggle() slideDown方法 用来实现向下滑动动画效果,其基本语法为:   $(selector).slideDown(speed,callback);   可...
  • jquery滑动效果

    千次阅读 2010-01-15 16:30:00
    <mce:script type="text/javascript" src="../jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $(".box h3")....
  • 主要介绍了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码,通过jQuery相应鼠标事件控制页面元素的动态变换功能,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,158
精华内容 7,663
关键字:

divjquery滑动展开