草庐IT

CSS中box-shadow属性和2D变换

全部标签

javascript - 如果用户更改了 CSS 样式,则触发事件?

我正在为IE9(Javascript)编写一个轻量级的htc程序。CSS3有一个名为transition的新属性,但它在IE9中不起作用。我正在尝试实现它,但我需要知道属性何时更改。我熟悉DOMAttrModified和onpropertychange,但如果CSS更改属性,它们不会触发:a{color:#FFF;}a:hover{color:#000;}如果您将鼠标悬停在anchor上,DOMAttrModified不会执行任何操作。我可以使用mouseover、mouseout、blur、focus、activate和停用并在每次发生属性更改时检查它们,但是如果:div:hover

javascript - 缩略图悬停缩放(放大)w/CSS3 和 javascript z 轴问题

我试图构建一系列在悬停时放大的缩略图。我的初步构建通过使用CSS3transform:scale和ease-in-out完成放大/缩放部分。问题是它们相互重叠,因为它们共享一个z轴。任何人都可以帮助我为这个场景创建一个javascript添加,正确地将每个缩略图定位在一个有意义的z轴上,即每个放大的图像调整大小以位于彼此图像的顶部。我网站上的演示:demo更新:已解决代码预览:html:CSS:#maindiv.hover{position:relative;z-index:200;display:block;-webkit-transition:all0.2sease-in-out;

javascript/jquery - 如何获取尚未添加到 dom 的元素/css 类的宽度

我正在尝试动态查找具有特定宽度的css类的元素的宽度,以便动态定位其背景图像(Sprite)。但是,该元素尚未添加到DOM。有没有办法在将类添加到DOM之前读取类的宽度属性? 最佳答案 我相信你做不到。而是将其添加到测试div,找到宽度,然后删除div。$selector.append("");varwidthVal=$selector.find("#test").width();$("#test").remove();selector是您可能想要附加到的元素选择器。您可以将一个类与“test”div相关联,使其显示为“displa

javascript - d3.js - 变换和过渡,多行

我已按照以下说明进行操作:http://bost.ocks.org/mike/path/用于使用单行创建和动画化单个图形。并且,弄清楚了如何在图表中创建多条线:DrawingMultipleLinesinD3.js主要问题:在将新数据移动并插入我的数据阵列后,我很难转换多行。我创建了N行:(时间:纪元时间,向前迈进)varseriesData=[[{time:1335972631000,value:23},{time:1335972631500,value:42},...],[{time:1335972631000,value:45},{time:1335972631500,value

javascript - CSS/HTML5 :hover state remains after drag and drop

我正在使用html5的拖放功能在屏幕上重新排列dom元素-我在执行此操作时将css行为附加到拖放的各种状态,但我遇到的问题是悬停状态保持均匀在我拖放和鼠标移出DOM元素之后。这是我的代码:JavaScript:functionaddDragListeners(){$('.segmentListItem').each(function(index){$(this)[0].addEventListener('dragstart',handleDragStart,false);//rolloverforcurrent$(this)[0].addEventListener('drop',han

javascript - MSIE9 -- 当同时调整宽度和填充的 CSS 时,输入/文本区域中的文本不服从当前填充

我有一个简单的脚本,可以分别在focus/blur的文本区域/输入中添加和删除padding-left。这是为了在字段左侧为一个绝对定位的小按钮腾出空间,而不会阻挡其下方的文本。[编辑]它还同时更改元素的宽度,以保持block的总大小一致。在几乎所有浏览器中,这都工作得很好,但MSIE9除外。[编辑]尽管框保持相同大小,表明两个属性的CSS已正确更新,但输入/文本区域中的文本表现得好像填充没有改变。我知道focus/blur事件的回调会正确触发和更新DOM对象的样式属性,因为获取属性的当前值总是会为您提供预期的值。即varfield=$(field);field.css({'paddi

javascript - 调整大小的 CSS 调整大小句柄 : both property

我正在使用CSS3属性:resize:both;overflow:none;这会在元素的右下角放置一个调整大小的handle。我的第一个问题是:我可以使用这个CSS属性在元素上放置其他句柄吗?即我可以在右边缘放置一个handle吗?我知道这并不总是有效,除非元素是绝对定位的。第二个问题是:我可以将handle的样式设置为更适合我的应用程序吗?我不能使用可调整大小的jQuery;我用我正在尝试做的事情(CKEditor中的Div)对其进行了测试,但它不起作用。如果没有人能解决上述问题,也许可以使用替代插件? 最佳答案 看看这个帖子也是

javascript - 无法设置所选属性。未指定的错误。 knockout

我在windowsXP上使用VS2010,Jquery-1.7.1.min.js,knockout-2.1.0.js,我的浏览器是IE8。尝试使用数组进行简单的竞标,并且:代码如下://my.js:$(function(){functiontvm(){//Arraythis.tickets=[{name:'A',price:125},{name:'B',price:128},{name:'C',price:145}];//thiswillholdtheselectedvaluethis.chosenTicket=ko.observable();}ko.applyBindings(new

javascript - 在 2D 平面上查找不可访问的点

我一直在研究JavaScript/JQuery代码,它允许箭头键在输入框之间移动(是的,我知道这会破坏标准UI)。它的工作原理是循环遍历每个元素并在每个方向(左、右、上和下)找到最近的元素。例子P1:(0,0),P2:(1,0),P3:(0,2)P1有一点向右(P2)和一点向上(P3)。P2有一点向左(P1)和一点向上(P3)。没有图片P3落后两点(P1和P2),但P1更近。因此最后的Action是:Up1->32->3Right1->2Down3->1Left2->1对于这个例子:P1有两个传入和两个传出连接。P2有1个传入和2个传出连接。P3有两个传入和一个传出连接。这让我思考。是

javascript - 适合与 D3js 结合的库,以允许绘制到 webgl (2D)

这是我正在尝试做的:http://mbostock.github.com/d3/talk/20111116/iris-splom.html但我想在webgl2d中执行此操作(因为SVG性能非常慢,渲染10kSVG仅已降至12fps)通过快速搜索,我发现了几个webgl-2d库:cocos2d-html5,pixijs,Three.js和webgl-2d(废弃?)它们看起来很简单,但我想做的是数据可视化。cocos和pixijs是2d游戏库。我是webgl和那些库的新手,所以SO方面的专家你们能推荐一下吗?我需要的东西的总结:互动:地block内的矩形选择。单击以选择某些元素。缩放和平移