JS代码 是否显示横竖条

【鸿蒙南向开发】OpenHarmony如何切换横竖屏? 本文带大家使用对应的接口,在Stage模型和FA模型下完成了横竖屏的切换。其中还涉及到了上下文的获取:Stage模型用(getContext(this) as any),FA模型(featureAbility.getContext()),大家可以在此基础上利用生命周期的回调,在合适的地方完成对应的操作。 阅读详情
  1.         //是否显示横竖条  
  2.         if (this.config["bar_dis"] == true) {  
  3.             if (!$("#vline").attr("id")) {  
  4.                 vLine = "<div id='vline' style='background-color:"+this.config["bar_color"]+";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>";  
  5.                 $(vLine).appendTo("body");  
  6.             } else {  
  7.                 $(vLine).css("left",(_point.x) + "px");  
  8.                 vLine.show();  
  9.             }  
  10.             if (!$("#hline").attr("id")) {  
  11.                 var hLine = "<div id='hline' style='overflow:hidden;background-color:"+this.config["bar_color"]+";height:1px;width:100%;position:absolute;left:0px;top:" + (_point.y ) + "px;'/>";  
  12.                  $(hLine).appendTo("body");  
  13.             } else {  
  14.                 $("#hline").css("top",(_point.y ) + "px");  
  15.                 hLine.show();  
  16.             }  
  17.         }  
  18.         this.hideFocus();  
  19.         return true;  
  20.     },  hideFocus:function() {//隐藏焦点效果  
  21.         if (paper != null) {  
  22.             var circle = paper.circle(25, 25, 30);  
  23.             circle.attr("stroke", this.config["circle_color"]);  
  24.             circle.attr("stroke-width", 1);  
  25.             var anim = Raphael.animation({  
  26.                 r: 5  
  27.             }, 900, null, function(){  
  28.                 this.locationTimer = setTimeout(function(){  
  29.                     $("#canvas").hide(); //焦点  
  30.                     $("#vline").hide();  //横条  
  31.                     $("#hline").hide();  //竖条  
  32.                     clearTimeout(this.locationTimer);  
  33.                 }, 500);  
  34.             });  
  35.             circle.animate(anim);  
  36.         } else {  
  37.             this.locationTimer = setTimeout(function(){  
  38.                 $("#canvas").hide(); //焦点  
  39.                 $("#vline").hide();  //横条  http://www.9oal.com/thread-7636-1-1.html
  40.                 $("#hline").hide();  //竖条  
  41.                 clearTimeout(this.locationTimer);  
  42.             }, 500);  
  43.         }  
  44.           
  45.     },mousePosition:function (e) {  
  46.         var x,y;  http://www.9oal.com/forum-37-1.html
  47.         var e = e||window.event;  
  48.         return {  
  49.             x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,  
  50.             y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop  
  51.         }  
  52.     },elementPosition:function( oElement ) {  
  53.         var x2 = 0;  
  54.         var y2 = 0;  
  55.         var width = oElement.offsetWidth;  
  56.         var height = oElement.offsetHeight;  
  57.         var postion  = "";  
  58.         if( typeof( oElement.offsetParent ) != 'undefined' ){  
  59.             for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) {  
  60.                 posX += oElement.offsetLeft;  
  61.                 posY += oElement.offsetTop;        
  62.             }  
  63.             x2 = posX + width;  
  64.             y2 = posY + height;  
  65.             postion = [ posX, posY ,x2, y2];  
  66.         } else{  
  67.             x2 = oElement.x + width;  
  68.             y2 = oElement.y + height;  
  69.             postion = [ oElement.x, oElement.y, x2, y2];  
  70.         }  
  71.         var x = postion[0] + ((postion[2] - postion[0])/2);  
  72.         var y = postion[1] + ((postion[3] - postion[1])/2);  
  73.         return {"x":x,"y":y};  
  74.     }  
  75. }  
双显示器党的福音:B站横竖屏视频自动适配显示器的终极解决方案 本文为双显示器用户提供了一套B站横竖屏视频自动适配显示器的本地解决方案。通过编写油猴脚本监听视频尺寸,并配合Python后端服务智能控制窗口移动,实现了横屏视频自动全屏于横屏显示器、竖屏视频无缝切换至竖屏显示器的自动化流程,彻底告别手动拖拽,提升观看体验。 阅读详情

相关推荐

lego-loam featureAssociation 源码注释(五)

上一次我们已经看完了特征提取,这次我们进入特征匹配的内容!!!systemInitedLM的初始值为false。

Joeybee的博客 890

使用JS制作一个鼠标可拖的DIV,移动端web开发

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档,需要的读者可以戳这里免费领取!既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化![外链图片转存中…(img-tfS9gqBu-1712295665434)]由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!如果你觉得这些内容对你有帮助,可以扫码获取!!

