html+css3+jQuery可拖动提示窗口
1、新建html文档。
2、书写hmtl代码。
<div class='chat'>
<header>
<h2 class='title'>拖动窗口</h2>
<ul class='tools'>
<li> <a class='fa fa-gear' href='#'></a> </li>
<li> <a class='fa fa-search' href='#'></a> </li>
</ul>
</header>
<div class='body'>
<div class='search'>
<input placeholder='Search...' type='text'>
</div>
<ul>
<li> <a class='thumbnail' href='#'>鹰眼</a>
<div class='content'>
<h3>杰瑞米·雷纳</h3>
<span class='preview'>嗯嗯，中餐不错哦！</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
<li> <a class='thumbnail' href='#'>寡姐</a>
<div class='content'>
<h3>斯嘉丽·约翰逊</h3>
<span class='preview'>我倒是想吃中餐呢！</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
<li> <a class='thumbnail' href='#'>浩克</a>
<div class='content'>
<h3>马克·鲁法洛</h3>
<span class='preview'>上次不是才吃过的嘛！</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
<li> <a class='thumbnail' href='#'>雷神</a>
<div class='content'>
<h3>克里斯·海姆斯沃斯</h3>
<span class='preview'>去吃阿拉伯烤肉怎么样？</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
<li> <a class='thumbnail' href='#'>美队</a>
<div class='content'>
<h3>克里斯·埃文斯</h3>
<span class='preview'>有啊，不如下周聚餐吧！</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
<li> <a class='thumbnail' href='#'>托尼</a>
<div class='content'>
<h3>小罗伯特·唐尼</h3>
<span class='preview'>队长，你请客的事还有戏吗？</span> <span class='meta'> 2天前·<a href='#'>朋友</a>·<a href='#'>回复</a> </span> </div>
</li>
</ul>
</div>
<footer> <a href='#'>查看全部消息</a> </footer>
</div>
3、书写css代码。
body { background: #e9e9e9; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.chat { background: #ffffff; width: 300px; margin: 0 auto; }
.chat header { background: #bd6982; padding: 10px 15px; color: #ffffff; font-size: 14px; cursor: move; }
.chat header:before, .chat header:after { display: block; content: ''; clear: both; }
.chat header h2, .chat .body ul li .content h3 { margin: 0; padding: 0; font-size: 14px; float: left; }
.chat header h2 a { color: #ffffff; text-decoration: none; }
.chat header .tools { list-style: none; margin: 0; padding: 0; float: right; }
.chat header .tools li { display: inline-block; margin-right: 6px; }
.chat header .tools li:last-child { margin: 0; }
.chat header .tools li a { color: #ffffff; text-decoration: none; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; }
.chat .body { position: relative; max-height: 360px; overflow-y: scroll; }
.chat .body .search { display: none; width: 100%; }
.chat .body .search.opened { display: block; }
.chat .body .search input { width: 100%; margin: 0; padding: 10px 15px; border: none; -webkti-box-size: border-box; -moz-box-size: border-box; box-size: border-box; }
.chat .body ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #f2f2f2; }
.chat .body ul li { position: relative; background: #ffffff; display: block; width: 100%; padding: 10px; box-sizing: border-box; }
.chat .body ul li:before, .chat .body ul li:after { display: block; content: ''; clear: both; }
.chat .body ul li:hover .thumbnail { background: #bd6982; }
.chat .body ul li:nth-child(2n) { background: #f2f2f2; }
.chat .body ul li .thumbnail { display: inline-block; background: #bfbfbf; width: 50px; color: #ffffff; line-height: 50px; text-align: center; text-decoration: none; -webkit-transition: background 0.3s linear 0s; -moz-transition: background 0.3s linear 0s; -ms-transition: background 0.3s linear 0s; -o-transition: background 0.3s linear 0s; transition: background 0.3s linear 0s; }
.chat .body ul li .thumbnail img { width: 100%; }
.chat .body ul li .content { display: inline-block; margin-left: 6px; vertical-align: top; line-height: 1; }
.chat .body ul li .content h3 { display: block; width: 100%; margin-bottom: 5px; color: #808080; }
.chat .body ul li .content .preview { display: block; width: 100%; max-width: 200px; margin-bottom: 5px; color: #cccccc; font-size: 12px; }
.chat .body ul li .content .meta { color: #b3b3b3; font-size: 12px; }
.chat .body ul li .content .meta a { color: #999999; text-decoration: none; }
.chat .body ul li .content .meta a:hover { text-decoration: underline; }
.chat .body ul li .message { display: none; position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; width: 100%; padding: 10px; box-sizing: border-box; }
.chat footer a { background: #bd6982; display: block; width: 100%; padding: 10px 15px; color: #ffffff; font-size: 14px; text-align: center; text-decoration: none; box-sizing: border-box; }
.chat footer a:hover { background: #cd8ca0; -webkit-transition: background 0.3s linear 0s; -moz-transition: background 0.3s linear 0s; -ms-transition: background 0.3s linear 0s; -o-transition: background 0.3s linear 0s; transition: background 0.3s linear 0s; }
.info { width: 300px; margin: 25px auto; text-align: center; }
.info h1 { margin: 0; padding: 0; font-size: 20px; font-weight: 400; color: #333333; }
.info span { color: #666666; font-size: 12px; }
.info span a { color: #000000; text-decoration: none; }
.info span .fa { color: #bd6982; }
.info span .spoilers { color: #999999; margin-top: 5px; font-size: 10px; }
4、书写并添加js代码。
<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
5、书写并添加<script src="js/index.js"></script>代码。
<script>
$('.fa-search').click(function(){
$(this).stop().toggleClass('fa-close');
$('.search').stop().animate({height: "toggle", opacity: "toggle"}, 300);
});
$('.chat').draggable({ handle: 'header' });</script>
6、代码整体结构。
7、查看效果。
