html+css3+jQuery可拖动提示窗口

1、新建html文档。

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; }

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>

7、查看效果。