在线qq客服代码生成, jquery qq漂浮窗在线客服代码

谁最爱你 2019-11-22 121 阅读

特效描述:jquery鼠标滑过 网页右侧固定层 qq漂浮窗在线客服,qq漂浮窗口 兼容性比较好 一般主流浏览器都兼容

代码部署教程

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js">
</script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>

右侧悬浮jquery在线客服</title>

</head>

<body style="height:2000px;">

<div id="cus_ser">

<div class="cus_ser_">

<div class="title">

</div>

<ul>

<li id="zqq">

<a href="http://wp.qq.com/wpa/qunwpa?idkey=6fcb83942dc3630777ae7745bd5093a1a5917f915f4e95cfc498633379ebfbb4" target="_blank">

123456</a>

</li>

<li id="zphone">

000000000</li>

<li id="wb">

<a href="http://www.cxvn.com/" target="_blank">

腾讯微博</a>

&nbsp;&nbsp;<a href="http://www.cxvn.com/" target="_blank">

新浪微博</a>

</li>

</ul>

</div>

<span class="close">

<img src="images/icon_close.png" />

</span>

</div>

<script type="text/javascript">

$("#cus_ser .close").click(function(){
$("#cus_ser").css({
display: 'none'
});
});
$("#cus_ser").mouseover(function(){
$(this).stop();
$(this).animate({width: 165},400,'swing');
});
$("#cus_ser").mouseout(function(){
$("#cus_ser").stop();
$("#cus_ser").animate({width:32},400, 'swing');
});
</script>

</body>

</html>

演示地址下载地址

最新游戏