Contoh lengkap JS CSS meniru antara muka dail telefon mudah alih skrin sentuh dan kemahiran simulasi

Rumah

hujung hadapan web

tutorial js

Contoh lengkap JS CSS meniru antara muka dail telefon mudah alih skrin sentuh dan kemahiran simulasi_javascript fungsi

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

css js

Contoh dalam artikel ini menerangkan kaedah melaksanakan CSS JS untuk meniru antara muka pad dail telefon mudah alih skrin sentuh dan simulasi fungsi. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Mula-mula, mari kita lihat pada paparan operasi:

Kod pelaksanaan khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿安卓手机拨号界面按键特效</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* Current Tab */
$('.phone-tabs li a').click(function() {
$('.phone-tabs li').removeClass('current');
$(this).parent().addClass('current');
});
/* Simple Tab */
var tabContents = $('.phone-tab-contents');
$('.phone-tabs .getphone').click(function() {
tabContents.removeClass('getpeoples');
tabContents.removeClass('getclock');
});
$('.phone-tabs .getclock').click(function() {
tabContents.removeClass('getpeoples');
tabContents.addClass('getclock');
});
$('.phone-tabs .getpeoples').click(function() {
tabContents.removeClass('getclock');
tabContents.addClass('getpeoples');
});
/* Delete */
$('.delete-btn').click(function() {
var numbers = $('.number-area .numbers').text();
var numbers2 = $('.number-area .numbers').text().length;
$('.number-area .numbers').text(numbers.substr(0, numbers2 - 1));
});
/* Pusher */
var pusher = {
number: function(num) {
$('.numbers-container .pushed' + num + '').click(function() {
$('.number-area .numbers').append('' + num + '');
});
}
}
pusher.number(1);
pusher.number(2);
pusher.number(3);
pusher.number(4);
pusher.number(5);
pusher.number(6);
pusher.number(7);
pusher.number(8);
pusher.number(9);
pusher.number(0);
$('.numbers-container .pushedasterisk').click(function() {
$('.number-area .numbers').append('*');
});
$('.numbers-container .pushednumber').click(function() {
$('.number-area .numbers').append('#');
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
::selection{
background:transparent;
}
body{
color:#4196b7;
font:normal 12px arial,sans-serif;
}
.nexus{
position:relative;
margin:10px auto;
width:314px;
height:600px;
border-radius:80px / 40px;
border-top:3px solid #222;
background:#6d6d6b;
background:-moz-linear-gradient(left, #6d6d6b 0%, #3b3b3c 1%, #979797 3%, #686868 4%, #2e2e2e 100%);
background:-webkit-gradient(linear, left top, right top, color-stop(0%,#6d6d6b), color-stop(1%,#3b3b3c), color-stop 
(3%,#979797), color-stop(4%,#686868), color-stop(100%,#2e2e2e));
background:-webkit-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:-o-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:-ms-linear-gradient(left, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
background:linear-gradient(to right, #6d6d6b 0%,#3b3b3c 1%,#979797 3%,#686868 4%,#2e2e2e 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6b', endColorstr='#2e2e2e',GradientType=1 );
}
.nexus:before{
position:absolute;
content:'';
z-index:-1;
top:-6px;
left:0px;
background:#babbbb;
width:314px;
height:78px;
border-radius:25% / 45%;
border-top:1px solid #444;
}
.nexus:after{
position:absolute;
content:'';
z-index:-1;
bottom:-5px;
left:0px;
background:#babbbb;
width:314px;
height:78px;
border-radius:25% / 45%;
border-bottom:2px solid #555;
}
.speaker{
position:absolute;
left:0px;
top:0px;
width:65px;
height:5px;
background:#333;
left:50%;
margin-left:-33px;
border-radius:0 0 6px 6px;
border:1px solid #474747;
border-top:0;
box-shadow:inset 0 0 1px black;
}
.screen{
position:absolute;
left:17px;
top:64px;
width:282px;
height:467px;
background:white;
}
.phone-infos{
width:100%;
height:17px;
background:#303030;
}
.phone-infos span{
float:right;
font-size:11px;
margin:2px 3px;
}
.phone-infos .battery{
width:8px;
height:10px;
background:#4196b7;
margin-top:2px;
position:relative;
margin-top:4px;
}
.phone-infos .battery:before{
width:4px;
height:2px;
position:absolute;
left:2px;
top:-2px;
background:#4196b7;
content:'';
}
.phone-infos .gsm{
position:relative;
height:12px;
margin-right:10px;
}
.phone-infos .gsm b{
float:left;
position:absolute;
bottom:0;
}
.phone-infos .gsm b:before{
position:absolute;
content:'';
top:-3px;
width:0;
height:0;
border-bottom:3px solid #4196b7;
border-left:3px solid transparent;
}
.phone-infos .gsm .signal1{
width:3px;
height:0px;
background:#4196b7;
left:-8px;
}
.phone-infos .gsm .signal2{
width:3px;
height:3px;
background:#4196b7;
left:-4px;
}
.phone-infos .gsm .signal3{
width:3px;
height:7px;
background:#4196b7;
}
.phone-infos .gsm .signal4{
width:3px;
height:11px;
background:#808184;
left:4px;
}
.phone-infos .gsm .signal4:before{
border-bottom:3px solid #808184;
border-left:3px solid transparent;
}
.phone-tabs{
border-bottom:1px solid #858383;
background:#303030;
height:50px;
}
.phone-tabs li{
float:left;
list-style:none;
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
}
.phone-tabs li a{
-webkit-transition:all .05s ease-in;
-moz-transition:all .05s ease-in;
-o-transition:all .05s ease-in;
transition:all .05s ease-in;
text-decoration:none;
background:#303030;
cursor:pointer;
height:40px;
width:94px;
display:block;
text-align:center;
position:relative;
padding-top:10px;
}
.phone-tabs li a:active{
background:rgba(104,208,249,.4);
}
.phone-tabs li a:before{
height:20px;
width:1px;
background:#858383;
position:absolute;
content:'';
left:0;
top:16px;
}
.phone-tabs li:first-child a:before{
display:none;
}
.phone-tabs li.current a:after{
position:absolute;
content:'';
left:0px;
bottom:0px;
width:100%;
height:5px;
background:#4196b7;
}
.phone-tab-contents{
width:100%;
height:365px;
position:relative;
overflow:hidden;
}
.phone-tab-contents .tab{
width:100%;
height:365px;
position:absolute;
background:#3f3f3f;
position:absolute;
-webkit-transition:all .25s ease-in;
-moz-transition:all .25s ease-in;
-o-transition:all .25s ease-in;
transition:all .25s ease-in;
}
.phone-tab-contents .tab.phone{
left:0;
background:#3f3f3f url(data:image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAAB 
JRU5ErkJggg==) repeat;
}
.phone-tab-contents .tab.clock{
left:282px;
}
.phone-tab-contents .tab.peoples{
left:564px;
}
.phone-tab-contents.getclock .tab.phone{
left:-282px;
}
.phone-tab-contents.getclock .tab.clock{
left:0px;
}
.phone-tab-contents.getclock .tab.peoples{
left:282px;
}
.phone-tab-contents.getpeoples .tab.phone{
left:-564px;
}
.phone-tab-contents.getpeoples .tab.clock{
left:-282px;
}
.phone-tab-contents.getpeoples .tab.peoples{
left:0px;
}
.phone-tab-contents .tab.clock p:first-child,
.phone-tab-contents .tab.peoples p:first-child{
margin-top:50px;
}
.phone-tab-contents .tab.peoples p,
.phone-tab-contents .tab.clock p{
width:90%;
padding:10px 5% 0;
text-align:center;
color:#bbb;
}
.phone-tab-contents .tab.peoples p a,
.phone-tab-contents .tab.clock p a{
color:#fff;
}
.main-btns{
width:100%;
height:34px;
background:#303030;
}
.main-btns li{
list-style:none;
float:left;
}
.main-btns li a{
width:30px;
display:block;
width:94px;
height:34px;
text-align:center;
}
.number-area{
color:#fff;
font-size:20px;
text-align:center;
padding:20px 0 20px;
width:100%;
overflow:hidden;
border-bottom:1px solid #333;
margin-bottom:10px;
}
.number-area .numbers{
width:230px;
float:left;
padding:0 10px;
height:14px;
}
.number-area .delete-btn{
float:right;
margin-right:10px;
cursor:pointer;
}
.numbers-container{
overflow:hidden;
}
.numbers-container span{
width:94px;
height:30px;
float:left;
font-size:30px;
text-indent:22px;
position:relative;
padding:15px 0;
cursor:pointer;
}
.numbers-container span:active{
background:rgba(104,208,249,.4);
}
.numbers-container span em{
font-size:12px;
color:#fff;
font-style:normal;
position:absolute;
left:22px;
bottom:15px;
padding-bottom:5px;
}
.numbers-container span em.brd:before{
position:absolute;
width:14px;
height:2px;
background:#fff;
content:'';
top:9px;
left:24px;
}
.numbers-container span em:after{
width:35px;
height:2px;
background:#4196b7;
content:'';
position:absolute;
top:16px;
left:22px;
}
.numbers-container span.fff{
color:#fff;
text-align:center;
}
.call-btn{
width:100%;
text-align:center;
border-top:1px solid #333;
padding-top:10px;
}
/* Icon Group */
.icon{
display:inline-block;
font-style:normal;
position:relative;
}
.icon.phone{
background:#fff;
width:5px;
height:26px;
-webkit-transform:rotate(145deg);
-moz-transform:rotate(145deg);
-o-transform:rotate(145deg);
transform:rotate(145deg);
border-radius:0 6px 6px 0;
margin-top:5px;
}
.icon.phone:before{
position:absolute;
content:'';
width:8px;
height:9px;
background:#fff;
left:-6px;
bottom:-1px;
border-radius:3px 6px 7px 3px;
}
.icon.phone:after{
position:absolute;
content:'';
width:8px;
height:9px;
background:#fff;
left:-6px;
top:-1px;
border-radius:3px 6px 7px 3px;
}
.icon.clock{
background:#303030;
width:22px;
height:22px;
border:2px solid #fff;
border-radius:22px;
margin-top:4px;
}
.icon.clock:before{
position:absolute;
content:'';
height:9px;
width:2px;
background:#fff;
top:2px;
left:10px;
}
.icon.clock:after{
position:absolute;
content:'';
height:9px;
width:2px;
background:#fff;
top:9px;
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-moz-transform:rotate(120deg);
transform:rotate(120deg);
left:14px;
}
.icon.peoples{
background:#fff;
height:10px;
width:22px;
border-radius:12px 12px 0 0;
margin-top:20px;
}
.icon.peoples:after{
position:absolute;
content:'';
background:#fff;
width:14px;
height:14px;
border:2px solid #303030;
border-radius:18px;
top:-14px;
left:2px;
z-index:10;
}
.icon.peoples:before{
position:absolute;
content:'';
background:#303030;
width:10px;
height:5px;
left:6px;
top:-5px;
z-index:20;
border-radius:0 0 15px 15px;
}
.icon.close{
font-size:12px;
color:#303030;
background:#fff;
width:14px;
height:12px;
line-height:12px;
margin-top:5px;
}
.icon.close:before{
position:absolute;
content:'';
left:-8px;
width:0px;
height:0px;
border-style:solid;
border-width:6.5px 8px 6.5px 0;
border-color:transparent #ffffff transparent transparent;
}
.icon.home{
width:25px;
height:8px;
border:2px solid #bbbbbb;
border-top:0;
margin-top:15px;
}
.icon.home:after{
width:2px;
height:17px;
background:#bbbbbb;
position:absolute;
top:-12px;
left:5px;
content:'';
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.icon.home:before{
width:2px;
height:17px;
background:#bbbbbb;
position:absolute;
top:-12px;
right:5px;
content:'';
-webkit-transform:rotate(110deg);
-moz-transform:rotate(110deg);
-o-transform:rotate(110deg);
transform:rotate(110deg);
}
.icon.windows{
width:20px;
height:8px;
border:2px solid #bbbbbb;
margin-top:13px;
}
.icon.windows:after{
width:2px;
height:14px;
background:#bbbbbb;
position:absolute;
content:'';
right:-6px;
top:-6px;
}
.icon.windows:before{
width:22px;
height:2px;
background:#bbbbbb;
position:absolute;
content:'';
right:-4px;
top:-6px;
}
.icon.back{
width:20px;
height:2px;
background:#bbb;
color:#bbb;
font-size:18px;
line-height:0px;
text-indent:-16px;
font-family:sans-serif;
margin-top:12px;
}
.icon.back:before{
width:7px;
height:11px;
background:#303030;
position:absolute;
content:'';
left:8px;
z-index:10;
top:2px;
}
.icon.back:after{
width:20px;
height:7px;
border:2px solid #bbb;
position:absolute;
content:'';
border-radius:10px;
}
</style>
</head>
<body>
<div class="nexus">
<div class="speaker"></div>
<div class="screen">
<div class="phone-infos">
<span>03.15</span>
<span class="battery"></span>
<span class="gsm">
<b class="signal1"></b>
<b class="signal2"></b>
<b class="signal3"></b>
<b class="signal4"></b>
</span>
</div>
<ul class="phone-tabs">
<li class="current"><a class="getphone"><i class="icon phone"></i></a></li>
<li><a class="getclock"><i class="icon clock"></i></a></li>
<li><a class="getpeoples"><i class="icon peoples"></i></a></li>
</ul>
<div class="phone-tab-contents">
<div class="tab phone current">
<div class="number-area">
<span class="numbers"></span>
<a class="delete-btn"><i class="icon close">x</i></a>
</div>
<div class="numbers-container">
<span class="pushed1">1<em class="brd">o o</em></span>
<span class="pushed2">2<em>ABC</em></span>
<span class="pushed3">3<em>DEF</em></span>
<span class="pushed4">4<em>GHI</em></span>
<span class="pushed5">5<em>JKL</em></span>
<span class="pushed6">6<em>MNO</em></span>
<span class="pushed7">7<em>PQRS</em></span>
<span class="pushed8">8<em>TUV</em></span>
<span class="pushed9">9<em>WXYZ</em></span>
<span class="pushedasterisk fff">*</span>
<span class="pushed0">0<em>+</em></span>
<span class="pushednumber fff">#</span>
</div>
<div class="call-btn">
<i class="icon phone"></i>
</div>
</div>
<div class="tab clock">
<p>Not Ready</p>
<p>Visit Nexus 4 Official Page</p>
<p><a href="/">/</a></p>
<p>Visit My Site</p>
<p><a href="/">/</a></p>
</div>
<div class="tab peoples">
<p>Not Ready</p>
<p>Visit Nexus 4 Official Page</p>
<p><a href="/">/</a></p>
<p>Visit My Site</p>
<p><a href="/">/</a></p>
</div>
</div>
<ul class="main-btns">
<li><a><i class="icon back"><</i></a></li>
<li><a><i class="icon home"></i></a></li>
<li><a><i class="icon windows"></i></a></li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7388

Tutorial Java

1630

Tutorial CakePHP

1357

Tutorial Laravel

1267

Tutorial PHP

1216

Tunjukkan Lagi

Related knowledge

Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web? Apr 05, 2025 pm 10:33 PM

Menggunakan fail font yang dipasang di laman web baru -baru ini, saya memuat turun fon percuma dari internet dan berjaya memasangnya ke dalam sistem saya. Sekarang ...

Bagaimana untuk memilih elemen kanak -kanak dengan item nama kelas pertama melalui CSS? Apr 05, 2025 pm 11:24 PM

Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...

Bagaimana untuk membuat pelbagai baris teks sejajar dan garis bawah dengan CSS? Apr 05, 2025 pm 08:00 PM

Bagaimana untuk membuat pelbagai baris teks sejajar dan garis bawah dengan CSS? Dalam reka bentuk web harian, kita sering perlu gaya pelbagai baris teks dalam gaya khas ...

Bagaimana cara menyesuaikan gaya hover dan logik baris yang digabungkan dalam elemen elemen? Apr 05, 2025 pm 07:45 PM

Bagaimana untuk menyesuaikan gaya hover dan logik baris yang digabungkan di El-Table? Menggunakan elemen ...

Bagaimana untuk bersesuaian dengan peninggalan limpahan multi-line pada terminal mudah alih? Apr 05, 2025 pm 10:36 PM

Isu keserasian limpahan berbilang baris pada terminal mudah alih yang ditinggalkan pada peranti yang berbeza apabila membangunkan aplikasi mudah alih menggunakan Vue 2.0, anda sering menghadapi keperluan untuk melimpah teks ...

Adakah pengeluaran halaman H5 memerlukan penyelenggaraan berterusan? Apr 05, 2025 pm 11:27 PM

Halaman H5 perlu dikekalkan secara berterusan, kerana faktor -faktor seperti kelemahan kod, keserasian pelayar, pengoptimuman prestasi, kemas kini keselamatan dan peningkatan pengalaman pengguna. Kaedah penyelenggaraan yang berkesan termasuk mewujudkan sistem ujian lengkap, menggunakan alat kawalan versi, kerap memantau prestasi halaman, mengumpul maklum balas pengguna dan merumuskan pelan penyelenggaraan.

Bagaimana cara menggunakan kumpulan peralihan reaksi untuk mencapai kesan penukaran komponen reaksi yang ketat dari kanan ke kiri? Apr 05, 2025 pm 08:03 PM

Mengenai masalah menggunakan kumpulan peralihan React untuk mencapai kesan peralihan komponen dalam React. Apabila menggunakan projek pembangunan React, kita sering perlu melaksanakan beberapa aliran ...

Kenapa dua elemen blok dalam talian menunjukkan misalignment? Bagaimana menyelesaikan masalah ini? Apr 05, 2025 pm 08:09 PM

Membincangkan sebab-sebab misalignment dua elemen blok sebaris. Dalam pembangunan front-end, kita sering menghadapi masalah menaip elemen, terutamanya apabila menggunakan blok sebaris ...

See all articles