“联系我们”飘窗实现

我就是我 2022-03-01 00:05 157阅读 0赞

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>

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]

点击效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: /images/20220301/78aa5c891c8f4b17b9ae518dce4fbe82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1]: /images/20220301/8b1f0eb772104eaf8cabab8673ab4979.png

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关网页飘窗（找个位置随便放）

*初始位置：上、左*///自己添加的，官方没有。/*选定漂浮元素*//*鼠标移入移出*/

曾经终败给现在/ 2024年04月26日 03:37/ 0 赞/ 65 阅读

相关 vue飘窗效果（css飘窗效果，跟随页面滚动）

简述：飘窗效果，相信大家都见过，一般用于官网页面，下面给大家整理了下，飘窗效果在vue中的使用，效果图如下； ![bc01fa64861b47499b8c32269b08

妖狐艹你老母/ 2023年10月04日 22:03/ 0 赞/ 43 阅读

相关 js实现雪花飘落效果

js实现雪花飘落效果我们可以先看看效果点这里 [雪花][Link 1] ![雪花飘落][watermark_type_ZmFuZ3poZW5naGVpdGk_

比眉伴天荒/ 2023年02月13日 05:50/ 0 赞/ 10 阅读

相关 js实现漂亮的雪花飘落效果

js实现漂亮的雪花飘落效果效果如下：雪花飘落四个按钮控制雪花的生成与停止关键代码：这个代码还有许多不足，希望大佬指正 var W =

Bertha 。/ 2022年12月25日 00:47/ 0 赞/ 205 阅读

相关 JQuery网页飘窗

HTML结构 body： <div class="float-container" id="ad1" style="position: absolute; le

我不是女神ヾ/ 2022年12月20日 08:52/ 0 赞/ 111 阅读

相关右侧联系我们html,HTML5 带输入箭头提示框的联系我们表单模板

CSS 语言： CSSSCSS 确定 /\source: http://webdesign.tutsplus.com/tutorials/bring-your-form

旧城等待，/ 2022年10月06日 00:38/ 0 赞/ 80 阅读

相关简单说 JavaScript实现雪花飘落效果

说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 ![这里写图片

深藏阁楼爱情的钟/ 2022年06月05日 11:05/ 0 赞/ 693 阅读

相关网页前台页面图片飘窗代码

[网页前台页面图片飘窗代码][Link 1]  <div id="img1" style="z-index:

╰+攻爆jí腚メ/ 2022年04月24日 05:02/ 0 赞/ 310 阅读

相关 “联系我们”飘窗实现

1、点击飘窗随机选择客服QQ进行联系 <style type="text/css"> moveWindow { width: 170px;

我就是我/ 2022年03月01日 00:05/ 0 赞/ 158 阅读

相关【作业】飘-字母统计

突发奇想利用ASCII的值的连续性，直接对应数组0-25序号 1 package piao; 2 3 import java.io.FileR

Myth丶恋晨/ 2021年11月10日 14:54/ 0 赞/ 246 阅读