根据鼠标的位置动态的控制层的位置

代码如下:

<script>
var index=0; //鼠标第一次点击时候显示，鼠标再次点击将层不在显示
/**
* 鼠标点击事件
*bizData：传递的参数
*/
function search(bizData)
{
if(index==0)
{
if(bizData==null) //当参数为空的时候该层内容清空，不让其显示null
{
$("bizDiv").innerText = "";
$("bizDiv").style.background='#99FFFF';
document.onclick = mouseMove;
index++;
}else
{
$("bizDiv").innerText = bizData;
$("bizDiv").style.background='#99FFFF'; //相对的页面的颜色设置
document.onclick = mouseMove; //点击触发事件
index++;
}
}else{ //第二次鼠标点击
$("bizDiv").innerText = "";
document.onclick = mouseMove;
$("bizDiv").style.background='transparent'; //将层的背景颜色设置为“透明色”
index=0;
}
}
/*
*鼠标移动事件，获取层的top,right的位置
*/
function mouseMove(ev)
{
ev= ev || window.event;
var mousePos = mouseCoords(ev);
$("bizDiv").style.right = document.body.clientWidth-mousePos.x+15;
$("bizDiv").style.top = document.body.clientHeight-200;
$("bizDiv").style.width='200';
//$("bizDiv").style.hight='200';
}
/*
*获取鼠标的位置
*/
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

赞 (0)

相关推荐

  • 根据鼠标的位置动态的控制层的位置

    复制代码 代码如下: <script> var index=0; //鼠标第一次点击时候显示,鼠标再次点击将层不在显示 /** * 鼠标点击事件 *bizData:传递的参数 */ function search(bizData) { if(index==0) { if(bizData==null) //当参数为空的时候该层内容清空,不让其显示null { $("bizDiv").innerText = ""; $("bizDiv")

  • JavaScript实现DIV层拖动及动态增加新层的方法

    本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

  • Spring Boot的Controller控制层和页面

    Spring Boot的Controller控制层和页面

    一.项目实例 1.项目结构 2.项目代码 1).ActionController.Java: package com.example.controller; import java.util.Date; import java.util.Map; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.spring

  • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用JavaScript实现的,不过代码好像是从jQuery里摘出来的,有点像. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下: <!DOCTYPE htm

  • Symfony控制层深入详解

    Symfony控制层深入详解

    本文深入分析了Symfony控制层.分享给大家供大家参考,具体如下: Symfony中控制层包含了连接业务逻辑与表现的代码,控制层为不同的使用分成了几个不同的部分. 1. 前端控制器是指向应用的唯一入口 2. 动作包含了应用的逻辑,他们检查请求的完整性并准备好表示层需要的数据 3. 请求.响应和Session对象提供访问请求参数.响应参数以及持久的用户数据,这些数据在控制层使用的很普遍 4. 过滤器是每个请求都要执行的代码的一部分,无论在动作前还是在动作后.可以自创过滤器. 前端控制器 所有WE

  • jquery实现可自动判断位置的弹出层效果代码

    jquery实现可自动判断位置的弹出层效果代码

    本文实例讲述了jquery实现可自动判断位置的弹出层效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的智能弹出层效果,位置可以自适应,当层靠右边显示时自动往左移.初次运行时请按F5刷新,载入远程jQuery后才能看到效果,点击鼠标左键,弹出层将出现,在最右边点击时层自动往左移. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-check-pos-alert-dlg-demo/ 具体代码如下: <!DOC

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

  • javascript下用键盘控制层的移动的代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <style type="text/css"> <!-- #Div { position:absolute; width:238px; height:13

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • css层固定位置练习

    层固定位置练习--by 阿会楠 html,body{ overflow:hidden; padding:0; margin:0; width:100%; height:100%; } #_body{ height:100%; overflow-y:scroll; width:100%; height:100%; } #adDiv{ position:absolute; z-index:99999; bottom:10px; left:10px; width:200px; height:30px;

随机推荐