Tag: html5

滚动过去后将Div粘贴到顶部

现在，我可以在向下滚动320px之后将div保持在顶部，但我想知道是否有另一种实现此目的的方法。 下面我有我的代码： jQuery(function($) { function fixDiv() { if ($(window).scrollTop() > 320) { $(‘#navwrap’).css({ ‘position’: ‘fixed’, ‘top’: ‘0’, ‘width’: ‘100%’ }); } else { $(‘#navwrap’).css({ ‘position’: ‘static’, ‘top’: ‘auto’, ‘width’: ‘100%’ }); } } $(window).scroll(fixDiv); fix5iv(); }); 它工作，但它上面的一些divs不会总是相同的高度，所以我不能依赖320px 。 如何在不使用if ($(window).scrollTop() > 320)情况下使用它，这样我可以在用户div #navwrap之后让它在淡入淡出？

使用javascript访问上传的json文件的数据

我有一些像这样的HTML代码： 我有一个像这样的json文件： { “name”: “John”, “family”: “Smith” } 还有一个简单的javascript函数： alert_data(name, family) { alert(‘Name : ‘ + name + ‘, Family : ‘+ family) } 现在我想调用带有名称和系列的alert_data（），该名称和系列存储在使用我的html输入上传的json文件中 有什么办法吗？ 使用html5文件阅读器或其他？ 注意：我不使用服务器端编程，所有这些都是客户端 请帮帮我 ：）

使用jQuery访问HTML 5video进度事件

以下是HTML5video播放器活动。 在这个问题上，我和我的伙伴在一天的很大一部分时间里都很难过，希望有人能够对这个问题提供一些见解。 我们已经能够使用普通的js访问progress事件，如下所示，但是当尝试使用jQuery访问它时，我们在控制台中得到了未定义。 非常感谢任何帮助/建议。 //JS – Works like a charm document.addEventListener(“DOMContentLoaded”, init, false); function init() { var v = document.getElementById(‘test-vid’); console.log(v) v.addEventListener(‘progress’, progress, false); } function progress(e) { console.log(e.lengthComputable + ‘ ‘ + e.total + ‘ ‘ + e.loaded); } // jQuery – NO BUENO – Undefined rendered in console var vid = $(‘#test-vid’); $(vid).bind(“progress”, […]

html5canvas中的碰撞检测

我正在尝试构建一个游戏，用户应该将圆圈放在垂直条中，但我在碰撞检测function方面遇到了麻烦。 这是我的jsfiddle： http ： //jsfiddle.net/seekpunk/QnBhK/1/ if (collides(Bluecircle, longStand)) { Bluecircle.y = longStand.y2; Bluecircle.x = longStand.x2; } else if (collides(Bluecircle, ShortStand)) { Bluecircle.y = ShortStand.y2; Bluecircle.x = ShortStand.x2; } function collides(a, bar) { return ax == bar.x1 && ay == bar.y1; }

使用javascript / jquery动态调整canvas窗口的大小？

如何使用javascript / jquery调整canvas大小？ 使用css函数resize并将其应用于canvas元素只会拉伸内容，就像拉伸图像一样。 如果没有伸展，我该怎么做呢？ http://jsfiddle.net/re8KU/4/

按canvas旋转后的图像裁剪

我有一个html5canvas。 我想在canvas上绘制/旋转图像，图像大小不会改变。我根据图像的大小设置canvas的宽度/高度。旋转图像时出现问题。旋转图像后，红色三角形被裁剪。 在下面链接一个示例显示这个问题。请帮助。 http://jsfiddle.net/zsh64/6ZsCz/76/ var canvas = document.getElementById(“canvas”); var ctx = canvas.getContext(“2d”); var angleInDegrees = 0; var image = document.createElement(“img”); image.onload = function () { canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0,0); }; image.src = “Images/rotate.png”; $(“#R”).click(function () { angleInDegrees += 90; drawRotated(angleInDegrees); }); $(“#L”).click(function () { angleInDegrees -= 90; drawRotated(angleInDegrees); }); function drawRotated(degrees) […]

读取和base64编码二进制文件

我正在尝试从文件系统中读取二进制文件，然后使用JavaScript对其进行base64编码。 我正在使用FileReader API来读取数据和此处的base64编码器。 我的代码似乎接近工作，问题是生成的base64数据是错误的。 这是我到目前为止所得到的： function saveResource() { var file = $(“.resourceFile”)[0].files[0]; var reader = new FileReader(); reader.onload = function(evt) { var fileData = evt.target.result; var bytes = new Uint8Array(fileData); var binaryText = ”; for (var index = 0; index < bytes.byteLength; index++) { binaryText += String.fromCharCode( bytes[index] ); } console.log(Base64.encode(binaryText)); }; reader.readAsArrayBuffer(file); }; 这是我正在测试的文件（它是100×100蓝色方块）： […]

Vimeovideo无法使用HTML5标记

我想为Vimeovideo添加一个滑块。 我检查了这个滑块 ，但它使用了HTML5video标签。 当我使用与Vimeovideourl相同的标签时，它不起作用。 这是我的代码： 这是完整的代码： jQuery Slider

单击HTML5 Datalist选项时的jQuery事件

我现在拥有的： 所以我有这个HTML5 Datalist，里面有很多选项，我有2个事件被触发。 一个用户键入的东西与填充选项的名称数组相匹配，例如“Rick Bross”或“Jack Johnson”（keyup）。 当用户开始键入名称时，会弹出另一个事件，弹出，用户向下箭头，然后点击“输入”（更改）。 问题： 当用户单击其中一个下拉选项时，在输入全名之前，以及在对象模糊之前，我需要触发一个事件。 如果用户在名称完全输入之前立即单击一个，则只有输入模糊后，2个事件才会触发该function。 标记： Javascript事件和function： window.checkModelData = function(ele) { var name = $(ele).val().replace(” “, “”); var mod = potentialModels[name]; if(mod) { loadModelData(name); } } function loadModelData(name) { var mod = potentialModels[name]; $(“#address”).val(potentialModels[name].address); $(“#city”).val(potentialModels[name].city); $(“#state”).val(potentialModels[name].state); $(“#email”).val(potentialModels[name].email); $(“#phone”).val(potentialModels[name].phone); $(“#zip”).val(potentialModels[name].zip); } $(“#name”).keyup(function(){ window.checkModelData(this); }); $(“#name”).change(function(){ window.checkModelData(this); });

resize时html5canvas重绘

我有两个canvas元素，需要在按钮点击时resize。 和脚本： var sketch;var sketch_sl;var onPaint;var canvas=null;var ctx=null;var tmp_ctx=null; function drawCanvas(div) { canvas = document.querySelector(div + ” #canvasGraph”); ctx = canvas.getContext(‘2d’); sketch = document.querySelector(div + ” #canvasDiv”); sketch_sl = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue(‘width’)); canvas.height = parseInt(sketch_style.getPropertyValue(‘height’)); tmp_canvas = document.createElement(‘canvas’); tmp_ctx = tmp_canvas.getContext(‘2d’); tmp_canvas.id = ‘tmp_canvas’; tmp_canvas.width = canvas.width; tmp_canvas.height = canvas.height; sketch.appendChild(tmp_canvas); 重绘function： // here […]