草庐IT

javascript - jQuery 改变图像高度保持纵横比

所以我有一个画廊,其中我的大部分图像目前100%由CSS控制。但是,在设置min-height:100%;在我的图像上,我使一些图像拉伸(stretch)。我没有太多有问题的照片,但用户上传什么是我无法控制的。无论如何,使用jQuery我可以获得图像高度并检查它是否满足要求,如果不满足,则以某种方式增加图像宽度以满足高度要求但保持所有比例?因此,我避免造成任何失真,但通过让div没有间隙来保持画廊的整洁。注意:提供的图像是我删除min-height:100%;时发生的情况,以便您可以看到我的问题。更新-----我找到了一个目前似乎工作正常的解决方案,它可能不是最好的尝试,但我找到了另一

javascript style.width 在具有过渡文档类型的 firefox 中不起作用

我有一个脚本可以让一个小的DIV在页面上弹出。在IE中一切正常,如果我删除DOCTYPE,在FF中一切正常,但是当DOCTYPE为XHTML/Transitional时,在Firefox中,宽度不会改变。this.container.style.visibility="visible";alert("this.container.style.widthbefore="+this.container.style.width)this.container.style.width=this.width;alert("this.container.style.widthafter="+this

javascript - Angularjs根据父元素宽度调整宽度

我正在使用AngularJS和Bootstrap,并且具有以下结构:Datagridwithmanycolumns我希望让我的flexible-width-component拉伸(stretch)自动填充它自己和fixed-width-component之间的间隙,对于任何比宽的分辨率>1200像素。两个组件都需要彼此相邻显示。非常感谢任何建议! 最佳答案 您可以获得您的父容器offsetWidth并从中减去您的固定宽度:varexample=angular.module('exmp',[]);example.directive('

javascript - 使用箭头键遍历内容可编辑的段落

我尝试使用箭头键在内容可编辑的段落之间移动。我不能在所有段落周围放置一个包含div,因为它们可能会被其他不可编辑的元素分开。我需要能够确定第一行的字符长度,以便当光标在该行上时按下向上箭头键时它会跳到上一段-希望保持光标位置相对于行。我可以通过以下方式获取游标索引:functioncursorIndex(){returnwindow.getSelection().getRangeAt(0).startOffset;}并将其设置为:如此处-JavascriptContenteditable-setCursor/CarettoindexvarsetSelectionRange=functi

javascript - Angular2 动画媒体查询

我一直在研究Angular2的动画DSL,但我对如何将动画限制在特定的媒体屏幕尺寸上感到有点困惑。例如,假设我有一个Logo,该Logo在主页上的宽度为400像素,当用户在计算机显示器上访问任何其他页面时会缩小到200像素。...animations:[trigger('homeLogoState',[state('inactive',style({width:'200px',transition:'width'})),state('active',style({width:'400px',transition:'width'})),transition('inactiveactive

javascript - jQuery Flot : Set width of chart (without labels)

有什么方法可以设置图表的实际大小(没有标签)?我有一个宽度为880像素的容器,我想让图表精确地延伸到那个宽度,并让坐标轴突出。现在当然是应用填充,以便轴可以适合指定区域。我摆弄了固定的labelWidth选项和应用于容器的负边距,但这并没有给我带来任何用处。 最佳答案 要使坐标轴突出,您可以将坐标轴(分别为y和x)的labelWidth和labelHeight设置为负值,并为容器留出边距,以便外部有足够的空间。CSS:#placeholder{border2pxsolidred;margin:30px;}float选项:varopt

javascript - 表格行显示/隐藏 *无* 列宽调整,w/TableLayout : auto

我有一个包含多行的表格,显示待售商品。当用户单击一行时,Javascript会在其正下方插入/显示一个新行,其中包含有关该元素的详细信息。问题是当描述很长时,它会强制列宽重新调整/调整大小。这改变了列的位置并且真的很烦人,特别是对于用户而言。现在,我有我的table.style.tableLayout:auto。我实际上更喜欢这种方式,因为列会根据内容进行调整。我的问题是:如何动态“锁定”表格中列的宽度,以便在插入/显示新行时,列不会重新调整/调整大小?我试过:将表格动态设置为临时“tableLayout:fixed”插入/显示我的新行将表格改回“tableLayout:auto”操作

Javascript 图像平移/缩放

通过结合一些CSS和JqueryUI/可拖动,我创建了平移图像的功能,并且通过一些额外的JS,您现在可以缩放图像。我遇到的问题是,如果您放大图像,左上角是固定的,正如您所期望的那样。我想要的是图像保持居中(基于当前的平移),以便图像的中间保持在容器的中间,同时变大。我已经为此编写了一些代码但没有用,我想我的数学是错误的。谁能帮忙?我希望它像this一样工作做。当您滚动到图像时,它会根据当前平移使图像居中,而不是从Angular落缩小。HTML:Javascript:$("#_popup_creator.user_image").bind('mousewheel',function(ev

javascript - 获取由 css column-width 创建的列数

这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Howtogetcss3multi-columncountinJavascript我有一个很长的动态文本,它将使用CSS分成几列div{-moz-column-width:500px;-moz-column-gap:20px;}是否可以获取创建了多少列?我在客户端使用jQuery。

javascript - 在纯 JavaScript 中,jQuery 的 .height() 和 .width() 等价于什么?

是否有任何等效的跨浏览器API来获取不包括边框大小、填充和边距的内容高度和宽度?我没有使用jQuery的选项。编辑:忘了说了,我也要支持IE8。 最佳答案 好吧,我已经设法找到了解决方案。对于IEWindow.getComputedStyle()可以解决问题。Window.getComputedStyle()方法在应用事件样式表并解析这些值可能包含的任何基本计算后给出元素的所有CSS属性的值。参见https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedSt