add an alert function
This commit is contained in:
parent
084e941127
commit
20f1289563
@ -1,5 +0,0 @@
|
||||
@keyframes anim-content{
|
||||
0%{transform:rotateY(0deg)}
|
||||
50%{transform:rotateY(30deg)}
|
||||
100%{transform:rotateY(0deg)}
|
||||
}
|
||||
57
base.js
57
base.js
@ -1,6 +1,57 @@
|
||||
window.onselectstart = function () {
|
||||
$(function () {
|
||||
window.onselectstart = block;
|
||||
window.ontouchstart = block;
|
||||
window.ondragstart = block;
|
||||
$('.msg-header').Drag($('.msg-container'));
|
||||
$('.menu-container ul li span').on('click',function(){
|
||||
message.alert('这里是','<div style="text-align:right"><div style="font-size:28px;height:70px;padding-top:40px;text-align:center">AHPU-老中医</div>的博客 </div>');
|
||||
});
|
||||
function block() {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
(function(){
|
||||
$(window).on('resize',function(){
|
||||
$('.msg-container').css({
|
||||
"top":"50%",
|
||||
"left":"50%"
|
||||
});
|
||||
});
|
||||
$(document.body).on('click','.msg-footer span',function(){
|
||||
var p = $(this).parent().parent();
|
||||
p.css('animation','fadeOut .5s');
|
||||
setTimeout(function(){
|
||||
p.remove();
|
||||
},500);
|
||||
});
|
||||
})();
|
||||
|
||||
var message = new function () {
|
||||
this.alert = function (header, content) {
|
||||
var id = uuid();
|
||||
var html =
|
||||
'<div class="msg-container" id="mc-' + id + '">' +
|
||||
'<div class="msg-header" id="mh-'+id+'">' +
|
||||
header +
|
||||
'</div>' +
|
||||
'<div class="msg-content">' +
|
||||
content +
|
||||
'</div>' +
|
||||
'<div class="msg-footer">'+
|
||||
'<span>关闭</span>'+
|
||||
'</div>' +
|
||||
'</div>'
|
||||
$(document.body).append(html);
|
||||
$('#mh-'+id).Drag($('#mc-'+id));
|
||||
return id;
|
||||
}
|
||||
}
|
||||
window.ontouchstart = function(){
|
||||
return false;
|
||||
|
||||
function uuid() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||||
var r = Math.random() * 16 | 0,
|
||||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
29
drag.js
Normal file
29
drag.js
Normal file
@ -0,0 +1,29 @@
|
||||
(function (document) {
|
||||
//Usage: $("#id").Drag()
|
||||
//Author: hooyes
|
||||
$.fn.Drag = function (target) {
|
||||
var M = false;
|
||||
var Rx, Ry;
|
||||
var t = $(this);
|
||||
t.mousedown(function (event) {
|
||||
event.stopPropagation();
|
||||
Rx = event.pageX - (parseInt(target.css("left")) || 0);
|
||||
Ry = event.pageY - (parseInt(target.css("top")) || 0);
|
||||
M = true;
|
||||
scaleChanged = false;
|
||||
})
|
||||
.mouseup(function (event) {
|
||||
M = false;
|
||||
t.fadeTo(20, 1);
|
||||
});
|
||||
$(document).mousemove(function (event) {
|
||||
if (M) {
|
||||
target.css({
|
||||
top: event.pageY - Ry,
|
||||
left: event.pageX - Rx
|
||||
});
|
||||
}
|
||||
scaleChanged = true;
|
||||
});
|
||||
}
|
||||
})(document);
|
||||
@ -117,17 +117,18 @@ div.content-border {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 50px 50px 25px;
|
||||
overflow-y: scroll
|
||||
overflow-y: scroll;
|
||||
transition:padding .5s ease
|
||||
}
|
||||
|
||||
div.content {
|
||||
min-height: 200px;
|
||||
max-width: 800px;
|
||||
background-color: #fff;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
border-radius: 15px;
|
||||
opacity: 1;
|
||||
transition: opacity .5s ease, transform .5s ease;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
padding: 15px;
|
||||
margin-bottom: 25px;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
11
index.html
11
index.html
@ -6,7 +6,7 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<link rel="stylesheet" href="animations.css">
|
||||
<link rel="stylesheet" href="myui.css">
|
||||
<title>LAOZHONGYI BLOG</title>
|
||||
</head>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="menu-container">
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="javascript:void(0);">关于</a></li>
|
||||
<li><span>关于</span></li>
|
||||
<li><label for="menu-control">返回</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -35,7 +35,8 @@
|
||||
<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
|
||||
<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
|
||||
<img src="images/note1/1.jpg" alt="截图1">
|
||||
<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示</p>
|
||||
<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
|
||||
</p>
|
||||
<img src="images/note1/2.jpg" alt="截图2">
|
||||
<p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
|
||||
<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
|
||||
@ -53,8 +54,8 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
|
||||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="drag.js"></script>
|
||||
<script src="base.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
100
myui.css
Normal file
100
myui.css
Normal file
@ -0,0 +1,100 @@
|
||||
*{
|
||||
touch-action: none
|
||||
}
|
||||
|
||||
.msg-container{
|
||||
display: block;
|
||||
position:fixed;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform: translate(-50%,-50%);
|
||||
min-height:220px;
|
||||
min-width:250px;
|
||||
max-width:460px;
|
||||
color:white;
|
||||
padding-bottom:40px;
|
||||
cursor: default;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 3px 2px 8px rgb(40,40,40);
|
||||
opacity: 0;
|
||||
animation: fadeIn .5s forwards;
|
||||
z-index:999;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.msg-header{
|
||||
display:block;
|
||||
position: relative;
|
||||
width:100%;
|
||||
min-height:20px;
|
||||
background-color:rgb(40,40,40);
|
||||
cursor: move;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.msg-content{
|
||||
display: block;
|
||||
position: relative;
|
||||
width:100%;
|
||||
min-height: 150px;
|
||||
background-color:rgb(50, 50, 50);
|
||||
cursor: default;
|
||||
padding:10px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.msg-footer{
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
height: 40px;
|
||||
background-color:rgb(30,30,30);
|
||||
cursor: default;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
padding: 10px;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.msg-footer span{
|
||||
cursor: pointer;
|
||||
transition:all .1s ease;
|
||||
font-size: 16px;
|
||||
padding:3px 8px;
|
||||
}
|
||||
|
||||
.msg-footer span:hover{
|
||||
color:#ccc
|
||||
}
|
||||
|
||||
.msg-footer span:active{
|
||||
color:rgb(50, 50, 50)
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from{opacity:0}
|
||||
to{opacity:1}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from{opacity:1}
|
||||
to{opacity:0}
|
||||
}
|
||||
|
||||
@media screen and (max-width:480px){
|
||||
.msg-container{
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user