弹出层、在线客服、选项卡、手风琴、拖拽等,也是看网站时候整理的,除了非常实用外,整体风格也非常好看,网友们可以举一反三可以改成其它效果的哦。。。。
首先引用文件
<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;
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791