小编Mic_rtz的帖子

HTML5或JQuery全屏十字光标

我们都看过那些带有全屏十字光标的军用电影在电脑上,甚至在你看到的一些动画中.

例如,在YouTube上的视频开头标题为"不光彩的披露",你就会看到我正在谈论的内容.- https://www.youtube.com/watch?v=X-Xfti7qtT0

另一个例子是Windows的"CrossHair 1.1"程序 - http://www.softpedia.com/get/Desktop-Enhancements/Other-Desktop-Enhancements/CrossHair.shtml

我相信它可以在HTML5中完成,但绝对不知道它是否在JQuery中,更不用说如何用这两种语言来实现.但是我很想知道,所以我可以自己做.如果有人有任何链接,资源或任何东西可以帮助解决这个问题,因为我相信其他人也会想要学习如何.任何帮助将不胜感激.

谢谢,保重.

非常感谢"Gaby aka G. Petrioli"搞清楚这一点.我把完整的代码放在下面(用一点造型)来节省你的一些时间.

<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Crosshair Cursor</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
html, body {
    cursor:none;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color:#003131;}

a {
    cursor:none;
    color:rgba(255,255,255,0.5);
    text-shadow:0px 0px 8px silver;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
    border-radius:10px;}

a:hover {
    color:rgba(255,255,255,0.8);
    text-shadow:0px 0px 8px rgba(255,255,255,0.8);}

#crosshair-h {
    width:100%;
    height:2px;
    margin-top:-1px;}

#crosshair-v {
    height:100%;
    width:2px;
    margin-left:-2px;}

.hair {
    position:fixed;
    background-color:rgba(0,250,253,0.5); …

Run Code Online (Sandbox Code Playgroud)

jquery html5 fullscreen cursor panning

6
推荐指数

1
解决办法

6094
查看次数

如何在窗口滚动上上下移动div

我有一个jquery函数来上下移动一些div,而在这里滚动页面是代码 - >

$(window).scroll(function() {
  $(".mydiv").css({
    "margin-top": ($(window).scrollTop()) + "px",
    "margin-left": ($(window).scrollLeft()) + "px"
  });
});

Run Code Online (Sandbox Code Playgroud)

以上代码仅适用于一个div,如 - >

<div class="mydiv">This div works</div>
<div class="mydiv">This div takes a high distance from above div and goes down</div>

Run Code Online (Sandbox Code Playgroud)

$(window).scroll(function() {
  $(".mydiv").css({
    "margin-top": ($(window).scrollTop()) + "px",
    "margin-left": ($(window).scrollLeft()) + "px"
  });
});

Run Code Online (Sandbox Code Playgroud)

body {
  height: 1000px;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv">This div works</div>
<div class="mydiv">This div takes a high distance from above div and goes down</div>

Run Code Online (Sandbox Code Playgroud)

javascript jquery

6
推荐指数

1
解决办法

8246
查看次数

FileReader 和 CodeMirror 加载文件复杂化

带预览的默认 CodeMirror HTML 编辑器 - http://jsfiddle.net/D9MvH/1/ - http://liveweave.com/zSqCfA

使用 FileReader API 在 CodeMirror 中加载文件 - http://liveweave.com/VvsXN9

这是我正在尝试做的一个非常简单的例子。（保存功能不适用于这些在线编辑器，但导入文件功能适用于这个简单的编辑器） - http://liveweave.com/MrUBfZ

我的问题是当我单击我的输入文件表单来浏览文件时。我选择要打开的 HTML 文档，它不会使用/在 CodeMirror 中打开。我尝试了我所知道的一切，但无法让它发挥作用。有人能帮忙吗？

HTML :

<input type="file" onchange="loadfile(this)">

Run Code Online (Sandbox Code Playgroud)

JavaScript :

var delay;

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true,
    lineWrapping: true,
    autoCloseTags: true
});

