jQuery手机拨号界面特效代码分享
需积分: 0 136 浏览量
2020-10-23
16:44:42
上传
评论
收藏 37KB PDF 举报
jQuery手机拨号界面特效代码分享手机拨号界面特效代码分享
主要介绍了jQuery手机拨号界面特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了jQuery手机拨号界面特效。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的手机拨号界面特效源码，是一款个性的phone网页版手机拨号界面样式代码。点击界面上数字按键
可实时显示手机拨号效果，点击底部拨号键可模拟拨号通话的效果。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery手机拨号界面特效代码如下
<!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>jQuery手机拨号界面特效代码</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nexus">
<div class="speaker">
<span class="circle"></span>
<a>
<span class="bo">拨号中·····</span>
<span class="tong">通话中······</span>
</a>
<!-- <span class="numbers" style="font-size:12px; font-weight:normal; color:#989696;"></span> -->
</div>
<div class="screen">
<div class="phone-infos">
<button>视频</button>
</div>
<div class="phone-tab-contents">
<div class="tab phone current">
<div class="number-area">
<span class="numbers"></span>
<span class="phone-pic" ></span>
<span class="re-phone">是否重播</span>
<span class="over-phone">结束通话</span>
</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>
<p class="cover"></p>
</div>
</div>
<ul class="main-btns">
<li><a class="btn-people"></a></li>
<li><a class="btn-btn"></a></li>
资源评论
weixin_38743968
- 粉丝: 404
- 资源: 2万+
最新资源
- python-leetcode面试题解之第274题H指数.zip
- python-leetcode面试题解之第270题最接近二叉搜索树值.zip
- python-leetcode面试题解之第267题回文排列II.zip
- python-leetcode面试题解之第264题丑数II.zip
- python-leetcode面试题解之第263题丑数.zip
- python-leetcode面试题解之第258题各位相加.zip
- python-leetcode面试题解之第257题二叉树的所有路径.zip
- python-leetcode面试题解之第253题会议室II.zip
- python-leetcode面试题解之第252题会议室.zip
- python-leetcode面试题解之第249题移位字符串分组.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
