Rumah > Artikel > hujung hadapan web > Contoh lengkap JS CSS meniru antara muka dail telefon mudah alih skrin sentuh dan kemahiran simulasi_javascript fungsi
Contoh lengkap JS CSS meniru antara muka dail telefon mudah alih skrin sentuh dan kemahiran simulasi_javascript fungsi
- WBOYasal
- 2016-05-16 15:58:442763semak imbas
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>
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
Kenyataan：
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
Artikel sebelumnya：Kaedah JQuery untuk menyemak set kotak semak dengan nama yang ditentukan dan memaparkannya together_jqueryArtikel seterusnya：Kaedah JQuery untuk menyemak set kotak semak dengan nama yang ditentukan dan memaparkannya together_jquery
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional