首页 > 编程知识 正文

js浮动客服代码演示地址大全,js浮动客服代码演示地址大全下载

时间:2023-12-27 22:27:29 阅读:326140 作者:UJNL

本文目录一览:

这是一段在线客服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

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

ul

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

.QQbox

.Qlist

.con

ul

li

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"

ul

li售前咨询a

target="_blank"

href="tencent://message/?uin=12345678Site=;Menu=yes"img

border="0"

src=""/a/li

li网站建设a

target="_blank"

href="tencent://message/?uin=12345678Site=;Menu=yes"img

border="0"

src=""/a/li

li网站优化a

target="_blank"

href="tencent://message/?uin=12345678Site=;Menu=yes"img

border="0"

src=""/a/li

li整合营销a

target="_blank"

href="tencent://message/?uin=12345678Site=;Menu=yes"img

border="0"

src=""/a/li

li售后服务a

target="_blank"

href="tencent://message/?uin=12345678Site=;Menu=yes"img

border="0"

src=""/a/li

/ul

/div

/div

div

class="OnlineBtn"

/div

/div

/div

script

type="text/javascript"

$(function(){

//建站热线展开效果

$("#divQQbox").hover(

function(){

$(this).stop(true,false);

$(this).animate({left:0},300);

},

function(){

$(this).animate({left:-276},149);

}

)

});

/script

/body

/html

希望本文所述对大家jQuery程序设计有所帮助。

JS网页中的浮动窗口代码?

script

function scrolls(){

var advobj=document.getElementById("adv");

advobj.style.top=100+document.documentElement.scrollTop+"px";

}

window.onscroll=scrolls;

function winclose(){

var advobj=document.getElementById("adv");

advobj.style.display="none";

}

/script

body

!--随滚动条移动的浮动窗口############################--

div id="adv" style=""

img src="图片路径"/

div id="close" onclick="winclose()"关闭/div

/div

div id="header"iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"/iframe/div

/body

js在线客服代码

将index里的代码对应你要放客服代码的页面,复制粘贴就可以了,注意 js放到head之前就行了,图片放入相对路程径的图片文件夹下。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。