Tag: html5

带滚动的Jquery / Javascript Opacity动画: 我希望根据用户滚动更改对象的不透明度（并使动画转换为动画）。示例（http://davegamache.com/）我在这里搜索过，但它最终指向了我的路标插件（http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position）我已经实现了[waypoints] [1]插件，并且一旦高于100px就会使对象褪色。 [使用offet属性]但希望基本上控制对象的不透明度，并使动画像上面的例子一样可见。我已经搜遍过了 – 这是我的最后一招。任何帮助是极大的赞赏。

jQuery切换类: 我在将jQuery的toggleClass函数添加到我的其余代码中时遇到了麻烦。该页面上有几个HTML5音频标签，通过jQuery控制。我试图将切换function添加到我的jQuery音频控制function，但它没有添加类，随后音频控件不起作用..所以我想这是一些奇怪的语法错误。你们推荐什么？下面是一个jsFiddle和我（不幸的）弱尝试:) http://jsfiddle.net/danielredwood/FTfSq/10/ HTML： Your browser does not support HTML5 audio. Your browser does not support HTML5 audio. Your browser does not support HTML5 audio. JavaScript的： var curPlaying; $(function() { $(“.playback”).click(function(e){ e.preventDefault(); var song = $(this).next(‘audio’)[0]; song.toggleClass(“playing”); if(song.paused){ song.play(); if(curPlaying) $(“audio”, “#”+curPlaying)[0].pause(); } else { song.pause(); } curPlaying = $(this).parent()[0].id; }); }); […]

单击按钮更改背景，仅使用CSS？: 是否可以在button点击时更改背景颜色; 整个document ，只使用CSS和HTML5？（例如：它在JavaScript中是微不足道的）

使用jQuery和Bootstrap-Typeahead创建自定义Type-Head？: 我正在尝试创建一个像这样的自定义类型头 – 。我所做的是 – HTML – Example of Twitter Typeahead typehead_customization.css .bs-example{ font-family: sans-serif; position: relative; margin: 100px; } .typeahead, .tt-query, .tt-hint { border: 2px solid #CCCCCC; border-radius: 8px; font-size: 24px; height: 30px; line-height: 30px; outline: medium none; padding: 8px 12px; width: 396px; } .typeahead { background-color: #FFFFFF; } .typeahead:focus { border: 2px solid […]

如何从html网页生成pdf？: 我正在寻找一个库，可以在从按钮点击事件后将我的网页转换为PDF文件。我正在尝试jspdf ，但它打印没有CSS，我怎样才能使用JavaScript/jQuery并保留我的CSS？还是我可以选择的另一个CSS？

在本机不支持它的浏览器中模拟“占位符”属性的最准确方法是什么？: 最近我一直在研究jquery / javascript解决方案来模仿placeholder属性，但是它们似乎都没有。常见问题是：首先不使用本机浏览器支持表单实际上可以发布占位符文本的值如果值相同，则无法识别占位符文本和用户输入（嘿，我的电子邮件是IS user@example.com !!为什么不提交？嘿我想搜索字符串“搜索”但它不会让我来！）难以设计或区分常规文本和占位符文本突兀的实现（几乎总是。我不想为每个输入添加2个div和一个样式表来执行此操作）只是不起作用。 jQuery网站上至少有2个。我已经玩了一些试图让它正常工作（从我已经看到的一些代码中获得一些提示），但它仍然需要工作。特别是，表单可以发布占位符的值。欢迎评论和修改jsfiddle 。（注意：Demo必须在没有占位符支持的情况下在浏览器中查看）我看到的大多数代码都占用了placeholder的值，并将其填充到输入本身，这导致了这个问题，我觉得必须有更好的方法。有一个很好的清洁解决方案，实际上有效吗？编辑：我想强调一下：它应该像你在尽可能本地支持它的浏览器中看到的那样，并且尽可能不突兀，正如我当前的代码中所certificate的那样，除了包括脚本和正常情况下使用placeholder的浏览器支持它。更新：@DA目前的解决方案是完美的一些错误修复（见评论），很想看到这个100％汇集在一起，并把所有坏的和错误的代码放在网上羞耻。更新：使用DA代码的几个mod工作，但它仍然不完美，主要是关于动态添加的输入字段和现有的submit()绑定。感谢所有的帮助，我现在已经决定它不值得。我知道有些人肯定会使用这个。这是一个很好的技巧，但对我来说，即使表单提交做出不打算做的事情，或者错误地阅读用户输入，也不值得1％的可能性。这个次要function不值得头疼，IE和好友只能处理它，或者如果真的需要它可以根据具体情况实现，就像客户要求它一样。 @DA再次感谢，这是我见过的最好的实现。结论：我认为克服所有这些问题的唯一方法是这样的：将占位符值复制到新的块级元素将新元素添加到输入中计算输入的高度边框和填充，并在其上移动新元素尽可能接近文本将发生的位置使用标准模糊/更改/焦点事件可在输入具有值或聚焦时隐藏元素这样，您无需在提交或处理可能发生的任何其他问题时执行任何操作。对不起没有演示，我必须重新开始工作 – 但是我会保存一个最终的编辑，当它汇集在一起。

如何在表单中的输入类型=“文件”中添加图像并在同一表单上提交它们之后生成缩略图图像: 我有一个允许用户上传图片的表格。在用户提交表单后，我想在前端生成每张图片的缩略图，然后将其存储在服务器上。出于安全原因，无法更改文件输入字段的值，因此如何向服务器发送在js中在前端生成的一些缩略图图像？在表单提交之前，是否可以在前端从输入文件字段中的图像集生成缩略图？然后同时提交两个？

使用jquery或PHP或将div转换为pdf，正确捕获当前屏幕的图像: 我写了一些代码，用于将svg转换为内联svg并截取该div的截图。请检查。请将此代码int复制到本地主机并进行测试。因为不同宽度的屏幕截图不同。 https://jsfiddle.net/7bqukhff/15/ Sample description select 2 3 4 Generate Screenshot » $(function() { $(“.desgign-class”).on(“change”,function(){ var op=$(this).val(); if(op!=0){ $(‘.btn’).show(); $(‘.img-div’).html(”); if(op==2){ for(var i = 0;i<op;i++){ $('.img-div').append("”); } } if(op==3){ for(var i = 0;i<op;i++){ $('.img-div').append("”); } } if(op==4){ for(var i = 0;i<op;i++){ $('.img-div').append("”); } } } else{ $(‘.btn’).hide(); } $(‘img’).each(function() { var $img = jQuery(this); […]

在jQuery mobile中，tap和vclick之间有什么区别？: 我应该用哪个事件来听？为什么要使用vclick？我只是不知道使用哪种情况。

HTML5响应式canvas：调整浏览器canvas大小消失: 我希望使用百分比大小制作响应式canvas，一旦用户调整canvas大小相对resize。我能够通过使用下面的代码来缩放canvas，但唯一的问题是当缩放窗口大小鼠标绘图消失时。 body{margin:0px;padding:0px;background:#a9a9a9;} #main{ display:block; width:80%; padding:50px 10%; height:300px; } canvas{display:block;background:#fff;} var c = document.getElementById(‘paint’); var ctx = c.getContext(‘2d’); var x = null; var y; c.onmousedown = function(e){ x = e.pageX – c.offsetLeft; y = e.pageY – c.offsetTop; ctx.beginPath(); ctx.moveTo(x,y); } c.onmouseup = function(e){ x=null; } c.onmousemove = function(e){ if(x==null) return; x = e.pageX – […]