js浮動客服代碼演示地址大全,js浮動客服代碼演示地址大全下載

本文目錄一覽：

1、這是一段在線客服JS代碼它是右邊浮動的如何改讓它左浮動？
2、求一個能用的右側浮動JS代碼
3、浮動窗口的代碼（html/js）
4、jQuery實現的網頁左側在線客服效果代碼
5、JS網頁中的浮動窗口代碼？
6、js在線客服代碼

這是一段在線客服JS代碼它是右邊浮動的如何改讓它左浮動？

代碼中沒有出現left 及 width，可能在線客服的css style決定了它的豎直位置，請看看 divQQbox

等一些div的樣式。

求一個能用的右側浮動JS代碼

請將代碼放置在head/head之間即可

script language=”javascript”

suspendcode=”DIV id=lovexin style=’Z-INDEX: 10; LEFT: 850px; POSITION: absolute; TOP: 140px; width: 88px; height: 203px;’a href=”img src=’../20080128/er_p.jpg’ width=’150′ height=’200′ border=’0’/a/DIV”

document.write(suspendcode);

lastScrollY=0;

function heartBeat(){

diffY=document.body.scrollTop;

percent=.1*(diffY-lastScrollY);

if(percent0)percent=Math.ceil(percent);

else percent=Math.floor(percent);

document.all.lovexin.style.pixelTop+=percent;

lastScrollY=lastScrollY+percent;

}

window.setInterval(“heartBeat()”,1);

/script

代碼說明：

1、加到左側的時候,把left屬性改為10就好；

2、TOP是控制這個浮動廣告離上邊的距離，可以根據自己的實際情況進行調整；

3、這裡href=’和這裡img src=’../20080128/er_p.jpg’ 換成你想要的浮動廣告的圖片。其中這句src=../20080128/er_p.jpg’ width=’150′ height=’200’border=’0′ 中WIDTH=『150』 height=’200’是你浮動廣告圖片的寬和高。

浮動窗口的代碼（html/js）

第一種方法:

Html代碼

html

head

title浮動窗口/title

link type=”text/css” rel=”stylesheet” href=”css/overflow.css” /

script type=”text/javascript” src=”js/jquery.js”/script

script type=”text/javascript” src=”js/overflow.js”/script

script type=”text/javascript”

