html5側面滑出聊天框代碼



136 543 182



特效描述: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

加群請備注:從官網了解到

老夫子电子