front
/
conponent_web
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

悬浮组件1.0

master
代震 4 years ago
parent
b7e0fb9d87
commit
d4cc2b1b67
16 changed files with 766 additions and 540 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      fixed.html
  2. 62
      index.html
  3. 34
      js/conponents.js
  4. 0
      plugins/css/common.css
  5. 102
      plugins/css/conponent.css
  6. BIN
      plugins/img/icon-feedback_1.png
  7. 0
      plugins/img/icon-phone_1.png
  8. BIN
      plugins/img/icon-qrcode_1.png
  9. 0
      plugins/img/icon-top_1.png
  10. BIN
      plugins/img/icon-vx_1.1.png
  11. BIN
      plugins/img/icon-vx_1.png
  12. 116
      plugins/js/conponents.js

56
fixed.html
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>组件库</title>
<link rel="stylesheet" href="plugins/css/common.css">
<link rel="stylesheet" href="plugins/css/conponent.css">
</head>
<body style="height: 1800px;">
<div class="conponent_fixed circle">
<!-- 反馈 -->
<div class="conponent_fixed_item feedback">
<div class="item">
<span class="icon"></span>
<span class="text">意见<br />反馈</span>
<!-- <span class="text word_2">反馈</span> -->
</div>
<!-- <div class="pop">
<div class="msg"><span>0551-6668888</span></div>
</div> -->
</div>
<!-- 公众号 -->
<div class="conponent_fixed_item qrcode">
<div class="item">
<span class="icon"></span>
<span class="icon_hover"></span>
</div>
<div class="pop">
<div class="img">
<p>微信公众号</p>
<img src="plugins/img/icon-qrcode_1.png" alt="">
</div>
</div>
</div>
<!-- 客服 -->
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
<!-- <span class="text word_2">客服</span> -->
</div>
<div class="pop">
<div class="msg"><span>0551-6668888</span></div>
</div>
</div>
<!-- 置顶 -->
<div class="conponent_fixed_item totop show">
<div class="item">
<span class="icon"></span>
<!-- <span class="text">返回<br />顶部</span> -->
<span class="text word_2">置顶</span>
</div>
</div>
</div>
</body>
</html>

62
index.html
View File

@ -3,36 +3,40 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>组件库</title> <title>组件库</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/conponent.css">
</head> </head>
<body> <body style="height: 1800px;">
<div class="conponent_fixed"> <!-- 生产环境--start -->
<!-- 客服 --> <script src="plugins/js/conponents.js"></script>
<div class="conponent_fixed_item phone"> <script type="text/javascript">
<div class="item"> var fixed = new Fixed();
<span class="icon"></span> /**
<span class="text">客服电话</span> * fixedStyle: 组件类型；可选值 'circle'
<!-- <span class="text word_2">客服</span> --> * dataValue: 组件内容
</div> **/
<div class="pop"> fixed.init({
<div class="msg"><span>0551-6668888</span></div> fixedStyle: '',
<!-- <div class="img"><img src="img/icon-phone_1.png" alt=""></div> --> dataValue: {
</div> phone: '0551-6668388',
</div> vxQrcode: 'plugins/img/icon-vx_1.1.png'
<!-- 置顶 --> }
<div class="conponent_fixed_item totop"> });
<div class="item">
<span class="icon"></span>
<span class="text">返回顶部</span>
<!-- <span class="text word_2">置顶</span> -->
</div>
</div>
</div>
<script src="js/conponents.js"></script>
<script>
// var fixed = new Fixed();
// fixed.init();
</script> </script>
<!-- 生产环境--end -->
<!-- 演示内容--start -->
<input onclick="newFixed()" style="position: fixed;top:20px;background-color: #3AF;color:#FFF" type="button" value="默认" />
<input onclick="newFixed('circle')" style="position: fixed;top:50px;background-color: #3AF;color:#FFF" type="button" value="类型1" />
<script type="text/javascript">
function newFixed(style) {
fixed = null
document.getElementsByClassName('conponent_fixed')[0].remove();
fixed = new Fixed();
fixed.init({
fixedStyle: style ? style : 'default'
});
}
</script>
<!-- 演示内容--end -->
</body> </body>
</html> </html>

