jquery的slide,jquery概述

jquery全屏滚动插件怎么添加slide样式

1、引入文件

link rel="stylesheet" href="css/jquery.fullPage.css"

script src="js/jquery.min.js"/script

!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 --

script src="js/jquery.easings.min.js"/script

!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 --

script src="js/jquery.slimscroll.min.js"/script

script src="js/jquery.fullPage.js"/script

2、HTML

div id="dowebok"

div class="section"

h3第一屏/h3

/div

div class="section"

h3第二屏/h3

/div

div class="section"

h3第三屏/h3

/div

div class="section"

h3第四屏/h3

/div

/div

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

div class="section active"第三屏/div

同时，可以在 section 内加入 slide，如：

div id="dowebok"

div class="section"第一屏/div

div class="section"第二屏/div

div class="section"

div class="slide"第三屏的第一屏/div

div class="slide"第三屏的第二屏/div

div class="slide"第三屏的第三屏/div

div class="slide"第三屏的第四屏/div

/div

div class="section"第四屏/div

/div

3、JavaScript

$(function(){

$('#dowebok').fullpage();

});

相关问答

Q1: Jquery的.slideUp()效果，鼠标不停经过，它就不停地动，怎么让它别这么频繁地动

$(function(){

$('.pic-box li').hover(

  function(){

   $(this).find('.info-con').stop(true,true).slideDown(155);

  },

  function(){

   $(this).find('.info-con').stop(true,true).slideUp();

  });

  });

这样改就行了，加一个stop(true,true);

Q2: jQuery中slideToggle()这个动作是从上至下的，如何让它从左至右展开？

没有从左往右的API，但是可以用animate来写

style

#aa{width:200px;height:200px;overflow:hidden;background-color:#000;}

/style

div

id="aa"dddddd/div

a

href="javascript:alr();"点击测试/a

//引入jquery.js

script

var

aa=$("#aa");

var

is_on=true;//默认是展开的

var

aw=aa.width();//获取aa的宽度用于还原

function

alr(){

if(is_on){

aa.stop().animate({width:"0px"},300);

}else{

aa.stop().animate({width:aw},300);

}

}

/script

slide效果本身原理也是通过倒计时来逐渐改变元素的高度来做的。所以同理也可以做左右的

Q3: jquery 的 slideUp 的效果 怎么用

您好，尝试复制以下代码到一个普通的html中，就知道slideUp的效果了（来自， ，查看） 【源代码】 !DOCTYPE html

html

head

style

div { background:#3d9a44; margin:3px; width:80px;

height:40px; float:left; }

/style

script src=" "/script

/head

body

Click me!

div/div

div/div

div/div

div/div

div/div

script

$(document.body).click(function () {

if ($("div:first").is(":hidden")) {

$("div").show("slow");

} else {

$("div").slideUp();

}

});

/script

/body

/html

Q4: 为什么jquery中slide Toggle效果没显示出来！！

1、是否引用了jquery框架

2、引用的情况下，试试把js代码放在头部或者底部。

3、还是不行的话，一步一步调试，测试:$(".dian").click(function(){...})是否执行了

4、执行了的话 还是不行? 那么测试是否获取到了"shandian2" 这个id..

注：image标签点击会刷新页面 有一定影响效果 最好不要用这个