2401_84098033的博客 789

matlab液体湿润模拟,【水文模型】01 三水源新安江模型

目录一、概述1.1 流域概况1.2 产流方式论证1.3 设计基本任务1.4 设计原始资料二、新安江模型2.1 流域划分2.2 产汇流计算2.2.1 蒸散发计算2.2.2 产流计算2.2.3 水源划分2.2.4 汇流计算2.3 模型参数2.3.1 参数物理意义2.3.2 参数率定结果2.4 模拟结果2.4.1 精度统计表2.4.2 计算与实测流量过程线比较三、精度统计与误差分析3.1 精度统计3.2...

weixin_34173656的博客 5328

《零基础学JavaScript》专栏导读

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界! 零、专栏地址 https://blog.youkuaiyun.com/shangyanaf/category_11435969.html 一、本专栏的目的 ​ 犹记笔者大学初学JavaScript时,菜鸟教程,官方文档,看的是迷迷糊糊,要么是太简单,要么是太难!浮于表面,难以理解,总是游.

专注于图像领域,主要研究内容包括计算机视觉和深度学习,特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。 3284

Hyper-V创建Ubuntu虚拟机设置固定IP

本文记录使用hyper-v创建ubuntu虚拟机,为虚拟设置固定IP且通过物理机可访问。

2623

图像质量评估:使用 SSIM 计算图像相似性

在图像处理领域,衡量两幅图像之间相似性的一种常见方法是使用结构相似性指数(SSIM)。SSIM 是一种全参考的图像质量评估指标,它不仅考虑了图像的亮度、对比度,还考虑了结构信息。在本文中,我们将介绍一个使用 Python 和 OpenCV 实现的 SSIM 计算脚本,并使用该脚本评估两幅图像的相似性。

hasque2019的博客 1154

js实现验证代码是否存在下划线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js判断字符串是否有下划线</title> <script src="https://code.jquery.com/jquery-3.1.1.mi...

milijiangjun的博客 1233

蓝牙 - 如何在Windows下抓取蓝牙数据

选择Windows Instarller(64-bit),最好不要选择PortableApps版,因为后面需要通过btvs.exe来启动Wireshark,如果是绿色可移植版,会启动失败。在安装完以后,找到btvs.exe文件,位于路径:C:\BTP\v1.14.0\x86下,这个视安装版本不同路径名不同。在第一台机器上启动btvs.exe,第二台机器上手动启动wireshark,并将第一台机器的IP地址作为参数。1,同一机器上,Wireshark安装后,会自动直接启动,如上面使用方式一样。

guoqx的专栏 2万+

js判断字符串中是否包含某个字符方法整理

整理js中可以用到的判断一个字符串中是否包含另外一个字符的方法 String对象方法 1、indexOf indexOf 返回指定字符串在该字符中首次出现的位置,如果没有找到,则返回 -1 indexOf 接收两个参数,第一是需要搜索的字符串,第二个参数是检索的位置,默认为0 let str = 'abcde'; //例如,从str第三位开始搜索 'a' console.log(str.indexOf('a',2));// -1 console.log(str.indexOf('a'))// 0 2、

前端e栈 3万+

全国排污许可证数据

from tkinter import * # 导入窗口控件 import tkinter.filedialog import requests from lxml import etree from tkinter import ttk from bs4 import BeautifulSoup import webbrowser # 调用浏览器打开网页 from tkinter import messagebox # 弹出提示框 from openpyxl import Workbook imp.

Newnotes的博客 3387

SCI投稿Title Page、Cover letter、Highlights、Manuscript模板

(简要介绍一下论文的创新性). I hope this paper issuitable for “Journal Name”.版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。原文链接:https://blog.youkuaiyun.com/weixin_48615832/article/details/120317336。

qq_15963745的博客 3700

js判断字符串是否有下划线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js判断字符串是否有下划线</title> <script src="https://code.jquery.com/jque...

baodaotui4761的博客 1807

【拼多多笔试题汇总】2024-03-24-拼多多春招笔试题

A 小镇上有个奇特的游戏。游戏开始时,A 先生准备了一排 nnn 个物品。K 小姐和卢小姐则轮流进行操作。首先,K 小姐可以选择移除至多 xxx 个物品。接着,卢小姐也可以选择移除剩余物品中的至多 yyy 个。游戏的目标是,K 小姐想尽量让剩余物品的价值之和最大化,而卢小姐则想将剩余物品的价值之和最小化。假设两人都采取最优策略,请问最后剩余物品的价值之和是多少?第一行包含五个正整数 n,m,k,x,yn, m, k, x, yn,m,k,x,y,分别表示物品的总数、K 小姐最多可移除的物品数、卢小姐最多可移

