代震
4 years ago
16 changed files with 766 additions and 540 deletions
@ -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> |
|||
@ -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] |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 572 B |
|
Before Width: | Height: | Size: 635 B After Width: | Height: | Size: 635 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -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'); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue