JS+CSS仿触屏手机拨号界面

2014-06-25 07:47:02 -0400

JS+CSS仿触屏手机拨号界面

说明：

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="http://www.codefans.net/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>

转自源码爱好者

Back to home

| N