精华内容
下载资源
问答
  • 头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:...

    效果图,为显示效果,以不同颜色区分
    头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】
    css

    *{
    	margin:0px;
    	padding:0px;
    }
    .main{
    	width:100%;
    	height:600px;
    	background-color:red;
    	}
    .content{
    	width:1000px;
    	height:2300px;
    	background-color:#ccc;
    	margin: 0 auto;//Div居中
    	}
    .logo{
    	width:1000px;
    	height:150px;
    	position:fixed;//此处是将头部Div固定在浏览器的指定位置,位置不随页面的移动等而变化
    	background-color:aqua;
    	text-align:center;//Div中内容居中
    	}
    .o{
    	display:inline-block;//内部块,属于上级Div内容,由text-align:可实现居中。
    	width:200px;
    	height:100px;
    	background-color:green;
    	margin-top:10px;
    	padding-bottom:10px;
    	}
    

    html代码

    <div class="main">
    	<div class="content">
    		<div class="logo">
    			<div class="o">1</div>
    			<div class="o">2</div>
    			<div class="o">3</div>
    		</div>
    	</div>
    </div>
    

    拓展情景:参照一个例子
    若头部logo栏(见下图“2”)之上,还有一个“收藏栏Div(见下图“1”)”,以上面代码为基础,移动鼠标的话,“2”保持原位置固定不变,当鼠标向下拖动时,logo栏位置不变,但是“1”会随着鼠标下滑而被遮盖消失,从而使页面显示比较奇怪。
    解决思路:当鼠标移动的距离超过“1”的高度时,“2”能够显示在顶部,这时可以用JQuery来实现这一效果。首先获取鼠标移动的高度($(window).scrollTop();),然后判断当移动的高度大于等于“1”的高度时,增加“2”的一个CSS属性,即
    margin-top:-32px;当鼠标向上滑动时,小于“1”的高度,便将-32px修改为0px,就可以恢复原始位置。
    在这里插入图片描述
    js代码

    //头部随鼠标滚动而滚动
    $(document).ready(function (){
    $(window).scroll(function(){
    	//获取当前鼠标滑动的高度
    	var currentTop = $(window).scrollTop();
    	if(currentTop>=32){
    		//如果大于32,说明“1”即将消失,此时“2”需要向上补位,位于顶部。增加一个css属性:向上外边距,-32px(数值代表“1”的高度);
    		document.getElementById("com").style.cssText = "margin-top:-32px;";
    	}
    	if(currentTop<32){
    		//当鼠标向下滑动不足32或者向上往后滑动时,需要将“2"从顶部还原到原位置,以便“1”能够显示出来。
    		document.getElementById("com").style.cssText = "margin-top:0px;";
    	}
    });
    });
    
    展开全文
  • 于是我去看了echarts的文档,看到tooltip的position属性,可以把位置设置大概分成两部分,部分是固定位置部分是跟随鼠标移动。 1.固定位置 (1)使用px设置绝对位置 // 绝对位置,相对于容器左侧 10px, ...

    问题:

    在散点图中设置了tooltip后,不设置position,使用默认的配置,toolt的显示位置是跟随鼠标移动的,但是会出现显示不全的情况,如下图。

     

     这产品肯定不能忍啦,必须改!!!于是我去看了echarts的文档,看到tooltip的position属性,可以把位置设置大概分成两部分,一部分是固定位置,一部分是跟随鼠标移动。

    1.固定位置

    (1)使用px设置绝对位置

      // 绝对位置,相对于容器左侧 10px, 上侧 10 px
      position: [10, 10]

    (2)使用百分比设置相对位置

      // 相对位置,放置在容器正中间
      position: ['50%', '50%']

    2.跟随鼠标移动

    使用function回调函数的方法,带5个参数,分别是:

    • point: 鼠标位置,如 [20, 40]。
    • params: 同 formatter 的参数相同。
    • dom: tooltip 的 dom 对象。
    • rect: 只有鼠标在图形上时有效,是一个用xywidthheight四个属性表达的图形包围盒。
    • size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。 

    返回值可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
    也可以是一个对象,如:{left: 10, top: 30},或者 {right: '20%', bottom: 40}。 

    以上部分来自Echarts配置文档,详见Ecahrts

    以下代码改编自sleepwalker_1992的一篇文章,针对这些代码进行简单的修改,防止数据点被tooltip覆盖。主要思路是:把显示不下分成两种情况,上边放不下,和左边放不下,在分别针对这两种情况,自己设定一个x或y坐标值,防止出屏问题。代码如下:

    position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
        // 提示框位置
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置
        
        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];
        
        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];
        
        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
            x = 5;  // 自己定个x坐标值,以防出屏
            y -= 15; // 防止点被覆盖住,可根据情况自行调节 
        } else { // 左边放的下
            x = pointX - boxWidth - 15;
        }
        
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight + 20 > pointY) {
            y = pointY + 15;
        } else if (boxHeight > pointY) {
            y = 5;
        } else { // 上边放得下
            y += pointY - boxHeight;
        }
        return [x, y];
    }

     效果图如下:

     

    展开全文
  • 机器信息: macOS版本10.14.1 2017款13寸的MBA ...具体问题就是,全屏界面下写代码的时候,鼠标点击的是第三行的某个位置,光标会定位到第行对应的位置 非全屏下没有问题 :) 有没有大佬能够帮忙解决一下
  • 析:遇到这个问题的时候我们总是第一时间想到用一个浮动的DIV,然后通过JavaScript控制window.onscroll来控制DIV的位置,从而达到我们希望这个层页面的固定位置 但是这种方式有一个缺点,那就是我们滑动鼠标...

    析:遇到这个问题的时候我们总是第一时间想到用一个浮动的DIV,然后通过JavaScript控制window.onscroll来控制DIV的位置,从而达到我们希望这个层在页面的固定位置

    但是这种方式有一个缺点,那就是我们在滑动鼠标的时候,层会跟着鼠标的滚动而抖动,为了避免这个情况的发生,可以用下面的方式实现!

    1.放一个大的层,长和宽都是100%,并且是浮动的,超出的部分(overflow)用auto.

    2.再放一个小的层,也是浮动的,而且z-index为最大,让它始终在最上面,我们可以通过控制这个层的top,left,right,botton来控制层在网页中的具体位置

    3.设置body的margin为0,否则我们将看不完滚动条

    4.设置body的scroll为no,让窗体没有滚动条,而层来显示滚动条

    5.所有网页其他的内容都放在大层里面

    具体代码如下:

    <html>
    <head>
        <title></title>
        <style>
            body{ margin:0px; }
            div { position: absolute; }
        </style>
    </head>
    <body scroll="no">   
        <div style="width: 100%; height: 100%; overflow: auto;">
            这里写网页的其他
        </div>
        <div style="background-color:Red; z-index: 1; bottom:0px; right:0px;">
            这个层始终在顶部
        </div>
    </body>
    </html>

    展开全文
  • Fixed header and footer for IE BODY { MARGIN: 0px } HTML { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px } BODY { PADDING-BOTTOM: 0px;...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <!-- saved from url=(0050)http://www.pmob.co.uk/temp/fixedlayoutexample5.htm -->
    <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Fixed header and footer for IE</TITLE>
    <META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <STYLE type=text/css>BODY {
    MARGIN: 0px
    }
    HTML {
    PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
    }
    BODY {
    PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px
    }
    * HTML {
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
    }
    * HTML BODY {
    PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; OVERFLOW: hidden; PADDING-TOP: 0px
    }
    * HTML #outer {
    HEIGHT: 99.9%; OVERFLOW: auto; voice-family: inherit
    }
    * HTML #contain-all {
    Z-INDEX: 1; POSITION: absolute; OVERFLOW-Y: scroll; WIDTH: 100%; HEIGHT: 100%
    }
    #top-bar {
    Z-INDEX: 999; POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; HEIGHT: 50px; OVERFLOW: hidden; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px
    }
    #topbar-inner {
    BACKGROUND: red; HEIGHT: 50px
    }
    #footer-inner {
    BACKGROUND: red; HEIGHT: 50px
    }
    * HTML #topbar-inner {
    MARGIN-RIGHT: 17px
    }
    * HTML #footer-inner {
    MARGIN-RIGHT: 17px
    }
    #footer {
    Z-INDEX: 999; POSITION: absolute; WIDTH: 100%; BOTTOM: 0px; HEIGHT: 50px
    }
    .spacer {
    HEIGHT: 50px
    }
    P {
    MARGIN-TOP: 0px
    }
    HTML > BODY #top-bar {
    POSITION: fixed
    }
    HTML > BODY #footer {
    POSITION: fixed
    }
    </STYLE>
    
    <META name=GENERATOR content="MSHTML 8.00.7600.16490"></HEAD>
    <BODY>
    <DIV id=outer>
    <DIV id=contain-all>
    <DIV is an experimental layout and untested in a real situation but 
    preliminary results look good.</P>
    <P>The header and footer need to be a fixed height and are therefore not suited 
    to large amounts of fluid content.</P>
    <P>The code comments for ie are documented below as they needed to be removed 
    from the code for ie mac</P>
    <P>* html, * html body{<BR>overflow:hidden;/* remove scroll mechanism from 
    body*/<BR>padding:50px 0;/* for ie5 and 5.5.*/<BR>margin:-50px 
    0;<BR>padd\ing:0;<BR>margin:0;<BR>}</P>
    <P>* html #outer { <BR>overflow:auto;/* this is basically the root element 
    now*/<BR>height:100%;<BR>/* we need to make ie5 jump the next style block ( 
    contain-all) so we use the voice hack*/<BR>voice-family: "\"}\""; 
    voice-family:inherit; <BR>}<BR>* html #contain-all{/* must contain all content 
    except for top and bottom bars - ie5 doesnt want this so jumps it as mentioned 
    above*/<BR>position:absolute;/* due to a bug in ie6 where children of elements 
    that have overflow defined behave as those they are 
    fixed*/<BR>overflow-y:scroll;<BR>width:100%;<BR>height:100%;<BR>z-index:1;<BR>}<BR></P>
    <P> </P>
    <P>some text to wrap : some text to wrap : some text to cause scrolling : : some 
    text to wrap : some text to wrap : some text to cause scrolling : : some text to 
    wrap : some text to wrap : some text to cause scrolling : : some text to wrap : 
    some text to wrap : some text to cause scrolling : : some text to wrap : some 
    text to wrap : some text to cause scrolling : : some text to wrap : some text to 
    wrap : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>some text to cause scrolling : </P>
    <P>Last bit of text</P>
    <DIV id=top-bar>
    <DIV id=topbar-inner>Fixed Top & bottom- Demo works in IE5 IE5.5. and ie6 - 
    Firefox 1.0+, Mozilla 1.3+, NN 6.2, Opera 6.03 7.2 7.5,8 : (Mac OS X 10.4 - 
    FireFox 1.5.0.1, Safari 2.0.3 (417.8), IE 5.2 (5.2.3 (5815.1)) </DIV></DIV>
    <DIV id=footer>
    <DIV id=footer-inner>Fixed footer </DIV></DIV></BODY></HTML>

    展开全文
  • div在固定区域跟随鼠标移动,上传的html文件,里边有简单的代码,通俗易懂。
  • 实现效果: 鼠标拖动btn...即SSS如图只存在五个固定的显示位置。 SSS响应setOnTouchListener事件。 MotionEvent.ACTION_UP事件中,调用TranslateAnimation动画效果,将其从UP事件位置移动到最近的btn所在位置。 即
  • 这是要显示的内容   //当鼠标移动到这时候 移动到这 $('.explain1').hover(function(){    var eTop=$(this).offset().top;  var eRight=$(this).offset().left;  
  • 光标停留在鼠标当前点击的位置(而不是点击每行后光标固定在行尾) 问题如图 解决办法 当前py文件里鼠标右键单机——>取消勾选【Column Selection Mode】:列选择模式 就完美解决啦~ 解决之后鼠标点击每行时...
  • 需要实现带有三屏幕,三屏幕分别显示窗体,但鼠标只能主窗体中运动,不能移动到其他的两附屏中。   二.实现: 具体实现使用的是user32.dll下的GetWindowRect(int hwnd, ref RECT lpRect)函数。 ...
  • QLabel鼠标固定区域拖动

    千次阅读 2019-02-26 16:41:14
    这里继承自QLabel类新建一个C++类来表示我们这种Label,其中主要是三个鼠标事件的重写这里记录一下。   1.鼠标按下事件: if(event-&gt;button() == Qt::LeftButton &amp;&amp; mouseStatus == ...
  • // 指定创建的DIV文档中距离左侧的位置   oDiv.style.top=oEvent.clientY+ 'px' ;  // 指定创建的DIV文档中距离顶部的位置   oDiv.style.border= '1px solid #FF0000' ;  // 设置边框   oDiv...
  • 篇文章中详细介绍了a标签锚点的使用,实现链接跳转到指定位置功能,重点解决了当网页header固定fixed的情况,跳转位置有所偏移的问题,需要的同学可以查看... 本篇介绍如下左侧导航栏固定,且每链接是a锚点。...
  • //鼠标移动到某一个位置时,触发的事件。 //绑定事件 $(window).bind('scroll', function () { //算出鼠标移动到顶部的高度。 var scrollt = document.documentElement.scrollTop + document.body.scroll...
  • // c# 固定窗体位置 即窗体不能被鼠标移动 #region 固定窗体 protected override void WndProc(ref System.Windows.Forms.Message m) { base.WndProc(ref m);//基类执行 if (m.Msg == 13
  • 即SSS如图只存在五个固定的显示位置。SSS响应setOnTouchListener事件。MotionEvent.ACTION_UP事件中,调用TranslateAnimation动画效果,将其从UP事件位置移动到最近的btn所在位置。即UP事件中,响应函数:...
  • C#实现让鼠标点击任意绝对位置

    万次阅读 多人点赞 2017-03-28 10:54:01
    鼠标点击任意绝对位置 引入命名空间using System.Runtime.InteropServices; 因为要使用user32.dll中 屏幕绝对位置 public static extern int SetCursorPos(int x, int y);
  • Qt中将控件放置在鼠标坐标指定位置

    千次阅读 2019-05-06 09:11:14
    QLabel *m_tip_prompt = NULL; m_tip_prompt=new QLabel;...//获取鼠标位置 this->m_tip_prompt->setText(“测试”); this->m_tip_prompt->raise(); this->m_tip_prompt->move(aa...
  • 效果:鼠标向下滚动后,导航栏屏幕上置顶固定。 HTML: 首页 关于我们 服务领域 业务案例 合作伙伴 官方活动 新闻资讯 联系我们 JQuery: $(document)
  • 上述功能是根据html+js+jquery共同完成的,兼容任何浏览器
  • 想要实现的是用户通过按键记录几个位置,然后模拟鼠标自动点击这些位置完成一些操作,而我用Auto Hot Key来实现这时,鼠标在点击位置过远时就会错乱,我想实现的是全屏幕的
  • 点击某个按钮时显示一个自定义的小窗口,这个小窗口里面展示一些当前需要展示的信息,然后小窗口可以被鼠标拖拽改变位置小窗口不关闭的时候可以继续操作页面,这里对比antd的模态框,模态框打开不可以改变位置,...
  • 项目背景:一天小虎找到龙哥说,龙哥你有没有现成的JS板子,就是那种当页面滚动到某个位置时,页面中的某个元素则固定在顶部不滚动,而小于这个位置之后这个元素又恢复到原来的状态。实现:这里做了一个简单的实现...
  • [System.Runtime.InteropServices.DllImport("user32.dll")] //引入dll public static extern int SetCursorPos ( int x , int y );...//隐藏鼠标 } 转载于:https://www.cnblogs.com/GouBin/p/5853644.html
  • JavaScript获取鼠标位置,大家会...书写一些“拖拽”页面交互效果,比如常见的拖拽效果、自定滚动条、放大镜等效果,都需要用到了鼠标或元素页面上的位置信息。为了能够快速、灵活的获取鼠标位置信息,今天要带
  • unity中让一个精灵屏幕上跟随鼠标

    千次阅读 2016-09-01 18:37:05
    using   UnityEngine ; using   ...//把脚本挂到要跟随鼠标的精灵上 ...固定鼠标位置,0~1之间的数 ...将得到的视口位置再转化为...其实NGUI中自带的一个UICursor脚本,给要跟随的精灵添加上,吧UICamera拖上去就好了
  • js实现鼠标拖拽移动元素位置

    千次阅读 2019-05-20 18:10:47
    给document绑定鼠标移动事件(给document绑定事件元素可以随着鼠标在整个页面上进行移动,如果是给元素直接绑定鼠标移动事件那么元素只能一直是跟着鼠标下移,局限性太大,可以自己试试),鼠移动时元素跟着鼠标...
  • 1、通用的脚本方法如下(注意:需要导入DoTween或者DoTweenPro插件) ...* 1、实现点击按钮则按钮对应的图标移动到指定位置且放大 * 2、显示对应的按钮所对应面板 * Date:2018 * Version:0.1版本 * Author:...
  • 屏幕坐标(100,100)处进行鼠标左击如果B键按下(200,200)处进行鼠标左击如果C键按下(300,300)处进行鼠标左击如果无任何键按下,或有不是A,B,C这三键其中的键按下则无任何操作 代码: ...
  • unity 在鼠标点击位置生成物体

    万次阅读 2017-05-03 18:27:34
    2.最早判断鼠标点击时用的判断语句是Input.GetMouseButton(0),结果每点击次会生成好多物体,是要鼠标按下就会一直生成,所以就改成了Input.GetMouseButtonUp(0),只有当鼠标左键松开时才会生成物体。 3.如果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,305
精华内容 28,122
关键字:

如何让鼠标固定在一个位置