弹出层在线客服带选项卡和手风琴特效

弹出层、在线客服、选项卡、手风琴、拖拽等，也是看网站时候整理的，除了非常实用外，整体风格也非常好看，网友们可以举一反三可以改成其它效果的哦。。。。

分类：其它特效 > jQuery插件难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引用文件

<script type="text/javascript" src="templates/index/duoduo/js/qqkf/service.js"></script>
<link href="templates/index/duoduo/js/qqkf/qqkf.css" type="text/css" rel="stylesheet">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="templates/index/duoduo/css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>

核心jquery代码如下：

//窗口移动   
$(function(){
	var _move=false;//移动标记
	var _x,_y;//鼠标离控件左上角的相对位置
	var moveNode=$('.helper-wrap');
	var mouseDownNode=$('.helper-wrap');
	var windowWidth=$(window).width();
	var windowHeight=$(window).height();
	var moveNodeHeight=$('.helper-wrap').height();
	var moveNodeWidth=$('.helper-wrap').width();
  
	mouseDownNode.mousedown(function(e){
		e.preventDefault();
		windowWidth=$(window).width();
		windowHeight=$(window).height();
		moveNodeHeight=$('.helper-wrap').height();
		moveNodeWidth=$('.helper-wrap').width();
		_move=true;
		_x=e.pageX-(windowWidth-parseInt(moveNode.css("right"))-moveNodeWidth);
		_y=e.pageY-parseInt(moveNode.css("top"));
	   
	});
	$(document).mousemove(function(e){
		if(_move){
			var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
			var y=e.pageY-_y;
			if(x < 0) x=0;//判断div与浏览器距离
			if(x > windowWidth-moveNodeWidth) x=windowWidth-moveNodeWidth;
			if(y < 0) y=0;
			if(y > windowHeight-moveNodeHeight) y=windowHeight-moveNodeHeight;
			moveNode.css({top:y,right:(windowWidth-x-moveNodeWidth)});
			//控件新位置
			e.preventDefault();
		}
	}).mouseup(function(){
		_move=false;
	   
  });