html5侧面滑出聊天框代码



129 514 172



特效描述:html5 侧面滑出 聊天框代码,html5侧面滑出聊天框代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='http://fonts.useso.com/css?family=Open+Sans'>
<link rel="stylesheet" type="text/css" href="css/styles.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/main.js"></script>

3. HTML代码

<div class="demo">
		  <svg class="sidebar" viewBox="0 0 300 500">
			<path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
		  </svg>
		  <div class="static">
			<div class="static__text">Pull white sidebar to the right</div>
		  </div>
		  <div class="sidebar-content">
			<div class="contact">
			  <img src="img/1.png" alt="" class="contact__photo" />
			  <span class="contact__name">Ethan Hawke</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/2.png" alt="" class="contact__photo" />
			  <span class="contact__name">Natalie Portman</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/3.png" alt="" class="contact__photo" />
			  <span class="contact__name">Kevin Spacey</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/4.png" alt="" class="contact__photo" />
			  <span class="contact__name">Rosamund Pike</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/5.png" alt="" class="contact__photo" />
			  <span class="contact__name">Robert Redford</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/6.png" alt="" class="contact__photo" />
			  <span class="contact__name">Scarlett Johansson</span>
			  <span class="contact__status online"></span>
			</div>
			<div class="contact">
			  <img src="img/7.png" alt="" class="contact__photo" />
			  <span class="contact__name">Tom Cruise</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/8.png" alt="" class="contact__photo" />
			  <span class="contact__name">Eva Green</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/9.png" alt="" class="contact__photo" />
			  <span class="contact__name">Paul Newman</span>
			  <span class="contact__status"></span>
			</div>
			<div class="contact">
			  <img src="img/1.png" alt="" class="contact__photo" />
			  <span class="contact__name">Thomas Break</span>
			  <span class="contact__status"></span>
			</div>
			<div class="search">
			  <img src="img/t8TeL1S.png" alt="" class="search__img" />
			  <input type="text" class="search__input" placeholder="Search" />
			</div>
		  </div>
		  <div class="chat">
			<span class="chat__back"></span>
			<span class="chat__status">status</span>
			<div class="chat__person">
			  <span class="chat__online active"></span>
			  <span class="chat__name">Huehue Huehue</span>
			</div>
			<div class="chat__messages">
			  <div class="chat__msgRow">
				<div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message notMine">Wow!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message notMine">Very elastic! Such easings!</div>
			  </div>
			  <div class="chat__msgRow">
				<div class="chat__message mine">
				</div>
			  </div>
			</div>
			<input type="text" class="chat__input" placeholder="Your message" />
		  </div>
		</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 收缩展开 展开收缩 收缩 展开 切换按钮 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 收缩菜单 收缩导航 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到