1、点击飘窗 随机选择客服QQ进行联系
<style type="text/css">
#moveWindow {
width: 170px;
height:90px;
position: absolute;
cursor: pointer;
z-index: 999;
}
</style>
<%--联系我们窗口飘动 --%>
<iframe style="display:none;" id="qq_iframe" src=""></iframe>
<div id="moveWindow">
<a id="close" href="javascript:void(0);" style="color:red;float:right;">×关闭</a>
<a id="item" title="联系我们" href="javascript:void(0);" target="_blank">
<img width="100%" height="100%" src="/static/image/contactUs/contactUs1.jpg" alt="联系我们"/>
</a>
</div>
<script type="text/javascript">
var x= 5;
var y= 5;
$(function(){
var move = setInterval(moves,100);
//悬停停止运动
$("#moveWindow").mouseover(function() {
clearInterval(move);
});
//移开鼠标后继续运动
$("#moveWindow").mouseout(function() {
move = setInterval(moves, 100);
});
})
$("#close").click(function() {//绑定关闭按钮事件
$("#moveWindow").remove();
});
//点击图片事件
$("#item").click(function(){
var qq_list = '${qq_list}'.split(",");
//随机
var qq_i = Math.floor(Math.random()*qq_list.length);
src = "tencent://message/?uin="+qq_list[qq_i]+"&Site;=&menu;=yes";
$('#qq_iframe').attr('src',src);
})
function moves() {
var mw = $("#moveWindow").offset();
var lefts = mw.left;
var tops = mw.top;
if(lefts >= $(window).width() - $("#moveWindow").width() || lefts < 0){
x = -x
}
if(tops >= $(window).height() - $("#moveWindow").height() || tops < 0){
y = -y
}
lefts += x;
tops += y;
$("#moveWindow").offset({
top: tops,
left: lefts
});
}
</script>
效果如下
点击效果