34
js/conponents.js
View File

@ -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 = '<p>123</p>'
document.body.appendChild(this.fixed)
}
function extend(defaultVal, newVal) {
for(var e in newVal) {
defaultVal[e] = newVal[e]
}
}

0
css/common.css → plugins/css/common.css
View File

102
css/conponent.css → plugins/css/conponent.css
View File

@ -22,15 +22,16 @@
.conponent_fixed_item{ .conponent_fixed_item{
position: relative; position: relative;
margin-top: 5px; margin-bottom: 5px;
padding: 5px; padding: 5px;
width: 40px; width: 50px;
height: 40px; height: 50px;
text-align: center; text-align: center;
background: #FFF; background: #FFF;
cursor: pointer; cursor: pointer;
color: #AAA; color: #AAA;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box;
box-shadow: 0px 0px 2px rgba(33, 33, 33, .1); box-shadow: 0px 0px 2px rgba(33, 33, 33, .1);
} }
@ -41,7 +42,8 @@
z-index: 99; z-index: 99;
} }
/* 图标 */ /* 图标 */
.conponent_fixed_item .icon{ .conponent_fixed_item .icon,
.conponent_fixed_item .icon_hover{
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -52,15 +54,27 @@
.conponent_fixed_item:hover .icon{ .conponent_fixed_item:hover .icon{
opacity: 0; 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 { .conponent_fixed_item .text {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
padding: 4px 0; padding: 2px 0;
width: inherit; width: inherit;
height: inherit; height: inherit;
font-size: 12px;
line-height: 18px; line-height: 18px;
opacity: 0; opacity: 0;
transition: all 0.3s; transition: all 0.3s;
@ -78,8 +92,8 @@
display: none; display: none;
padding-right: 6px; padding-right: 6px;
position: absolute; position: absolute;
top: 0;
right: 50px; right: 50px;
bottom: 0;
z-index: 9; z-index: 9;
} }
.conponent_fixed_item .pop .msg{ .conponent_fixed_item .pop .msg{
@ -97,6 +111,46 @@
animation: fadeIn 0.5s; 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{ .conponent_fixed_item.phone .icon{
background-image: url('../img/icon-phone_1.png'); background-image: url('../img/icon-phone_1.png');
} }
@ -104,13 +158,43 @@
background-image: url('../img/icon-top_1.png'); 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% { 0% {
max-height: 0;
opacity: 0; opacity: 0;
right: -110px;
} }
100% { 100% {
max-height: 50px;
opacity: 1; opacity: 1;
right: 50px;
} }
} }
/* 组件风格设置 */
.conponent_fixed.circle .conponent_fixed_item{
margin-top: 8px;
border-radius: 50%;
}

BIN
plugins/img/icon-feedback_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

0
img/icon-phone_1.png → plugins/img/icon-phone_1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
plugins/img/icon-qrcode_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 572 B

0
img/icon-top_1.png → plugins/img/icon-top_1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 635 B

After

Width:  |  Height:  |  Size: 635 B

BIN
plugins/img/icon-vx_1.1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
plugins/img/icon-vx_1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

116
plugins/js/conponents.js
View File

@ -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 = `
<div class="conponent_fixed_item feedback">
<div class="item">
<span class="icon"></span>
<span class="text">意见<br />反馈</span>
</div>
</div>
<div class="conponent_fixed_item qrcode">
<div class="item">
<span class="icon"></span>
<span class="icon_hover"></span>
</div>
<div class="pop">
<div class="img">
<p>微信公众号</p>
<img src="${this.setting.dataValue.vxQrcode}" alt="">
</div>
</div>
</div>
<div class="conponent_fixed_item phone">
<div class="item">
<span class="icon"></span>
<span class="text">客服<br />电话</span>
</div>
<div class="pop">
<div class="msg"><span>${this.setting.dataValue.phone}</span></div>
</div>
</div>
<div class="conponent_fixed_item totop">
<div class="item">
<span class="icon"></span>
<span class="text word_2">置顶</span>
</div>
</div>
`
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');
}
}
}
Write Preview
Loading…
Cancel
Save