如何使用JS实现可用于页码更换飞页特效
这次给大家带来如何使用JS实现可用于页码更换飞页特效，使用JS实现可用于页码更换飞页特效的注意事项有哪些，下面就是实战案例，一起来看一下。
这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JS飞入效果</title>
<link rel="stylesheet" href="stylesheets/base.css" rel="external nofollow" >
<style>
body{
background:#000;
}
.header{
width: 100%;
height: 40px;
background:#fff;
font:bold 30px/40px '微软雅黑';
text-align:center;
}
input{
background:#fff;
margin-top:5px;
width: 50px;
height: 20px;
font:bold 12px/20px '微软雅黑';
}
ul{
width: 360px;
height: 360px;
margin:50px auto;
}
ul li{
width: 100px;
height: 100px;
background:skyblue;
float:left;
margin:5px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.children;
//用数组来存放没个li的位置
var arr=[];
//存位置
for(var i=0;i<aLi.length;i++) {
arr[i] = {
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
};
}
//给目前的li定位
for(var i=0;i<arr.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.left=arr[i].left+'px';
aLi[i].style.top=arr[i].top+'px';
aLi[i].style.margin=0;
}
//当点击的时候开定时器，让li一个一个的走
var iNow=0;
var timer=null;
var bReady=false;
oBtn.onclick=function(){
if(bReady){return;}
bReady=true;
timer=setInterval(function(){
move(aLi[iNow],{left:0,top:0,height:0,width:0,opacity:0},{'duration':200,'complete':function(){
if(iNow==arr.length-1){
clearInterval(timer);
back();
bReady=false;
}
iNow++;
}});
},220);
};
function back(){
timer=setInterval(function(){
iNow--;
move(aLi[iNow],{left:arr[iNow].left,top:arr[iNow].top,height:100,width:100,opacity:1},{'duration':200,'complete':function(){
if(iNow==0){
clearInterval(timer);
}
}});
},220);
}
};
</script>
</head>
<body>
<p class="header">飞页效果</p>
<input type="button" value="走你" id="btn1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>运动函数move.js：
/**
* Created by Jason on 2016/11/7.
*/
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
var options=options || {};
var duration=options.duration || 1000;
var easing=options.easing || 'linear';
var start={};
var dis={};
for(name in json){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
//start {width:50,} dis {width:150}
//console.log(start,dis);
var count=Math.floor(duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(name in json){
switch (easing){
case 'linear':
var a=n/count;
var cur=start[name]+dis[name]*a;
break;
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}运行效果如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 如何使用JS实现可用于页码更换飞页特效. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Mengapakah nombor halaman perkataan sama pada setiap halaman? Apakah yang perlu saya lakukan jika nombor halaman perkataan adalah sama pada setiap halaman?
Mar 13, 2024 pm 09:34 PM
Apa masalahnya dengan perkataan nombor halaman yang sama pada setiap halaman? Kita semua menggunakan perisian penyuntingan dokumen dalam kerja harian kita, tetapi ramai pengguna mendapati bahawa nombor halaman pada setiap halaman yang mereka tetapkan adalah sama apabila menggunakan fungsi nombor halaman Biarkan laman web ini memperkenalkannya kepada pengguna secara terperinci nombor halaman perkataan adalah sama pada setiap halaman? Apakah yang perlu saya lakukan jika nombor halaman perkataan adalah sama pada setiap halaman 1. Buka Word, dan kemudian klik pilihan Sisipkan pada bar menu atas. 2. Kemudian klik nombor halaman dan pilih untuk menetapkan format nombor halaman. 3. Kemudian dalam tetingkap yang terbuka, pilih format "pengekodan". 4. Kemudian semak pilihan "Nombor halaman mula", masukkan 1, dan klik "OK"
Bagaimana untuk menetapkan nombor halaman Word supaya halaman ganjil dan genap berbeza di kiri dan kanan?
Mar 13, 2024 pm 06:13 PM
Jika anda ingin menjadikan dokumen kelihatan lebih diperibadikan, anda boleh menetapkan nombor halaman Word menjadi berbeza untuk halaman ganjil dan genap Jadi bagaimana untuk menetapkan nombor halaman kiri dan kanan untuk halaman ganjil dan genap Word menjadi berbeza? Mari lihat tutorial terperinci di bawah Jika anda tidak tahu cara mengendalikannya, teruskan membaca. Kaedah penetapan perkataan: 1. Pertama, kita klik "Sisipkan". 2. Kemudian klik "Footer". 3. Kemudian klik "Edit Footer". 4. Kemudian klik "Halaman Ganjil dan Genap Berbeza". 5. Kemudian cari pengaki halaman bernombor ganjil dan klik "Nombor Halaman". 6. Kemudian kita pilih gaya halaman di sebelah kanan.
Bagaimanakah nombor halaman PPT bermula dari halaman 4 hingga 1? Tutorial penyesuaian nombor halaman PPT
Mar 13, 2024 pm 05:52 PM
Jika PPT mempunyai banyak halaman, anda boleh menambah nombor halaman pada PPT untuk menjadikannya kelihatan lebih teratur. Jadi bolehkah nombor halaman PPT disesuaikan? Bolehkah saya menetapkan nombor halaman bermula dari halaman tertentu dalam PPT? Jika anda tidak mengetahui operasi khusus, anda boleh melihat kaedah tutorial di bawah. Bagaimana untuk menetapkan penomboran ppt untuk bermula dari halaman keempat: 1. Klik "Penomboran Slaid" di bawah menu "Sisipkan". Memasuki halaman tetapan pengepala dan pengaki, kita dapat melihat bahawa nombor slaid tidak disemak secara lalai. 2. Klik untuk menyemak "Nombor Slaid", dan kemudian klik "Gunakan kepada Semua" untuk melengkapkan memasukkan nombor. 3. Anda boleh lihat sisipan dalam gambar di bawah
Bagaimana untuk melaksanakan sistem pengecaman pertuturan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 pm 02:54 PM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.
Mengapakah nombor halaman perkataan sentiasa sama dengan halaman sebelumnya?
Mar 13, 2024 pm 06:28 PM
Semasa mengedit perkataan, anda perlu menambah nombor halaman pada perkataan untuk menjadikannya kelihatan lebih teratur. Walau bagaimanapun, selepas menetapkan nombor halaman, saya mendapati bahawa nombor halaman setiap halaman dokumen adalah sama Masalah ini tidak biasa. Adakah semua nombor halaman Word betul-betul sama? 1. Dalam antara muka "Mula" Word, klik "Nombor Halaman", klik "Halaman Atas" dalam bar menu lungsur turunnya dan pilih nombor biasa "2". 2. Kemudian klik "Nombor Halaman" pada halaman dan klik "Tetapkan Format Nombor Halaman" dalam bar menu lungsur turun&rdq
WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata
Dec 17, 2023 pm 05:30 PM
WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket
Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata
Dec 17, 2023 pm 12:09 PM
Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan
Bagaimana untuk melaksanakan sistem tempahan dalam talian menggunakan WebSocket dan JavaScript
Dec 17, 2023 am 09:39 AM
Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.
