【css3+JavaScript】:一个优雅的对话框
实现效果：
======2015/5/11======
优化滚动条(scroll)：默认的滚动条太丑，忍不住优化下
::-webkit-scrollbar {
width: 14px;
height: 14px;
}::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border-radius: 999px;
border: 5px solid transparent;
}::-webkit-scrollbar-track {
box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}::-webkit-scrollbar-thumb {
min-height: 20px;
background-clip: content-box;
box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}::-webkit-scrollbar-corner {
background: transparent;
}
优化前：
优化后：
以下资料来源于网络：
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-button 滚动条两端的按钮
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-thumb （拖动条？滑块？滚动条里面可以拖动的那个，肿么翻译好呢？）
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式
- :horizontal – horizontal伪类应用于水平方向的滚动条
- :vertical – vertical伪类应用于竖直方向的滚动条
- :decrement – decrement伪类应用于按钮和内层轨道(track piece)。它用来指示按钮或者内层轨道是否会减小视窗的位置(比如，垂直滚动条的上面，水平滚动条的左边。)
- :increment – increment伪类和decrement类似，用来指示按钮或内层轨道是否会增大视窗的位置(比如，垂直滚动条的下面和水平滚动条的右边。)
- :start – start伪类也应用于按钮和滑块。它用来定义对象是否放到滑块的前面。
- :end – 类似于start伪类，标识对象是否放到滑块的后面。
- :double-button – 该伪类以用于按钮和内层轨道。用于判断一个按钮是不是放在滚动条同一端的一对按钮中的一个。对于内层轨道来说，它表示内层轨道是否紧靠一对按钮。
- :single-button – 类似于double-button伪类。对按钮来说，它用于判断一个按钮是否自己独立的在滚动条的一段。对内层轨道来说，它表示内层轨道是否紧靠一个single-button。
- :no-button – 用于内层轨道，表示内层轨道是否要滚动到滚动条的终端，比如，滚动条两端没有按钮的时候。
- :corner-present – 用于所有滚动条轨道，指示滚动条圆角是否显示。
- :window-inactive – 用于所有的滚动条轨道，指示应用滚动条的某个页面容器(元素)是否当前被激活。(在webkit最近的版本中，该伪类也可以用于::selection伪元素。webkit团队有计划扩展它并推动成为一个标准的伪类)
另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。
关于具体的demo，这里不再做了，网上已经有很多demo可以参考，比如，webkit官方的这个，具体的线上项目中也有现成的例子，比如，QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。
值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。
CORE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Talk Room</title>
<style type="text/css"> *{
margin: 0;
padding: 0;
} li{
list-style: none;
} body{
font-family: "microsoft yahei";
background-color: #f7f7f7;
color: #666;
font-size: 13px;
line-height: 1.8em;
} .roomArea{
width: 400px;
height: 500px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
} .room-content{
width: 100%;
height: 320px;
overflow-y:auto;
border-bottom: 1px solid #f7f7f7;
} .opArea{
width: 100%;
} .wordsInput{
width: 380px;
padding: 10px;
height: 80px;
margin-bottom: 20px;
border: 0;
outline: 0;
border-bottom: 1px solid #f7f7f7;
font-family: "microsoft yahei";
} .btn{
float: right;
margin:0 6px;
padding: 5px 20px;
border: 0;
outline: 0;
border-radius: 3px;
background-color: #eb4f38;
color: #fff;
border: 1px solid transparent;
} #offBtn{
background-color: #a9b7b7;
} .inp{
width: 125px;
outline: 0;
height: 25px;
border: 0;
border-bottom: 1px solid #f7f7f7;
} label{
margin-left: 10px;
} .msg-list{
position: relative;
} .msg-list li{
display:inline-block;
padding: 6px 0;
margin: 6px 0;
} .words {
position: relative;
display: inline-block;
margin-left: 60px;
background-color: #00bb9c;
color: #fff;
padding: 5px 8px;
border-radius: 4px;
width: 240px;
min-height: 40px;
} .words:before{
content: '';
position: absolute;
top:7px;
left:-6px;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent #00bb9c transparent transparent;
} .nickName {
position: absolute;
left: 10px;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: #00bb9c;
display: inline-block;
line-height: 40px;
text-align: center;
color: #fff;
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.3);
box-shadow: 0 0 1px rgba(0,0,0,.3);
} .time {
float: right;
font-size: 12px;
color: #eee;
} .oRight .nickName {
position: absolute;
right: 10px;
left: auto;
background-color: #56abe4;
} .oRight .words{
background-color: #56abe4;
} .oRight .words:before{
display: none;
} .oRight .words:after{
content: '';
position: absolute;
top:7px;
right:-6px;
border-style: solid;
border-width: 6px 0 6px 12px ;
border-color: transparent transparent transparent #56abe4 ; } </style> </head>
<body> <div class="roomArea"> <div class="room-content" >
<ul class="msg-list" id="msgList">
</ul>
</div> <div class="opArea"> <textarea class="wordsInput" id="txtInput" placeholder="说点什么吧"></textarea>
<label for="inp">输入昵称:</label>
<input type="text" class="inp" id="inp">
<button class="btn" id="offBtn">取消</button>
<button class="btn" id="sendBtn">发布</button> </div> </div> <!--js部分--> <script type="text/javascript"> var oMsgList=document.getElementById('msgList');
var oTxtInput=document.getElementById('txtInput');
var oInp=document.getElementById('inp');
var oOffBtn=document.getElementById('offBtn');
var oSendBtn=document.getElementById('sendBtn');
var lastUserName = "";
oSendBtn.onclick=function addWords(){ if (oTxtInput.value=='') {
alert('输入内容不能为空');
oTxtInput.focus();
return false;
} else if (oInp.value=='') {
alert('昵称不能为空');
oInp.focus();
return false;
} else{
oMsgList.innerHTML+="<li>"+"<span class='nickName'>"+oInp.value +"</span>" + "<span class='words'>"+oTxtInput.value+"<span class='time'>"+getTime()+"</span>"+"</span>" +"</li>"; //遍历li
var i=""; var li_arr=document.getElementsByTagName('li');
// //获取tag名为li的html元素 if (li_arr.length > 1) {
if (lastUserName === oInp.value) {
li_arr[li_arr.length -1].className = li_arr[li_arr.length -2].className;
} if (!li_arr[li_arr.length -2].classList.contains('oRight') && lastUserName !== oInp.value) {
li_arr[li_arr.length -1].classList.add('oRight');
}
} lastUserName = oInp.value;
oInp.value='';
oTxtInput.value=''; } } function getTime(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var time = year+'/'+month+'/'+day+' '+hours+':'+minutes+':'+seconds;
return time;
} </script> </body>
</html>
【css3+JavaScript】:一个优雅的对话框的更多相关文章
- Javascript:一个优雅的时钟
实现效果: 准备工作: 1# 定时器 相关知识了解 2#javascript Date(日期)对象 3# 准备效果所用图片 实现原理: 1# 获取当前时间: var time=new Date(); ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- HTML5&CSS3&JavaScript&PHP&MySQL学习笔记
1.在文字间添加一条水平线 使用<hr /> 注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...
- webview之如何设计一个优雅健壮的Android WebView？（下）(转)
转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...
- webview之如何设计一个优雅健壮的Android WebView？（上）(转)
转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...
- 如何设计一个优雅健壮的Android WebView？（下）
转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...
- 如何设计一个优雅健壮的Android WebView？（上）
转:如何设计一个优雅健壮的Android WebView?(上) 前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Gith ...
- 在PostgreSQL自定义一个“优雅”的type
是的,又是我,不要脸的又来混经验了.我们知道PostgreSQL是一个高度可扩展的数据库,这次我聊聊如何在PostgreSQL里创建一个优雅的type,如何理解优雅?大概就是不仅仅是type本身,其它 ...
- Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...
随机推荐
- 我的创业劲儿，无可阻挡-JAVA学院张孝伟
导语:张孝伟,这个怀揣着创业梦想的农村小伙,为了报答父母的恩情,他开启了自己的逐梦之旅.友好的伙伴,火旺的生意.以前让他如鱼得水.就在他满足于现状的时候,一场突如其来的事故,让他一夜间倾家荡产.他是否 ...
- Windows移动开发（二）——闭关修炼
一些武侠小说里的大人物,为了争夺武林盟主,号召天下,常常闭关修炼一段时间,闭关期间仅仅能接触送饭的人,而且关外还有非常多守卫的人员.还有,不管是篮球还是足球运动员,他们在真正接触球之前,都必须做非常长 ...
- java总结文章
java总结文章 原创地址: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),须要转载的,保留下! Thanks Talk is cheap. Show me th ...
- android常用软件下载资源链接
最新内容请看:http://www.androiddevtools.cn/ https://github.com/inferjay/AndroidDevTools 官方adt下载地址:http://d ...
- 初探R语言——R语言笔记
R语言使用 <- 赋值 # 作为注释符号 c()函数用于作为向量赋值,例如age<-c(1,2,3,4,5) mean()用于求向量的平均值 sd()求向量的标准差 cor(a,b)求a ...
- arcgis server "System.Web.Services.Protocols.SoapException: Error processing server request".
在 Arcgis Server 10中创建第一个程序,运行的时候就报错:System.Web.Services.Protocols.SoapException: Error processing se ...
- (一)Android开发之安卓系统的前世今生
1 什么是Android Android中文名称"安卓",英文含义为"机器人",Android是谷歌旗下的一款基于linux平台的开源操作系统.主要使用于移动设 ...
- DG下手工处理v$archive_gap方法
从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...
- FileStream 操作文件复制
static void Main(string[] args) { string source = @"D:\c\集合.avi"; string target = @"C ...
- poj3071
题目大意,1<<n个球队比赛赛程是这样的 1 1 1 1 1 1 1 另dp[i][k]为k队进入第i场的概率 #include<iostream> #includ ...