jquery 特效？jquery插件下载

发布时间：2024-02-15 21:23:42 作者：学习建站知识分类：学生自学的方法有哪些

jquery 页面跳转动画效果

HTML结构

该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。

<main>

<div>

<h1>Page Transition</h1>

<!– your content here–>

</div>

</main>

CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS transform属性将它们隐藏起来（translateY(-100%)/translateY(100%)）。当用户切换页面的时候，这些元素被移动回视口当中（通过在<body>元素上添加.page-is-changing class）。

下面的图片演示了这个过程：

页面切换特效

body::after, body::before{

/* these are the 2 half blocks which cover the content once the animation is triggered*/

height: 50vh;

width: 100%;

position: fixed;

left: 0;

}

body::before{

top: 0;

transform: translateY(-100%);

}

body::after{

bottom: 0;

transform: translateY(100%);

}

body.page-is-changing::after, body.page-is-changing::before{

transform: translateY(0);

}

页面切换时，页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素，并具有相同的背景色，然后在<body>被添加.page-is-changing class的时候，将透明度从0修改为1。

Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小（scaleX(0)）和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

.cd-loading-bar{

/* this is the loading bar- visible while switching from one page to the following one*/

position: fixed;

height: 2px;

width: 90%;

}

.cd-loading-bar::before{

/* this is the progress bar inside the loading bar*/

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 100%;

transform: scaleX(0);

transform-origin: left center;

}

.page-is-changing.cd-loading-bar::before{

transform: scaleX(1);

}

特效中平滑的过渡效果使用CSS Transitions来实现。每一个动画元素都被添加了不同的transition-delay，以实现不同的元素动画顺序。

JAVASCRIPT

该页面切换特效中在链接上使用data-type=”page-transition”属性，用于触发页面切换*。当插件检测到用户点击*，changePage()方法将被执行。

$('main').on('click','[data-type=”page-transition”]', function(event){

event.preventDefault();

//detect which page has been selected

var newPage=$(this).attr('href');

//if the page is not animating- trigger animation

if(!isAnimating) changePage(newPage, true);

});

这个方法会触发页面切换动画，并通过loadNewContent()方法加载新内容。

function changePage(url, bool){

isAnimating= true;

// trigger page animation

$('body').addClass('page-is-changing');

//…

loadNewContent(url, bool);

//…

}

当新的内容被加载后，会替代原来<main>元素中的内容。.page-is-changing class被从body中移除，新加载的内容会被添加到window.history中（使用pushState()方法）。

function loadNewContent(url, bool){

var newSectionName='cd-'+url.replace('.html',''),

section=$('<div class=”cd-main-content'+newSectionName+'”></div>');

section.load(url+'.cd-main-content>*', function(event){

// load new content and replace<main> content with the new one

$('main').html(section);

//…

$('body').removeClass('page-is-changing');

//…

if(url!= window.location){

//add the new page to the window.history

window.history.pushState({path: url},'',url);

}

});

}

为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果，插件中监听popstate*，并在它触发时执行changePage()函数。

$(window).on('popstate', function(){

var newPageArray= location.pathname.split('/'),

//this is the url of the page to be loaded

newPage= newPageArray[newPageArray.length- 1];

if(!isAnimating) changePage(newPage);

});

用jQuery动画来做特效,怎么防止多次点击动画重复的问题

1、在你的点击*中加上一个判断，假设产生动画效果目标的是#aa这个节点，那么你要加上这个判断

