首页 >web前端 >js教程 >可浮动QQ在线客服_javascript技巧

可浮动QQ在线客服_javascript技巧

WBOY原创: 2016-05-16 19:00:021174浏览

(function(){ 
QQMenuInt=_QQMenuInt; 
 moveQQmenu=_moveQQmenu; 
function _QQMenuInt(){ 
QQMenu.style.position="absolute"; 
QQMenu.style.display=""; 
if(parseInt(document.documentElement.offsetWidth) >1024){ 
QQMenuPosition.Left =(parseInt(document.documentElement.offsetWidth)-1024-20); 
} 
if(QQMenuPosition.isRight){ 
QQMenu.style.right= QQMenuPosition.Left "px"; 
}else{ 
QQMenu.style.left=QQMenuPosition.Left "px"; 
QQMenu.style.top=QQMenuPosition.Top "px" 
moveQQmenu(); 
} 
function _moveQQmenu(){ 
var from=parseInt(QQMenu.style.top,10); 
var yOffset 
var to=window.pageYOffset; ?window.pageYOffset:document.documentElement.scrollTop; 
to=to QQMenuPosition.Top; 
if(to!=from){ 
yOffset = Math.ceil(Math.abs(to-from)/ 20); 
if(tovar oldTop=parseInt(QQMenu.style.top,10); 
QQMenu.style.top=(oldTop yOffset) "px" ; 
} 
if(QQMenu.style.display!="none"){ 
window.setTimeout("moveQQmenu()",QQMenuPosition.timeout); 
} 
} 
})() 

使用方法： 1、引入上面的js
2、在页面的最后面加上

复制代码代码如下：

var QQMenuPosition={Left:10,Top:200,isRight:false,timeout:10}
var QQMenu=document.getElementById("QQMenu");
QQMenuInt();
脚本>

QQMenu为漂浮层的最外层ID
QQMenuPosition是设置漂浮层相关参数
Left:层相对于左侧的偏移量。如果isRight为true则是相对于右侧的偏移量
Top:层相对于顶部的偏移量
timeout:层移动时间间隔，越大越慢

<title>Untitled</title> 
    <style type="text/css"> 
        /*QQ在线客服务处*/ 
        .kefuchu{ width:109px;} 
        .SS_dh1{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh1.jpg) no-repeat; height:51px; width:84px; float:left} 
        .SS_dh2{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh2.jpg) no-repeat; height:51px; width:25px; float:left; display:block} 
        .SS_dh3{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh3.jpg) repeat-y; width:109px; } 
        .SS_dh4{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh4.jpg) no-repeat; height:17px; width:109px; } 
        .SS_dh5{background:url(http://img.jb51.net/online/qq/images/SSindex/SS_dh5.jpg) no-repeat; height:23px; width:74px; margin-left:20px;} 
    </style>

fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf
fsdafsdfsfsdf

fsdafsdfsfsdf 
<div class="kefuchu" id="QQMenu" style="display:none;"> 
    <div class="SS_dh1"> 
        </div>
<a class="SS_dh2" href="javascript:void(0)" onclick="QQMenu.style.display='none'"> 
        </a><span class="clear"> 
        </span><div class="SS_dh3"> 
        <div class="SS_dh5"> 
            <a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a>
</div>
<script type="text/javascript" src="http://img.jb51.net/online/qq/js/QQMenu.js"></script><span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime=' Math.random() '&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
            <span class="blank8"></span> 
            <div class="SS_dh5"><a href="http://sighttp.qq.com/cgi-bin/check?sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc" target="_blank;" onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=d7bb49730f3ed47c475611fe4baa06914c1c954e4674e29bc09d96892eae6edc';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img border="0" src="http://wpa.qq.com/pa?p=1:461478385:1" alt="可浮动QQ在线客服_javascript技巧"></a></div> 
            <span class="clear"></span> 
        </div> 
        <span class="clear"></span> 
        <div class="SS_dh4"></div> 
    </div> 
<script type="text/javascript"> 
    var QQMenuPosition={Left:10,Top:200,isRight:false,timeout:10} 
    var QQMenu=document.getElementById("QQMenu"); 
    QQMenuInt(); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

打包下载

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Javascript调试脚本的经验之谈_javascript技巧下一篇：限制复选框的最大可选数的js代码_表单特效

查看更多

可浮动QQ在线客服_javascript技巧

相关文章