$(document).ready(function(){

var b = $(“#b”);

var overFlow = $(“#over”);

b.click(function(){

overFlow.fadeIn();

$(“#mask”).css(“background”,”#111″);

$(“#mask”).css(“opacity”,”0.8″);

})

$(“#close”).click(function(){

overFlow.fadeOut();

$(“#mask”).css(“background”,”#fff”);

$(“#mask”).css(“opacity”,”1″);

});

drag($(“#over”),$(“#title”));

}) ;

/script

/head

body

div id=”over”

div id=”title”span id=”t”這只是一個演示標題/spanspan id=”close”[ x ]/span/div

div id=”content”

When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.br/

—This is edited by Alp.

/div

div id=”mask” a id=”b” href=”#”click/a/div

/body

/html

Js代碼

function drag(overFlow,title){

title.onmousedown = function(evt){

var doc = document;

var evt = evt || window.event;

var x = evt.offsetX?evt.offsetX:evt.layerX;

var y = evt.offsetY?evt.offsetY:evt.layerY;

if(overFlow.setCapture){

overFlow.setCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove = function(evt){

evt = evt || window.event;

var xPosition = evt.pageX || evt.clientX;

var yPosition = evt.pageY || evt.clientY;

var newX = xPosition – x;

var newY = yPosition – y;

overFlow.style.left = newX;

overFlow.style.top = newY;

};

doc.onmouseup = function(){

if(overFlow.releaseCapture){

overFlow.releaseCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove=null;

doc.onmouseup=null;

};

}

css代碼

#over{

position: absolute;

left: 300px;

top: 200px;

border: 1px solid black;

display: none;

background: #cccccc;

cursor: default;

width: 300px;

z-index: 10;

opacity: 1;

}

#title{

border: 1px solid #1840C4;

background: #95B4DC;

padding: 2px;

font-size:12px;

cursor: default;

}

#close{

cursor: pointer;

margin-right: 1px;

overflow: hidden;

}

#content{

border: 1px solid #C2D560;

background: #EFF4D7;

}

#t{

margin-right:145px;

}

#mask{

z-index: 1;

background: #fff;

width: 1024px;

height: 800px;

}

#b{

position: absolute;

left: 200px;

top: 100px;

}

body{

padding: 0px;

margin: 0px;

}

#over{

background: transparent;

}

第二種方法:

消息框遮罩層:iframe id=”show_upload_iframe” frameborder=0 scrolling=”no” style=”display:none; position:absolute;”/iframediv id=”show_upload”nothing…/div’

頁面載入loading中:div id=”body_loading” onClick=”loaded();”img src=”__PUBLIC__/images/body_load.gif”/div

關閉浮動窗口:a href=”javascript:hideupload()”關閉窗口建議用小圖片/a

打開浮動窗口:a href=”javascript:showupload(‘admin.php’)”打開浮動/a

// 消息框loading

function loading(){

var o = $(‘#body_loading’);

o.css(“left”,(($(document).width())/2-(parseInt(o.width())/2))+”px”);

o.css(“top”,(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+”px”);

o.fadeIn(“fast”);

}

// 消息框消失

function loaded(){

var o = $(‘#body_loading’);

o.fadeOut(“fast”);

}

// 隱藏浮動窗口

function hideupload(){

$(‘#show_upload’).hide();

$(‘#show_upload_iframe’).hide();

}

// 彈出浮動窗口

function showupload(ajaxurl){

loading();

var o=$(‘#show_upload’);

var f=$(‘#show_upload_iframe’);

var top = 200;

$.ajax({

url: ajaxurl,

//cache: false,

success: function(res){

loaded();

o.html(res);

o.css(“left”,(($(document).width())/2-(parseInt(o.width())/2))+”px”);

if($(document).scrollTop()200){

top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);

}

o.css(“top”,top+”px”);

f.css({‘width’:o.width(),’height’:o.height(),’left’:o.css(‘left’),’top’:o.css(‘top’)});

f.show();

o.show();

}

});

}

jQuery實現的網頁左側在線客服效果代碼

本文實例講述了jQuery實現的網頁左側在線客服效果代碼。分享給大家供大家參考，具體如下：

這是又一個網頁上的在線客服代碼，不錯，可以用一下哦。與其它客服不一樣的地方呢？無非是在網頁左側滑出，可對客服類型分組，又多了一個功能，哈哈。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

!DOCTYPE

html

PUBLIC

“-//W3C//DTD

XHTML

1.0

Transitional//EN”

“”

html

xmlns=””

head

title網頁左側浮動jquery在線QQ客服代碼/title

style

*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}

QQbox

.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px

0;position:fixed;}

*html,

*html

body{background-image:url(about:blank);background-attachment:fixed;}

*html

.QQbox{position:absolute;

top:expression(eval(document.documentElement.scrollTop));}

.QQbox

.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}

.QQbox

.Qlist{float:left;width:410px;background:url(images/bj01.png)

no-repeat;background-position:1px

0px;height:436px;display:block;overflow:hidden;zoom:1;}

.QQbox

.Qlist

.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}

.QQbox

.Qlist

.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}

.QQbox

.Qlist

.con

li{height:31px;list-style:none;margin-left:35px;}

.QQbox

.Qlist

.con

a{font-size:13px;margin-left:18px;text-decoration:none;}

.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}

.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)

no-repeat;margin-top:-45px;margin-left:220px;}

/style

script

type=”text/javascript”

src=”jquery-1.6.2.min.js”/script

/head

body

div

id=”divQQbox”

class=”QQbox”

div

id=”divOnline”

class=”Qlist”

div

class=”OnlineLeft”

div

class=”con”

li售前諮詢a

target=”_blank”