Tag: 图片

jquery翻转和活动状态

我为任何愚蠢的问题/编码道歉，我对jquery很新！ 我正在尝试为具有翻转和活动状态的单页网站创建菜单。 HTML： jQuery的： $(document).ready(function(){ $(“a.rollover”).fadeTo(1,0.5); $(“a.rollover”).hover( function() {$(this).fadeTo(“fast”,1);}, function() {$(this).fadeTo(“fast”,0.5);}); $(“a.rollover”).click(function(){ if($(“.active”).length) { if($(this).hasClass(“active”)) { $(this).removeClass(“active”); $(this).fadeTo(“fast”,0.5); } else { $(“.active”).fadeTo(“fast”,0.5); $(“.active”).removeClass(“active”); $(this).addClass(“active”); $(this).fadeTo(“fast”,1); } } else { $(this).addClass(“active”); $(this).fadeTo(“fast”,1); }}); }); 所以这里有两个问题： 即使添加了活动类，并且在Chrome的开发人员工具中，我可以看到活动类的不透明度为“1”，它似乎在浏览器中不起作用，即。 不透明度仍然在浏览器中显示为“0.5”。 如果$（this）处于活动状态，即使单击$（this）从而删除活动类，不透明度仍为“1”。 如果我多次点击$（this），最终不透明度会变回“0.5”。 我非常感谢你的帮助。 我一直在努力争取这个……现在3天嘿： – / 提前谢谢了…

从jquery通过AJAX发送图像数据

我需要使用AJAX从客户端发送图像数据（data：image / png; base64）到我的PHP服务器。 我的AJAX调用如下所示：（form_data包含图像） $.ajax({ url: global_siteurl+’/save_image’, data: form_data, dataType: ‘json’, type: ‘post’, contentType: “application/x-www-form-urlencoded; charset=UTF-8”, success: function (retval) { process_save_image(retval); } }); 然后我将编码的图像数据作为blob存储在数据库中（是的 – 背后的故事！）。 当我检索图像数据时，它似乎已损坏并且无法正确显示。 几乎就像在图像数据中引入了换行符和空格一样。 我在ajax调用中缺少任何参数吗？ 关于可能出错的任何想法？ 我可以发送的图像数据是否有大小限制？ 这是一个漫长的4天追逐这一个。 Mmiz

在没有闪烁的情况下交换图像，同时立即显示新图像

