angular与jquery实现多用户及时通讯聊天窗口效果
代码语言:html
所属分类:其他
代码描述:angular与jquery实现多用户及时通讯聊天窗口效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } html, body { background: -webkit-gradient(linear, left top, left bottom, from(#2EC4B6), to(#9EB1E9)); background: linear-gradient(180deg, #2EC4B6, #9EB1E9); overflow-x: hidden; } .container { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; } .inbox { background: #EDF2F4; width: 650px; height: 450px; display: -webkit-box; display: flex; border-radius: 4px; } .inbox aside { background: #43d3c5; -webkit-box-flex: 1; flex: 1 1 auto; height: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .inbox aside .avatar { width: 30px; height: 30px; border: 2px solid #FFF; border-radius: 100%; } .inbox aside li { background: #36d0c2; list-style: none; color: #FFF; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 0 2em; -webkit-box-align: center; align-items: center; height: 5em; font-size: 0.8em; cursor: pointer; border-bottom: 1px solid #4bd5c8; border-top-left-radius: 4px; } .inbox aside li:hover { background: #30ccbe; } .inbox main { background: #EDF2F4; height: 100%; -webkit-box-flex: 1; flex: 1 1 70%; border-top-right-radius: 4px; border-bottom-right-radius: 4px; -webkit-transform: scale(1.035); transform: scale(1.035); } .inbox main .message-wrap { height: 88%; overflow-y: scroll; } .inbox main .message { background: #43d3c5; width: 70%; margin: 1em 6em; padding: 1em; border-radius: 4px; opacity: 1; -webkit-transition: opacity ease-in-out .45s; transition: opacity ease-in-out .45s; } .inbox main .message p { font-size: 0.68em; color: #FFF; font-weight: 300; } .inbox main .message img { width: 30px; height: 30px; border-radius: 100%; -webkit-transform: translateX(-70px) translateY(-20px); transform: translateX(-70px) translateY(-20px); float: left; } .inbox main .message:nth-of-type(even) { background: #2fc8ba; margin: 1em 1em; } .inbox main footer { position: fixed; bottom: 0; height: 12%; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; border-top: 1px solid #e0e9ec; } .inbox main footer input[type="text"] { border: none; background: transparent; padding: 0.8em; outline: none; color: #AAA; width: 100%; } .inbox main footer input[type="submit"] { background: #43d3c5; color: #FFF; width: 17%; border-radius: 4px; padding: 0.8em; margin: 0 1em; border: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .inbox main footer form { width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; } .init { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column wrap; height: 100%; position: absolute; left: 0; right: 0; z-index: -1; text-align: center; } .init i { font-size: 5em; color: #43d3c5; } .init h4 { margin: 1em auto; color: #43d3c5; } .loader { opacity: 0; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column wrap; height: 100%; position: absolute; margin: 0 auto; left: 0; right: 0; z-index: -1; text-align: center; } .loader p { background: #43d3c5; width: 20px; height: 20px; border-radius: 100%; -webkit-animation: loading 2000ms cubic-bezier(0.47, 0, 0.745, 0.715) infinite; animation: loading 2000ms cubic-bezier(0.47, 0, 0.745, 0.715) infinite; } .loader p:before { content: ''; background: #43d3c5; width: 40px; height: 40px; opacity: 1; display: block; -webkit-transform: translateX(-10px) translateY(-10px); transform: translateX(-10px) translateY(-10px); border-radius: 100%; -webkit-animation: loading 2000ms cubic-bezier(0.47, 0, 0.745, 0.715) infinite; animation: loading 2000ms cubic-bezier(0.47, 0, 0.745, 0.715) infinite; -webkit-animation-delay: 50ms; animation-delay: 50ms; } .loader h4 { margin: 1em auto; color: #43d3c5; } @-webkit-keyframes loading { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } } @keyframes loading { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } } ::-webkit-scrollbar { width: 0px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); } </style> </head> <body translate="no"> <html ng-app='swankyChat' ng-cloak='true'> <div class='container'> <div class='inbox'> <aside> <ul ng-controller='chatCtrl as chat'> <div ng-repeat='chat in chats'> <li ng-click='uid(chat.id)'> <img class='avatar' src='{{chat.avatar}}'> <p class='username'>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0