拍拍悬浮客服代码怎么添加

拍拍悬浮客服代码怎么添加,第1张

添加的方法:进入“我的拍拍 >店铺管理 >”在“模块内容管理—店铺首页内容管理”进入添加;把下面的代码打进去就可以了

<div style="width:130pxbottom:70%zoom:1display:inlineright:40pxcolor:#000000font-size:12pxtext-align: center" class="top_link">

<table width="130" height="200" border="2" cellpadding="0" cellspacing="0" bordercolor="#66FF99" bgcolor="#FFFFFF">

<tr><td><div align="center">联系客服</div></td></tr></table>

</div>

right:40px 意思距离右边的距离,如果换成left 整个客服代码就到左边了。

width:130px 意思是客服框总宽度。

bottom:70% 调整客服框的在整个网页中的上下位置,50%就是中间了。

把文字“联系客服”可以换成你自己的文字

“内容自己填写”地方换QQ客服,和文字公告就可以了

#66FF99 可以换成其它颜色,当然你也可以插入好看的背景图,

class="top_link" 千万别删,是这个浮动的必需全指着拍拍网的CSS,这是返回顶端的那个按扭CSS样式。

1、首先创建一个名为“topwindows.html”的网页文件,其中的内容将被展示主页浮动窗口中。

2、网页浮动窗口对应的部分代码如下所示:

<html>

<style>

.img_wd{

font-size:30padding-top:20px

text-align:leftpadding-left:70pxline-height:40px

background:url(110.jpg) top center no-repeat

width:252pxheight:127pxline-heiht:10px

text-align:center

font-family:"微软雅黑,仿宋,楷体,黑体"

color: #fafafa

text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px

}

</style>

<body>

<div class="img_wd" style="">

青春就是这么任性!<Br>

Younger GOOD

</div>

</body>

</html>

3、接着将如空散图所示的代码添加到主页<Body>和</Body>之间:

其中标签"fdck”中的属性SRC指向浮动窗口的网页地址。

<div id="img" style="position: absolutevisibility :hiddenpadding:0px" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">

<span style="CURSOR:handcolor:redfont-weight:boldfont-align:centerfont-size:12pxpadding-left:0px" onclick="clearInterval(interval)fdck.style.visibility = 'hidden'img.style.visibility = 'hidden'">隐藏</span>

<div id="fdck" style="width:100%height:100%font-align:centervisibility:visibleborder:0pxbackground-color: no">

<iframe width=320 height=150 src="topWindows.html" frameborder=no scrolling="no">

</iframe>

</div>

</div>

4、接下来需要添加浮动窗口随时运行的行为,对应代码如下:

<script language=javascript>

var xPos = 20

var yPos = document.body.clientHeight

var step = 1

var delay = 30

var height = 0

var Hoffset = 0

var Woffset = 0

var yon = 0

var xon = 0

var pause = true

var interval

手亏改img.style.top = yPos

function changePos() {

width = document.body.clientWidth

 毕判 height = document.body.clientHeight

Hoffset = img.offsetHeight

Woffset = img.offsetWidth

img.style.left = xPos + document.body.scrollLeft

img.style.top = yPos + document.body.scrollTop

if (yon) {yPos = yPos + step}

else {yPos = yPos - step}

if (yPos <0) {yon = 1yPos = 0}

if (yPos >= (height - Hoffset)) {yon = 0

yPos = (height - Hoffset)}

if (xon) {xPos = xPos + step}

else {xPos = xPos - step}

if (xPos <0) {xon = 1xPos = 0}

if (xPos >= (width - Woffset)) {xon = 0xPos = (width - Woffset)}

}

function start() {

img.style.visibility = "visible"

interval = setInterval('changePos()', delay)}

start()

</script>

5、在此需要说明一点,需要将以上所有代码(包括JS脚本)全部放置在<body>和</body>之间。

6、最后查看一下浮动窗口的效果,会发现浮动窗口在网页中不断的移动,当鼠标悬停其上时会停止移动,点击“隐藏”按钮将自动隐藏悬浮窗口。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11985588.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存