jquery 特效，js常用网页特效
JQuery UI如何制作颜色动画
工具/材料
Sublime Text
01
先打开Sublime Text，然后在编辑器中添加HTML5页面，如下图所示，由于页面中中文，所以编码需要设置成utf-8的格式
02
接下来需要下载Jquery UI的库文件，并且在HTML中导入Jquery UI的样式库文件，如下图所示
03
由于颜色动画特效需要JS脚本控制，所以需要导入Jquery的脚本和Jquery ui的脚本，如下图所示。因为Jquery ui是用jquery编写的，所以先导入Jquery文件
04
然后在body标签中添加一个div和一个按钮。Div标签是我们要*作的颜色块，按钮用来触发动画*作，如下图所示
05
接下来在页面中添加style标签，并为上面设置的div颜色块来添加样式，如下图所示
06
然后在script标签中添加我们脚本代码，如下图所示，通过调用animate方法进行动画调用，它可以直接指定颜色块的背景颜色
07
最后，我们运行页面程序，你会在页面中看到一个颜色块和一个按钮，点击按钮以后，颜色块发生变化了，如下图所示
jquery 页面跳转动画效果
HTML结构
该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进度条。
<main>
<div class=”cd-index cd-main-content”>
<div>
<h1>Page Transition</h1>
<!– your content here–>
</div>
</div>
</main>
<div class=”cd-cover-layer”></div><!– this is the cover layer–>
<div class=”cd-loading-bar”></div><!– this is the loading bar–>
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;//回到最初始状态，也是也表示这一轮动画执行完毕。
});
}
本文链接：http://www.cyqvip.com/html/87966191.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
相关推荐
-
山西标准信息网 山西企业标准在哪里查
怎么查山西省特种作业*作证查询 可以在电脑上打开山西省应急管理厅的网站进行查看。进入到该网站以后点击特种作业人员*作证件查询进入。然后输入被查询人员的身份证号码以及姓名即可查询到对应的信息。查询方法如下： 1、在电脑百度上输入山西省应急管理厅，找到其官方网站以后点击进入。 2、进入到山西应急管理厅网站以后下拉页面到底部。 3、在页面底部点击右侧的特种作业*作…
-
天龙八部小说阅读？三联版天龙八部小说免费阅读
求天龙八部全集txt百度云天龙八部（TXT+三联版PDF): *72k.us/dir/22506913-36433033-d1c0fc 另外分享给你《金庸小说全集》，包括PDF和TXT文件: 《金庸小说全集》： *72k.us/file/22506913-411116090 《金庸小说全集》15本小说分开下载：*72k.us/dir/22506913-364…
-
执掌风云最新免费阅读？执掌风云刚刚最新更新小说
萧峥执掌风云免费阅读全文摄影修图电脑如何配置1、首先使用i39100f处理器加华硕H310M主板套装，该配置是性价比非常高的四核处理器。 2、其次选用技嘉GeForceGTX1650OC风神的显卡，该显卡能够使用了大量的平面设计类的后期应用。 3、最后使用飞利浦27英寸原厂LGDIPS2K屏广色域131%sRGB屏幕，该屏幕的广色域能够更好的还原色彩，2k的…
-
网络货币兑换？国内电子货币兑换平台有哪些
国内电子货币兑换平台有哪些 国内没有正规的电子货币兑换平台，目前国内电子货币兑换业务都是由银行垄断的，目前*投资者投资外汇市场的渠道主要分为两种，一种是做国内银行开设的外汇实盘，另一种是通过国*易商在国内的代理机构直接在国外开户，做外汇保证金业务。 电子交易是指在交易市场的主持下，交易会员通过互联网进入交易市场网络交易系统进行报价、签订或转让电子交易合同并通…
-
*电机工程学报 电工技术学报是几区的
*电机工程学报难发吗难发。根据查询*电机工程学报相关资料得知，*电机工程学报难发。《*电机工程学报》创刊于1964年，是由*科学技术协会主管，*电机工程学会主办的电力工业领域学术期刊。学报主要刊登电力系统及其自动化、发电及动力工程、电工电机领域的新理论、新方法、新技术、新成果。 *电机工程学报投稿退修后是什么审稿流程 1.按照审稿人要求修改完毕，提交编辑部主…
-
成都二手手表回收，成都二手手表交易市场在哪里
成都哪里回收手表 成都本地哪有名表回收实体店成都回收表的地方有：振宏易品商贸有限*、腕表之家名表回收*、东龙物资回收有限*、成都变宝再生资源有限*、成都四友物资回收有限*。具体介绍如下： 1、振宏易品商贸有限*： 振宏易品商贸有限*的服务介绍：振宏易品商贸有限*以回收名表、名包、黄金、钻石等奢侈品为主营业务。是一家正规的奢侈品回收平台。专业的鉴定团队、精准的…
-
内蒙古自考招生信息网，内蒙古自考本科报名*入口
内蒙古自学考试证书在哪能查询 内蒙古自学考试证书在哪能查询？ 1.在浏览器搜索“学信网”，点击打开首页，找到并点击“注册”选项，按网站系统提示，填写个人真实信息，注册属于自己的唯一个人帐号; 2.完成个人账号注册的考生，便可点击“学籍查询”，进入学信档案看到有关自己的学历信息了。 如果考生的自考毕业证为真的话，在点击“学历信息”栏目后，便可看到有关于考生自考…
-
漫威假如在线观看(假如漫威电影在线观看)
《漫威假如》在哪个平台看平台如下： 推荐Disney+。动画《假如》是一部脑洞大开的剧集，每集一个主题，全都颠覆了之前漫威电影宇宙发生的故事。动画《假如》共有23集，将于2021年登陆迪士尼流媒体平台Disney+。 简介： 华特迪士尼*（英文简称：DISNEY:，英文名称：The Walt Disney Company，TWDC，中文简称迪士尼或迪士尼*）…
-
华东师范大学主页，华东师范大学邮编是多少
哪里可以找到华东师范大学历史系导师们的*地址谢谢 这个，你知道老师的名字吗？华师大的老师都有个学校的邮箱。就是老师的名姓首字母@院系的特定字母和ecnu*@后面的地址可以看华师大主页。邮箱一栏下拉菜单里可以找的。 但不能确定老师们用不用学校的邮箱。祝你好运~ 华东师范大学是211或985吗 华东师范大学既是211也是985。 华东师范大学是由*举办、教育部主…
-
华北电力大学保定研究生院 华北电力大学211倒数嘛
华北电力大学保定华北电力大学保定研究生院1、华北电力大学保定校区地址2、华北电力大学保定分数3、华北电力大学保定校区的两个校区有什么区别4、华北电力大学保定校区和北京校区的区别？华北电力大学保定校区地址 华北电力大学保定校区地址是：保定市华电路689号。 事实上华北电力大学保定，自布局北京，华北电力大学这所一流华北电力大学保定的电力类高校，便与首都同呼吸，共…
