“联系我们”飘窗实现

最新推荐文章于 2024-01-23 12:36:23 发布

小巷陌影

最新推荐文章于 2024-01-23 12:36:23 发布

阅读量988

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript html 文章标签： html 飘窗

本文链接：https://blog.youkuaiyun.com/xiaoyanli8077/article/details/88709921

javascript 同时被 2 个专栏收录

33 篇文章

订阅专栏

html

7 篇文章

订阅专栏

博客介绍了点击飘窗可随机选择客服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>

效果如下

点击效果