You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.9 KiB
116 lines
2.9 KiB
/**
|
|
* 常用组件库
|
|
*
|
|
**/
|
|
|
|
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)
|
|
}
|
|
}, 8)
|
|
}
|
|
|
|
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');
|
|
}
|
|
}
|
|
}
|
|
|