html+css3+jQuery可拖动提示窗口
1、新建html文档。
2、书写hmtl代艨位雅剖码。<div class='chat'> <head髫潋啜缅er> <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: &#泌驾台佐39;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、查看效果。