// Live preview
editor.on("change", function() {
    clearTimeout(delay);
    delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
    var previewFrame = document.getElementById('preview');
    var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
    preview.open();
    preview.write(editor.getValue()); …

Run Code Online (Sandbox Code Playgroud)

javascript api filereader codemirror

5
推荐指数

1
解决办法

7153
查看次数

电子调整无框窗口的大小

我正在开发一个具有无框架窗口且具有html5视频元素的应用程序，该元素显示以100％填充document.body的网络摄像头。

我已mainWindow设置为可调整大小，mainWindow.isResizable(true)但无法调整窗口大小。

当我使用chrome dev工具进行调试时，只能调整侧面chrome dev工具打开时的窗口大小。（不确定是否有帮助，但是我正在基于Ubuntu 14.04的称为发行版Elementary OS Freya的Linux发行版上进行开发）

有人可以解释为什么即使将mainWindow设置为可调整大小后，我也无法调整其可调整大小的窗口吗？

另外我该怎么做才能解决这个问题？

var app = require("app");
var BrowserWindow = require("browser-window");

var mainWindow = null;

// Quit when all windows are closed.
app.on("window-all-closed", function() {
  app.quit();
});

app.on("ready", function() {
  mainWindow = new BrowserWindow({
    width: 640,
    height: 480,
    frame: false
  });
  mainWindow.loadUrl("file://" + __dirname + "/index.html");

  // Set Window Resizable
  mainWindow.isResizable(true);

  mainWindow.focus();
});

Run Code Online (Sandbox Code Playgroud)

javascript window resizable electron

5
推荐指数

3
解决办法

7972
查看次数

JavaScript 作为 HTML 属性是不好的做法吗？

示例：https : //stackoverflow.com/a/37289566/710887

我看到这种情况越来越频繁地发生。

我总是被教导将 javascript、css 和 html 分开（当然，html 链接到源/脚本）。

在 HTML 属性（例如onclick, onchange, etc:）中使用 Javascript 是不好的做法吗？

<span id="valBox">25</span>
<input type="range" min="5" max="50" step="1" value="25" onchange="valBox.textContent = this.value">

Run Code Online (Sandbox Code Playgroud)

html javascript attributes

5
推荐指数

1
解决办法

1256
查看次数

fabric.js: Fill free drawing path as user is drawing (lasso tool)

In fabric.js, we can draw free hand paths (http://fabricjs.com/freedrawing) (http://fabricjs.com/fabric-intro-part-4#free_drawing)

(Yes I've already seen this post and it doesn't solve or reference my problem)

What I'm trying to achieve is showing the fill as the user is drawing. Not just when the path is created (as seen in the demo below) which it also sets that fill for all the other paths drawn which I don't want. I ONLY want the fill to apply only to …

javascript fabricjs fabricjs2

5
推荐指数

1
解决办法

1238
查看次数

在Java中显示网络摄像头

我上周刚刚开始使用Java,所以我现在只是因为我需要学习很多东西而得到了基础知识(顺便说一句,如果有帮助我在Ubuntu 11.04上使用Eclipse).但是我做了很多抓屏的,我在很多的,我做的视频显示我的摄像头.所以稍后我想创建一个只显示网络摄像头的简单应用程序.没有别的.

所以我现在问这个问题,这样我不仅会记住我的目标,而且当我觉得我已经准备好了,并且有信心继续努力时,我会知道该去哪里.

我不想要任何代码,但需要参考去哪里.我想只使用Java.虽然我的一位同事告诉我要调查FMJ和JMF.但是不知道这些是什么我认为它们是Java的附加组件,但是如果可能的话,我只想坚持使用Java.

另外,就像我说我还是Java新手一样,我正在学习YouTube上的新闻教程(目前在http://www.youtube.com/watch?v=XqTg2buXS5o),所以如果你知道任何其他资源来帮助新的像我这样的Java程序员,以及其他人都非常感激.

4
推荐指数

1
解决办法

2万
查看次数

从OSX上的Electron中的Finder中删除菜单栏

我购买了一个新的macbook,我正在努力让我的应用程序在64位mac上运行.

但是我无法删除默认的菜单栏.

反正有没有通过app.js将我的应用程序名称从Electron更改为Electron内的其他东西,所以我在Finder中看不到Electron(为了更好的理解,请回到屏幕截图)？有没有办法删除编辑,视图窗口和帮助菜单？

package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-prebuilt": "^0.33.0"
  }
}

Run Code Online (Sandbox Code Playgroud)

app.js:

var app = require("app"),
        BrowserWindow = require("browser-window");

app.on("ready", function() {
  var mainWindow = new BrowserWindow({
    toolbar: false,
    "skip-taskbar": true,
    "auto-hide-menu-bar": true,
    width: 800,
    height: 600
  });

  mainWindow.loadUrl("file://" + __dirname + "/index.html");
  mainWindow.setMenuBarVisibility(false);
  mainWindow.setAutoHideMenuBar(true);
  mainWindow.openDevTools();
});

Run Code Online (Sandbox Code Playgroud)

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello</title>
  </head>
  <body>
    Hello world! …

Run Code Online (Sandbox Code Playgroud)

macos menu menubar electron

4
推荐指数

3
解决办法

4660
查看次数

在香草JS中触发Enter键

我试图在不实际按下Enter键的情况下，在输入上触发enter keypress事件，更多的是onload。

我发现initKeyboardEvent和initKeyEvent甚至都已弃用。keyCode和e。其正从Web标准移除。

我还发现这篇文章介绍了如何在jQuery中执行此操作。但是，我一直在尝试找出如何在香草JS中做到这一点，但是没有运气。

var txtbox = document.getElementById('txtbox');
txtbox.onkeydown = function(e) {
  if (e.keyCode == 13) {
    alert('enter key pressed');
  }
  e.preventDefault();
};

var ev = document.createEvent('KeyboardEvent');
// Send key '13' (= enter)
ev.initKeyboardEvent(
    'keydown', true, true, window, false, false, false, false, 13, 0);
document.body.dispatchEvent(ev);

Run Code Online (Sandbox Code Playgroud)

<input type="text" id="txtbox" placeholder="trigger enter key press">

Run Code Online (Sandbox Code Playgroud)

4
推荐指数

1
解决办法

3173
查看次数

JQuery:如果选中启用则禁用

小提琴 - http://jsfiddle.net/XH5zm/
JSBin - http://jsbin.com/UKIweJE/1/edit

我试图通过切换是否选中复选框来启用/禁用输入文本框.

$(document).ready(function() {
  if ($('.enable-padding').attr('checked') === true) {
    $('.grab-padding').attr('enabled','enabled');
    $('.grab-padding').val("13px");
  } else {
    $('.grab-padding').attr('disabled','disabled');
    $('.grab-padding').val(" ");
  }
});

Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么？

任何帮助是极大的赞赏.

javascript jquery

3
推荐指数

1
解决办法

667
查看次数

标签统计

api ×1

html ×1

java ×1

menu ×1

«
1
2
3
4
»