Tag: html5

如何在不改变其模式的情况下更改HTML5 Canvas中图像的颜色

我想在保持图像的形状，效果和轮廓的同时更改此图像的背景颜色。 function drawImage(imageObj,x, y, width, height){ var canvas = document.getElementById(‘canvas01’); var context = canvas.getContext(‘2d’); context.drawImage(imageObj, x, y, width, height); } var image = new Image(); image.onload = function(){ drawImage(this, 400, 100, 320, 450); }; image.src =”images/658FFBC6.png”;

多个图像上传和预览

我正在学习如何上传多个图像并显示他们的预览…… 我遇到了以下代码 .input-file-row-1:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } https://stackoverflow.com/questions/20779983/multiple-image-upload-and-preview/#preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url(‘images/picplus.png’) top center […]

在div上滚动激活另一个div的滚动

的jsfiddle 当我在滚动之外时，我试图激活当前滚动，特别是在#DivDet 这是我试过的： $(“div#DivDet”).scroll(function () { // I don’t know what i should have here // something like $(“div#scrlDiv”).scroll(); });

如何在jQuery draggable div上选择文本？

我使用jQuery创建了一个div draggable。 但是，该框中有一些文字，我仍然希望能够复制和粘贴文本，但是当我单击框时我将项目拖得很好，它就开始移动框了？

使用javascript在客户端动态创建面包屑

我想使用java脚本在客户端动态创建面包屑 。 面包屑将是用户在导航时遵循的路径 ： 主页>关于我们>我们的历史.. 将在用户导航的序列中的每个页面上生成锚标签。 现在我可以轻松地使用服务器端技术创建这些面包屑，但我想在客户端的每个页面上动态生成它。 现在我不确切知道如何实现它。 我心中的一些逻辑是： 在java脚本中创建一个具有名称和值对的对象类型变量 ，其中name是当前页面的名称， value是该页面的url 。 现在，在从一个页面导航到另一个页面时，使用查询字符串传递此对象变量。 然后在第二页中从查询字符串中获取该对象变量，并从该对象中提取名称和值对，然后使用该对创建锚并将其添加到目标div（占位符）。 再次当用户转到另一个页面时，为对象变量中的最后一页添加所有先前页面的名称和值对以及当前页面的名称和值对 ，并使用查询字符串将其传递到下一页。 现在在下一页中做同样的事情并创建锚点。 我在这里使用html5客户端存储的相似之处： html： Page1 Page2 Page3 JS： $(document).ready(function(){ bindEventToNavigation(); }); function bindEventToNavigation(){ $.each($(“#navigation_links > li”), function(index, element){ $(element).click(function(event){ breadcrumbStateSaver($(event.currentTarget).html()); showBreadCrumb(); }); }); } function breadcrumbStateSaver(text){ //here we’ll check if the browser has storage capabilities if(typeof(Storage) != “undefined”){ if(sessionStorage.breadcrumb){ […]

IE需要双击自定义按钮

我有一个潜水的脚本： HTML： Click me! File is uploaded! JavaScript（JQuery 2）： $(document).ready(function () { $(“input”).on(“change”, function () { $(“div#notice”).fadeIn(); //$(“form”).submit(); //If you want it to submit on your site uncomment this }); }); CSS： div#wrapper { background-color: #ccc; position: absolute; width: 300px; height: 200px; } div#wrapper > form > input { color: rgba(0, 0, 0, 0); zoom: […]

可信的div中的HTML5可拖动元素 – 在第一次掉落后停止工作 – 为什么？

我正在尝试创建一些可拖动的元素（标记），可以在一个可信的div中拖动。 似乎一切都在工作，除了……在我拖动一个元素然后放下它之后，我再也无法拖动它了。 似乎我再也无法绑定它的dragstart事件了。 知道为什么会这样，我该如何解决？ 这是我小提琴的链接： http ： //jsfiddle.net/gXScu/1/ HTML： Testime siinkohal seda, et kuidas on võimalik asja testida. Token Token 2 Javascript（jQuery） var bindDraggables = function() { console.log(‘binding draggables’, $(‘.draggable’).length); $(‘.draggable’).off(‘dragstart’).on(‘dragstart’, function(e) { if (!e.target.id) e.target.id = (new Date()).getTime(); e.originalEvent.dataTransfer.setData(‘text/html’, e.target.outerHTML); console.log(‘started dragging’); $(e.target).addClass(‘dragged’); }).on(‘click’, function() { console.log(‘there was a click’); }); } $(‘#editor’).on(‘dragover’, function […]

jquery html 5 dragstart .on（’dragstart’，function（e）{}）e.dataTransfer.setData（）不起作用

chrome throw err：无法调用未定义的方法’setData’，我发现e不等于window.event（它没有属性dataTransfer）;两者都有很大的不同 我发现在click事件中几乎都是相同的。 我使用了http://code.jquery.com/jquery-latest.js 。 我不使用拖动function，我只想知道为什么。 它是html 5中的新function，jquery仍然落后于它？ 还是jquery团队不想支持它？ 或其他一些原因

HTML5 / js – 如何在两个坐标之间设置直线动画？

足够简单的问题（可能是错的） 我希望使用HTML5和/或Jquery在直线上的两个点之间进行动画制作。 ctx.beginPath(); ctx.moveTo(0, 0); // a ctx.lineTo(100, 100); // b ctx.stroke(); 编辑：一个jquery插件我正在开发路径动画http://lazylinepainter.info/

在Fileselect之后Plupload Html5预览

http://jsfiddle.net/VjeTk/78/ 使用Plupload.com文件上传器 我想在html5运行时浏览器选择文件后预览图像。 因此我添加了FilesAdded事件 uploader.bind(‘FilesAdded’, function(up, files) { for (var i in files) { $(‘filelist’).innerHTML += ” + files[i].name + ‘ (‘ + plupload.formatSize(files[i].size) + ”) ‘; } }); 问题是Plupload没有像html那样提供通常的二进制文件对象。 谢谢你的帮助。