春秋招笔试突围 1万+

js 判断手机横竖屏

1.首先介绍下 css3得横竖屏判断 /*手机竖屏判断*/ @media all and (orientation: portrait){  } /*手机横屏判断*/ @media all and (orientation:landscape){  } 在一般情况下,css3判断还是比较准确得。但是在特殊情况下,比如说在页面存在表单的情况,大家看下截图,一目了然(sorry,复现

闲音空梦·轩 1210

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

JS禁止横竖屏切换,强制横竖屏显示

js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == 180) { $("body").attr("class", "portrait"); ori...

weixin_30390075的博客 2314

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

JS 网页设置横竖屏切换

横竖屏

潘秋娜的博客 3476

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

js-横竖屏font-size,rem适配方法

最近在学习H5的一些适配,因为之前很久没有接触代码,所以很多东西都忘记了,计划是两个月回到半年前的状态。 目录 横竖屏分开 横竖屏共用 参数解释 知识点记忆 横竖屏分开 //屏幕适应 (function (win, doc) { if (!win.addEventListener) return; var html = document.do...

HAZER644的博客 626

移动端横竖屏检测

一、HTML方法检测 在html中分别引用横屏和竖屏样式 <!-- 引用竖屏的CSS文件 portrait.css --> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow"> <!-- 引用横屏的CSS文件 landscape.css --> <link rel="styleshee

Jana Jing的分享 1242

js - js+css实现横竖屏变换自动使用不同样式

今晚我在写一个页面,要求是在用户旋转屏幕的时候应用不同的样式,让网页更好地表现内容.难点不在于根据横竖屏来设置不同的样式,而是在于在用户旋转屏幕之后需要刷新一下才能应用新的样式,这样贼麻烦. 因此今晚搞了两个小时,终于实现在旋转屏幕的时候自动切换样式了 首先,我写的这个页面在dom加载完成后会获取当前屏幕的宽度进行计算rem. 也就是说,如果用户第一次打开这个网页是竖着看的...

yuuuuchang的博客 4343

js监听移动端是否横竖屏

手机横、竖屏事件 //屏幕方向标识,0横屏,其他值竖屏 var orientation=0; //转屏事件,内部功能可以自定义 function screenOrientationEvent(){ if(orientation == 0)document.getElementById("change").value="竖"; else document.getElementBy

Ga Ga Love Front 3120

OpenHarmony如何切换横竖屏?

其中还涉及到了上下文的获取:Stage模型用(getContext(this) as any),FA模型(featureAbility.getContext()),大家可以在此基础上利用生命周期的回调,在合适的地方完成对应的操作。在Stage模型中,使用到的主要是Window(窗口)。在设置横竖屏切换的时候,需要先使用getLastWindow()、createWindow()、findWindow()中的任一方法获取到Window实例,再通过此实例调用对应的方法,本文使用的是getLastWindow。

OpenHarmony_dev的博客 2277

实现鼠标在页面点击出现焦点及大十字星

"bar_color": "Yellow", //线条颜色。"circle_color": "red", //圆圈颜色。"bar_dis": true, //横竖条显示或隐藏。"rect_color": "green"//方块颜色。"circle_dis": true, //焦点隐藏。

gukehui2012的博客 1141

横竖屏提示

有时候页面需要横屏显示,竖屏显示的话,可能页面看起来没有那么美观,这个时候我们需要给用户一个友好的提示:代码如下,可以通过设置isVertical的值,让页面在横屏或者竖屏的时候提示。(注意下面的第一行代码)。 /* 横竖提示处理 * isVertical:不传默认为false,即显示竖屏提示,(false: 提示用户横屏, true:提示用户竖屏) */ (function landscap...

dai_yanxia的博客 1638

js判断手机的横竖屏调整样式

在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢。首先需要在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 针对上面的viewpo...

weixin_33922670的博客 184

OpenHarmony南向开发:如何切换横竖屏?

本文主要带大家了解在OpenAtom OpenHarmony(以下简称“OpenHarmony”)应用开发的过程中,如何在Stage模型和FA模型下使用对应的接口去完成横竖屏的切换。

qq_39652397的博客 1380

JS获取设备横竖屏幕方向并监听变化

先上完整代码: var mql = window.matchMedia('(orientation: portrait)'); console.log(mql); function onMatchMediaChange(mql){ if(mql.matches){ //竖屏 console.log('此时竖屏') }else{ /...

到得还来别无事,庐山烟雨浙江潮。 3654
上一篇: 最近失业,不知道干什么好,随便乱写,无内容。
下一篇: 拼出漂亮的表格 JS大牛巨作。
普通网友
博客等级 码龄22年 1万+粉丝 3156原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值