这是一款聚集了多种功能于一身的作品，效果非常棒、非常实用，包括了弹出层、在线客服、选项卡、手风琴、拖拽等，也是从事政府资助工作的网友杰立浏览多多联盟网站的时候整理的，除了非常实用外，整体风格也非常好看，网友们可以举一反三可以改成其它效果的哦。。。。
核心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;
});
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
jquery弹出层 在线客服 选项卡 手风琴效果 Accordion 拖拽 网友杰立 jquery弹窗插件