From 20f1289563a6a14b55185422833e22479015cbfa Mon Sep 17 00:00:00 2001 From: wolegca <2738076308@qq.com> Date: Thu, 12 Sep 2019 23:24:39 +0800 Subject: [PATCH] add an alert function --- animations.css | 5 --- base.js | 59 +++++++++++++++++++++++++++-- drag.js | 29 ++++++++++++++ index.css | 7 ++-- index.html | 11 +++--- myui.css | 100 +++++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 194 insertions(+), 17 deletions(-) delete mode 100644 animations.css create mode 100644 drag.js create mode 100644 myui.css diff --git a/animations.css b/animations.css deleted file mode 100644 index e0970df..0000000 --- a/animations.css +++ /dev/null @@ -1,5 +0,0 @@ -@keyframes anim-content{ - 0%{transform:rotateY(0deg)} - 50%{transform:rotateY(30deg)} - 100%{transform:rotateY(0deg)} -} \ No newline at end of file diff --git a/base.js b/base.js index 216045c..56e4d1b 100644 --- a/base.js +++ b/base.js @@ -1,6 +1,57 @@ -window.onselectstart = function () { - return false; +$(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('这里是','
AHPU-老中医
的博客   
'); + }); + 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 = + '
' + + '
' + + header + + '
' + + '
' + + content + + '
' + + '
'+ + '关闭'+ + '
' + + '
' + $(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); + }); } \ No newline at end of file diff --git a/drag.js b/drag.js new file mode 100644 index 0000000..b4e0b3a --- /dev/null +++ b/drag.js @@ -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); \ No newline at end of file diff --git a/index.css b/index.css index abdf5f0..e956870 100644 --- a/index.css +++ b/index.css @@ -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; diff --git a/index.html b/index.html index e15c3ae..f4cc851 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + LAOZHONGYI BLOG @@ -16,7 +16,7 @@
@@ -35,7 +35,8 @@

在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果

首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示

截图1 -

接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示

+

接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示 +

截图2

最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了

综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可

@@ -53,8 +54,8 @@ - - + + diff --git a/myui.css b/myui.css new file mode 100644 index 0000000..73bafc0 --- /dev/null +++ b/myui.css @@ -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; + } +} \ No newline at end of file