diff --git a/fixed.html b/fixed.html new file mode 100644 index 0000000..84b2132 --- /dev/null +++ b/fixed.html @@ -0,0 +1,56 @@ + + + + + 组件库 + + + + +
+ +
+
+ + 意见
反馈 + +
+ +
+ +
+
+ + +
+
+
+

微信公众号

+ +
+
+
+ +
+
+ + 客服
电话 + +
+
+
0551-6668888
+
+
+ +
+
+ + + 置顶 +
+
+
+ + diff --git a/index.html b/index.html index 46f6b84..3f470c6 100644 --- a/index.html +++ b/index.html @@ -3,36 +3,40 @@ 组件库 - - - -
- -
-
- - 客服电话 - -
-
-
0551-6668888
- -
-
- -
-
- - 返回顶部 - -
-
-
- - + + + + + + + + + diff --git a/js/conponents.js b/js/conponents.js deleted file mode 100644 index 7257e7e..0000000 --- a/js/conponents.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * 常用组件库 - * -**/ - -/* 网站右下角悬浮常用组件 */ - -function Fixed() { - this.fixed = null - this.setting = { - type: '1', - colorStyle: 'blue' - } -} - -// 初始化 -Fixed.prototype.init = function(opt){ - extend(this.setting, opt) - this.create() -} -// 创建元素 -Fixed.prototype.create =function(){ - this.fixed = document.createElement('div') - this.fixed.className = 'conponent_fixed' - this.fixed.innerHTML = '

123

