“联系我们”飘窗实现

博客介绍了点击飘窗可随机选择客服QQ进行联系的功能,展示了点击后的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

效果如下

点击效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值