JS CSS 仿触屏手机拨号盘界面及功能模拟

2020-01-27 14:16:29

字体：大中小

来源：转载

供稿：网友

JAVASCRIPT和CSS共同实现的仿android触屏手机拨号盘界面，并且可以模拟拨号功能，非HTML5代码，不但界面设计方面值得学习，按钮的处理和点击的逻辑也是值得借鉴的噢。

<!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=gb2312" /><title>仿安卓手机拨号界面按键特效</title><script type="text/javascript" src="/ajaxjs/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,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAOO07anMSKLgQT2Z3nOggvCBECKwILIAmBBdAGQIABJuxH63EphJgAAAABJRU5ErkJggg==) 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>

上一篇：不错的CSS3图文列表还有鼠标悬停图片抖动

下一篇：JavaScript让网页出现渐隐渐显的背景颜色