TL; DR：有没有办法可靠地交换图像，同时显示当时正在加载的图像而不会导致页面闪烁？ 我有2个图像和2个按钮，当我将鼠标hover在一个按钮上时，它会显示一个图像。 将鼠标hover在另一个按钮上会切换到第二个图像。 我是这样做的： $(‘#button1’).mouseover(function() { $(‘#image’).attr(‘src’, ‘image1.png’); }); $(‘#button2’).mouseover(function() { $(‘#image’).attr(‘src’, ‘image2.png’); }); 这样可以正常工作但是当第一个图像已加载而第二个图像没有加载时，它在完成加载之前不会显示第二个图像。 为了尝试向用户提供一些关于何时加载新图像（他们希望立即显示）的指示，我强制它在这些交换之前添加空图像，如下所示： $(‘#button1’).mouseover(function() { $(‘#image’).attr(‘src’, ‘#’); $(‘#image’).attr(‘src’, ‘image1.png’); }); $(‘#button2’).mouseover(function() { $(‘#image’).attr(‘src’, ‘#’); $(‘#image’).attr(‘src’, ‘image2.png’); }); 当一个图像通过在加载时显示图像而加载时，这种方法很有效，但现在一旦加载图像，它们之间的空图像在切换图像时会导致闪烁。 我想我可以通过在两个图像加载后关闭空图像来解决这个问题，但事实certificate这是不可靠的。 在stackoverflow上的其他位置建议的$(‘#image’).prop(‘complete’)和imagesloaded都不一致，注意到图像是否已加载。 检测加载的图像似乎是一个死胡同。 我还考虑过强迫图像在创建之前和之后显示和隐藏，但这似乎根本不起作用，尽管我不知道为什么。 加载时没有显示新的，我不确定它们是否正确交换： $(‘#button1’).mouseover(function() { $(‘#image’).hide(); $(‘#image’).attr(‘src’, ‘image1.png’); $(‘#image’).show(); }); $(‘#button2’).mouseover(function() { $(‘#image’).hide(); $(‘#image’).attr(‘src’, ‘image2.png’); $(‘#image’).show(); }); 有没有办法可靠地交换图像，同时显示当时正在加载的图像，而不会导致我没有尝试过的页面闪烁？

更改文本图像的字体大小，动态地从文本转换为图像function

工作模具艺术。这里我已经将文本转换为图像这是有效的我有3个文本框每个文本框在浏览器上生成单独的图像行。问题是，我有三个另一个文本框来更改每个的字体大小转换的文本。我不知道如何将3种不同的字体大小变量转换为文本以更改字体大小，因为。 演示链接： – 点击这里 Bellow是我想要的快照。你可以看到你可以通过字体大小文本（Line Height）更改每行文本字体大小。 我的index.php示例代码 $(document).ready(function(){ /* $( “#target” ).change(function() { // alert( “Handler for .change() called.” ); var fontname = this.value; //alert(fontname); var img_text = $(‘input[name=”stencil-text”]’).map(function(){ return $(this).val(); }).get(); var img = $(“”).attr(‘src’, ‘some.php?img=’ + img_text+’&fontname=’+fontname).load(function() { if (!this.complete || typeof this.naturalWidth == “undefined” || this.naturalWidth == 0) { alert(‘broken image!’); } […]

使用css或jquery将一个图像淡入另一个图像

我需要能够在hover时淡入初始图像上方的第二张图像。 我需要确保第二张图像最初不可见，直到它渐渐消失。另一个重要的注意事项是， 这些图像都不应该在任何时候完全淡出 。 我尝试了几种方法，例如使用1张图像，2张图像，jquery animate和css过渡。 我已经读过可以使用jquery动画更改属性吗？ 如果这是真的，我如何使用jquery为img中’src’的更改设置动画？ $(“.image”).mouseenter(function() { var img = $(this); var newSrc = img.attr(“data-hover-src”); img.attr(“src”,newSrc); img.fadeTo(‘slow’, 0.8, function() { img.attr(“src”, newSrc); }); img.fadeTo(‘slow’, 1); }).mouseleave(function() { var img = $(this); var newSrc = img.attr(“data-regular-src”); img.fadeTo(‘slow’, 0.8, function() { img.attr(“src”, newSrc); }); img.fadeTo(‘slow’, 1); }); 这就是我目前正在使用的。 这是我得到的最接近的。 但是你可以看到图像变化是不可取的。

Jquery Noobish帮助：Img OnClick

我是JQuery的新手，我在理解如何执行此操作时遇到了一些麻烦： 我有一个类“imgexpander”的图像，src属性设置为“img1.png”。 单击图像时，应该查看具有“expand”类的div当前是隐藏还是可见。 如果它是隐藏的（这是默认值），它会显示它（我知道如何使用show（））并将图像的src属性更改为“img2.png”。 要么： 如果div是可见的，它会隐藏它并将图像的src属性更改为“img1.png”。 我还不熟悉JQuery中的可用function。 怎么可以实现呢？ 你能给我一些我可以使用的示例代码吗？ 提前致谢！ 更新 ：我忘了添加一个细节：是否有可能以某种方式使onclick类的图像“imgexpander”只影响所有包含在一个大div中的div？ 因此，层次结构将类似于： 大div onclick的图像 需要受影响的div 另一个大的div onclick的图像 需要受影响的div 期望的结果是让每个“带有onclick的图像”仅影响其各自“大div”内的“需要受影响的div”。 这可能吗？ 我不确定目前的答案是否合适，但谢谢！

通过AJAX上传图片，不能在jQuery中使用serialize（）方法？

我发现使用AJAX上传图像似乎不能使用表单中指定的multipart，因为我的代码用于检查它的multipart（）是否从不起作用（在Java中）; if (context.isMultiPart() { System.out.println(“received Multipart data”); } else { System.out.println(“not multipart data!”); /* my code always prints this message in the upload handler uploadPost() */ } 我有这个HTML格式： Upload picture! Please specify file to upload: 以下是我的ajax代码，它将图像发送到地址/uploadPost上传处理程序。 我的Java代码中的uploadPost（）方法首先确定上传是否是多部分，但是，似乎ajax不会将图像作为multipart发送。 是因为我在表单上使用jQuery的serialize（）方法吗？ $(document).ready(function() { $(‘#imageUploadForm’).submit(function(evt) { var formData = $(‘#imageUploadForm’).serialize(); $.post(‘/uploadPost’, formData, uploadResults); evt.preventDefault(); }); // display the uploaded […]

从字符串中删除图像元素

我有一个字符串，其中包含存储在var中的HTML图像元素。 我想从字符串中删除图像元素。 我试过了： var content = content.replace(//,””); 和： var content = content.find(“img”).remove(); 但没有运气。 任何人都可以帮助我吗？ 谢谢

将图像定位在随机位置

我想在屏幕的随机位置放置随机图像。 我试过这个： $(document).ready(showLetter); var imgsArray = [“A1”, “C1”, “F1”, “J1”, “K1”, “L1”, “S1”, “Ñ1”]; function generateRandomForArray() { var num = Math.floor(Math.random() * 8); return num; } function generateRandom() { var num = Math.floor(Math.random() * 400); return num; } function showLetter() { var letter = imgsArray[generateRandomForArray()]; $(“div”).append(“”); var left = generateRandom(); var top = generateRandom(); $(“div”).last().css({“top”: […]

从Javascript中的extern URL加载时获取图像大小

我需要知道从extern URL加载时的图像大小，因为项目需要调整图像div的大小。 我需要做这样的事情： 并且，使用Javascript和JQuery： $(‘#imglegend’+layername).ready(function(){ var h = $(‘#imglegend’+layername); // Resize image div container }); 但这没效果。 有可能吗？ 提前致谢！