if(!$(“#aa”).is(“:animated”)){

//执行你的*作

}

他会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉

2、$(“#aa”).stop(true,false).animate({…},1000);

这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速

说到这里我们解释下stop（）这个函数的用法。

stop是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。

stop在新版jQuery中添加了2个参数：

第一个参数的意思是是否清空动画序列，也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果，一般为false，跳过当前动画效果，执行下一个动画效果；

第二个参数是是否将当前动画效果执行到最后，意思就是停止当前动画的时候动画效果刚刚执行了一般，这个时候想要的是动画执行之后的效果，那么这个参数就为true。否则动画效果就会停在stop执行的时候

3、第三种方法应用就需要设置一个判断是否处于动画的标志，一般是一个点击*执行N多个步骤的动画之后然后跳到下一个动画。

var flag= false;

function aa(){

if(flag) return;//这里指当这个标志flag为真的时候，直接返回，不执行当前的这个动画。

flag=true;//这里是在执行这个动画的最开始的时候把标志flag设置为真，在这个动画没执行完之前这个值一直为真，当下次运行这个函数的时候，由于flag值为真，也不会执行。必须等到这个函数执行完之后才会再次执行这个动画。

……………….

………………..

$(“#aa”).animated({“left”:”100″},1000,function(){

………………….

flag=false;//回到最初始状态，也是也表示这一轮动画执行完毕。

});

}

j*ascript常用的特效有哪些

j*ascript

一种由Netscape的LiveScript发展而来的脚本语言，它提高与J*a的兼容性。J*aScript采用HTML页作为其接口

一、J*ascript在网页的用法

J*ascript加入网页有两种方法：

1、直接加入HTML文档

这是最常用的方法，大部分含有J*ascript的网页都采用这种方法，如：

<!–

document.writeln(“这是J*ascript！采用直接*的方法！”);

//-J*ascript结束–>

</script>

在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language=”J*ascript”>用来告诉浏览器这是用J*ascript编写的程序，需要调动相应的解释程序进行解释。

HTML的注释标签<!–和–>：用来去掉浏览器所不能识别的J*ascript源代码的，这对不支持 J*ascript语言的浏览器来说是很有用的。

//-J*ascript结束：双斜杠表示 J*ascript的注释部分，即从//开始到行尾的字符都被忽略。至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。另外一点需要注意的是，<script>……</script>的位置并不是固定的，可以包含在< head>……</head>或<body>…..</body>中的任何地方。

2、引用方式如果已经存在一个J*ascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：

其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接*方式”中所举例子的效果，可以首先创建一个J*ascript源代码文件“Script.js”，其内容如下：

document.writeln(“这是J*ascript！采用直接*的方法！”);

在网页中可以这样调用程序：<script src＝”Script.js” language=”J*ascript”></script>。

瀑布流布局jquery特效代码怎么用

楼主您好

引入infinitescroll

页面元素

<!–列表标题–>

</div>

</div>

<a></a>

</div>

初始化

var n*igationUrl=”xxxx?pageNo=1″;

$(“#n*igation a”).attr(“href”, n*igationUrl);

$.ajax({

url:'xxxx',

type:'post',

dataType:'json',

success: function(items){

var html= successCallBack(items);//渲染每一个瀑布流块

$('#container').html(html);

error: function(){

alert('加载失败');

}

});

初始化方法调用

$('#container').infinitescroll({

n*Selector:”#n*igation”,//导航的选择器，会被隐藏

nextSelector:”#n*igation a”,//包含下一页链接的选择器

itemSelector:”.block”,//你将要取回的选项(内容块)

debug: true,//启用调试信息

animate: true,//当有新数据加载进来的时候，页面是否有动画效果，默认没有

extraScrollPx: 150,//滚动条距离底部多少像素的时候开始加载，默认150

bufferPx: 40,//载入信息的显示时间，时间越大，载入信息显示时间越短

errorCallback: function(){

//alert('error');

},//当出错的时候，比如404页面的时候执行的函数

localMode: true,//是否允许载入具有相同函数的页面，默认为false

dataType:'json',//可以是json

template: function(items){

itemsTemp= items;

return successCallBack(items);

loading:{

img:'${ctx}/images/loading.gif',

msgText:”加载中…”,

finishedMsg:'没有新数据了…',

selector:'.loading'//显示loading信息的div

}

}, function(){

});

本文链接：http://www.kmjbhy.com/html/87965366.html

不能错过的只有你电影免费观看，不能错过只是你

上一篇 2024-02-15 21:23

110009(110001实时)

下一篇 2024-02-15 21:23

学生自学的方法有哪些

都江堰房屋出租(青城山房屋出租)

都江堰晚上哪里好玩成都都江堰晚上有什么好玩的成都是个不夜城，玩的太多了，都江堰晚上可以去夜游都江堰景区夜景，看了夜景以后可以步行5分钟到西街逛逛，和丽江感觉差不多，只是比较小都江堰有哪些好玩的作为一个都江堰人，可以很负责任的告诉你，其实吧，都江堰地方小，玩的没什么，只有旅游业还过得去。都江堰市区里有个离堆公园AAAAA（都江堰水利工程就在里面），公交车…

2023-11-06
学生自学的方法有哪些

重生之一见倾心(重生之独一无二)

重生之一见倾心txt百度云网盘《重生之一见倾心》百度网盘txt最新全集下载：链接: 提取码：ngh5 《重生之一见倾心》的作者是竹林飞雨。辛酸小养女重生为千金小姐，日子变得舒适起来，是不是更应该有所追求，不然如何对得起老天的厚待？前世没空恋爱，今世桃花盛开，只是我亲爱的那个他，我们真的可以在一起吗？求*现代重生空间文 1.《种田记》 2.《小地主》 …

2024-02-15
学生自学的方法有哪些

天津写字楼网(天津烂尾楼盘有哪些)

天津117大厦真的要成为烂尾楼了吗 2008年是一个大*贬值的一年：512地震，北京奥运会，神舟七号发射成功，还有*喝可乐。就是在这一年，准“*第一高楼”——117大厦，在天津西青区破土动工。从2008年9月10日到2020年9月，117建造十二年未完工，就这么荒在那里，从“*第一高楼”变成了“*最高的烂尾楼”。原因1：题主所说，位置偏僻 2：带不动经济…

2023-11-06
学生自学的方法有哪些

芭乐视频官方下载app？芭乐视频app最近咋下载不了

芭乐视频显示网络异常是什么原因根据查询相关资料信息显示，芭乐视频显示网络异常原因如下： 1、确认是否有网络，在信号强的地方使用。 2、检查帐户是否还有话费。 3、检查USIM卡是否有插好。 4、当月使用流量达到封顶值会自动关闭网络。为什么芭乐视频闪退网络卡顿，内存不足。 1、芭乐视频是一款需要联网进行的软件，用户的网络卡顿就会导致其出现闪退现象，用户仅…

2023-11-04
学生自学的方法有哪些

妖精的尾巴漫画331 妖精的尾巴的各话目录

妖精的尾巴漫画到346话的目录第1话妖精的尾巴第2话“首领*！”第3话火龙神，猿和牛第4话小犬座的星灵第5话 DAY BREAK(日出)第6话潜入!俄坝卢的大宅邸第7话魔法师的弱点第8话璐茜VS俄坝卢公爵第9话献给亲爱的卡比第10话盔甲的魔法师第11话最凶的组合第12话咒歌第13话神笑两次第14话妖精*第15话妖精之尾飘舞风中第16话逮捕影山第17话少女的…

2023-11-04
学生自学的方法有哪些

呼和浩特鲜花速递，海拉尔鲜花速递

顺丰快递一般几天能到顺丰快递有自己的货运飞机，而且跟很多家航空*签约，正常到货时间是1-2天，但也要分具体情况：距离，市内市外，省内省外的时间是不一样，省外正常要第2天或第3天才能到；货物限制，有些限制型产品，比如产品有锂电池，不能走空运，只能走陆运的话，正常是要2-3天以上才能到； 3.大件货物，大件货物如果体积过大，数量过多，顺丰还要另外派专车去送，…

2023-12-04
学生自学的方法有哪些

黔南师院教务处师院

小学教务处年终工作总结1200字范文小学教务处年度工作总结范文本次的年度工作汇报，因为张主任请假，委托我汇报教务处年度的工作。教务处上半年的工作，张主任之前已向学校做过详细的汇报，我参与教务处管理仅半年，所以重点汇报本年度下半年的工作，如有疏漏，敬请大家批评指正。一、团结协作，分工配合，做好教务处日常管理工作开学初，张主任对教务处四位副主任的工作做了安…

2023-11-08
学生自学的方法有哪些

恶作剧之吻2全集求恶作剧之吻2 高清百度云资源

求台版恶作剧之吻第二部百度云资源链接:提取码:bz9i复制这段内容后打开百度网盘手机App，*作更方便哦作品简介：《恶作剧2吻》是*偶像剧《恶作剧之吻》的续集，由郑元畅、林依晨、汪东城领衔主演，改编自日本漫画家多田薰的《淘气小亲亲》。求恶作剧之吻第二部超清百度云谢谢恶作剧之吻1-2季1080P磁力链接： magnet:?xt=urn:btih:B8…

2023-11-01
学生自学的方法有哪些

抗日之红警纵横(抗战之超级红警)

《抗日红警》最新txt全集下载抗日红警 txt全集小说附件已上传到百度网盘，点击免费下载：内容预览：明天野人的学校放假，野人买了国泰航空的机票，定好在明天飞回*，所以这两天事情很多，本来野人每天的空闲时间就少，所以这两天都没时间码字了，估计要到24号才能上传新的章节。其实野人也不想让大家久等，可没办法，飞机上又没有网络，所以，各位关注《抗日红警》的大大，…

2024-02-25
学生自学的方法有哪些

盐城工学院运动会，2019届盐城工学院校运动会日期

盐城工学院有哪些值得加入的社团 1.简介盐城工学院（Yancheng Institute Of Technology，简称盐工），是江苏省属的以工为主的多科性全日制普通本科高校，是教育部“卓越工程师教育培养计划”试点高校，是*“十三五”产教融合发展工程规划项目实施高校。学校位于盐城市，现任*委*方海林、校长邵荣。 2.社团可以参加感兴趣社团，参加各种创新…

2023-11-06