' - - document.body.appendChild(this.fixed) -} - -function extend(defaultVal, newVal) { - for(var e in newVal) { - defaultVal[e] = newVal[e] - } -} \ No newline at end of file diff --git a/css/common.css b/plugins/css/common.css similarity index 100% rename from css/common.css rename to plugins/css/common.css diff --git a/css/conponent.css b/plugins/css/conponent.css similarity index 54% rename from css/conponent.css rename to plugins/css/conponent.css index 1945dac..94ec8ce 100644 --- a/css/conponent.css +++ b/plugins/css/conponent.css @@ -22,15 +22,16 @@ .conponent_fixed_item{ position: relative; - margin-top: 5px; + margin-bottom: 5px; padding: 5px; - width: 40px; - height: 40px; + width: 50px; + height: 50px; text-align: center; background: #FFF; cursor: pointer; color: #AAA; border-radius: 4px; + box-sizing: border-box; box-shadow: 0px 0px 2px rgba(33, 33, 33, .1); } @@ -41,7 +42,8 @@ z-index: 99; } /* 图标 */ -.conponent_fixed_item .icon{ +.conponent_fixed_item .icon, +.conponent_fixed_item .icon_hover{ display: block; width: 100%; height: 100%; @@ -52,15 +54,27 @@ .conponent_fixed_item:hover .icon{ opacity: 0; } +.conponent_fixed_item .icon_hover{ + position: absolute; + top: 0; + left: 0; + width: inherit; + height: inherit; + opacity: 0; +} +.conponent_fixed_item:hover .icon_hover{ + opacity: 1; +} /* 文字 */ .conponent_fixed_item .text { position: absolute; top: 0; left: 0; - padding: 4px 0; + padding: 2px 0; width: inherit; height: inherit; + font-size: 12px; line-height: 18px; opacity: 0; transition: all 0.3s; @@ -78,8 +92,8 @@ display: none; padding-right: 6px; position: absolute; - top: 0; right: 50px; + bottom: 0; z-index: 9; } .conponent_fixed_item .pop .msg{ @@ -97,6 +111,46 @@ animation: fadeIn 0.5s; } +@keyframes fadeIn { + 0% { + opacity: 0; + right: 80px; + } + 100% { + opacity: 1; + right: 50px; + } +} + +.conponent_fixed_item .pop .img{ + padding: 12px; + font-size: 12px; + background-color: #FFF; + border-radius: 4px; + box-shadow: 0px 0px 2px rgba(33, 33, 33, .1); +} +.conponent_fixed_item .pop .img p{ + padding-bottom: 5px; + color: #444; + line-height: 1.3; +} +.conponent_fixed_item .pop .img img { + display: block; + width: 128px; +} + + + +.conponent_fixed_item.feedback .icon{ + background-image: url('../img/icon-feedback_1.png'); +} +.conponent_fixed_item.qrcode .icon{ + background-image: url('../img/icon-vx_1.png'); +} +.conponent_fixed_item.qrcode .icon_hover{ + background-image: url('../img/icon-vx_1.1.png'); + /* background-image: url('../img/icon-qrcode_1.png'); */ +} .conponent_fixed_item.phone .icon{ background-image: url('../img/icon-phone_1.png'); } @@ -104,13 +158,43 @@ background-image: url('../img/icon-top_1.png'); } -@keyframes fadeIn { +.conponent_fixed_item.totop{ + margin-bottom: unset; +} +.conponent_fixed_item.totop._hide{ + max-height: 0; + padding: 0; + animation: topFadeOut 0.3s; +} +@keyframes topFadeOut { + 0% { + max-height: 50px; + padding: 5px 0; + } + 100% { + max-height: 0; + padding: 0; + opacity: 0; + } +} +.conponent_fixed_item.totop._show{ + max-height: 50px; + padding: 5px 0; + animation: topFadeIn 0.3s; +} +@keyframes topFadeIn { 0% { + max-height: 0; opacity: 0; - right: -110px; } 100% { + max-height: 50px; opacity: 1; - right: 50px; } -} \ No newline at end of file +} + +/* 组件风格设置 */ +.conponent_fixed.circle .conponent_fixed_item{ + margin-top: 8px; + border-radius: 50%; +} diff --git a/plugins/img/icon-feedback_1.png b/plugins/img/icon-feedback_1.png new file mode 100644 index 0000000..8bf6506 Binary files /dev/null and b/plugins/img/icon-feedback_1.png differ diff --git a/img/icon-phone_1.png b/plugins/img/icon-phone_1.png similarity index 100% rename from img/icon-phone_1.png rename to plugins/img/icon-phone_1.png diff --git a/plugins/img/icon-qrcode_1.png b/plugins/img/icon-qrcode_1.png new file mode 100644 index 0000000..c411703 Binary files /dev/null and b/plugins/img/icon-qrcode_1.png differ diff --git a/img/icon-top_1.png b/plugins/img/icon-top_1.png similarity index 100% rename from img/icon-top_1.png rename to plugins/img/icon-top_1.png diff --git a/plugins/img/icon-vx_1.1.png b/plugins/img/icon-vx_1.1.png new file mode 100644 index 0000000..b05cecc Binary files /dev/null and b/plugins/img/icon-vx_1.1.png differ diff --git a/plugins/img/icon-vx_1.png b/plugins/img/icon-vx_1.png new file mode 100644 index 0000000..8589e1b Binary files /dev/null and b/plugins/img/icon-vx_1.png differ diff --git a/plugins/js/conponents.js b/plugins/js/conponents.js new file mode 100644 index 0000000..4d13c52 --- /dev/null +++ b/plugins/js/conponents.js @@ -0,0 +1,116 @@ +/** + * 常用组件库 + * +**/ + +var linkCss_1 = document.createElement('link') +linkCss_1.setAttribute('rel', 'stylesheet') +linkCss_1.setAttribute('href', 'plugins/css/common.css') +document.head.appendChild(linkCss_1) +var linkCss_2 = document.createElement('link') +linkCss_2.setAttribute('rel', 'stylesheet') +linkCss_2.setAttribute('href', 'plugins/css/conponent.css') +document.head.appendChild(linkCss_2) + + +/* 对象继承 */ +function extend(defaultVal, newVal) { + for(var e in newVal) { + defaultVal[e] = newVal[e] + } +} + +/* 网站右下角悬浮常用组件 */ +// 构造悬浮组件 +function Fixed() { + this.fixed = null + this.setting = { + fixedStyle: 'default', + dataValue: { + phone: '0551-6668888', + vxQrcode: 'plugins/img/icon-qrcode_1.png' + } + } +} +// 初始化 +Fixed.prototype.init = function(opt){ + extend(this.setting, opt) + this.create() + this.addEvent() +} +// 创建元素 +Fixed.prototype.create = function() { + this.fixed = document.createElement('div') + this.fixed.className = 'conponent_fixed' + this.fixed.innerHTML = ` +
+
+ + 意见
反馈 +
+
+
+
+ + +
+
+
+

微信公众号

+ +
+
+
+
+
+ + 客服
电话 +
+
+
${this.setting.dataValue.phone}
+
+
+
+
+ + 置顶 +
+
+ ` + if (this.setting.fixedStyle !== '') { + this.fixed.classList.add(this.setting.fixedStyle) + } + document.body.appendChild(this.fixed) +} +// 事件绑定 +Fixed.prototype.addEvent = function() { + var totop = document.getElementsByClassName('totop')[0]; + var scrollTop = document.documentElement.scrollTop + setToTop(); + totop.onclick = function() { + scrollTop = document.documentElement.scrollTop + var timer = setInterval(function() { + if (scrollTop > 0) { + scrollTop -= 20 + scrollTo(0, scrollTop) + } else { + clearInterval(timer) + } + }, 10) + } + + window.onscroll = function() { + scrollTop = document.documentElement.scrollTop; + setToTop(); + } + + function setToTop() { + if (scrollTop > 400) { + totop.classList.add('_show'); + totop.classList.remove('_hide'); + } else { + totop.classList.add('_hide'); + totop.classList.remove('_show'); + } + } +}