使用CSS,我如何设置以下样式:
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>
Run Code Online (Sandbox Code Playgroud)
所以dt一列中的节目内容和dd另一列中的内容,每个dt和相应dd的行在同一行?即生成看起来像这样的东西:
正如标题所说,有没有办法设置iframes伪before/ after?没有用另一个包装iframe div,或者?`
我试着像任何其他元素一样设计样式,但没有成功:
iframe::before {
content: 'foo';
position: absolute;
top: 0;
left: 0;
}
iframe::after {
content: 'bar';
position: absolute;
top: 0;
right: 0;
}
Run Code Online (Sandbox Code Playgroud)
http://fiddle.jshell.net/ppRqm/
更新
一个已知的解决方法是将前/后添加到源文件中的元素:http: //fiddle.jshell.net/ppRqm/2/
但有时您无法访问源文件.
是否可以duration在两个不同的值之间更改当前运行的jQuery动画?
我试图改变duration通过直接分配,但没有成功:
var timing = { duration: 4000 };
$(document).click(function (e) {
timing.duration = 1000;
});
$('#foo').animate({top:200, left:200}, timing);
Run Code Online (Sandbox Code Playgroud)
...甚至,更改fx.options.durationin step-method不会影响正在运行的动画:
var state = false,
$(document).click(function (e) {
state = true;
});
$('#foo').animate({top:200, left:200}, {
duration: 4000,
step: function(now, fx){
if(state) fx.options.duration = 1000;
console.log(fx.options.duration); // 1000
}
});
Run Code Online (Sandbox Code Playgroud)
这是一个小提琴.有什么想法可以做到这一点?
有关如何step在jQuery 1.6+中扩展-function的任何想法?
我做了一个特殊事件来触发custom-event每个动画步骤.但是,由于jQuery的动画方法已经改变,或者说step函数不再可扩展($.fx.step导致为空object),因此无法用自己的东西扩展它.
(function($){
var oldStep = $.fx.step._default;
$.event.special.animating = { };
$.fx.step._default = function( fx ) {
$(fx.elem).trigger('animating', fx);
oldStep.apply( this, arguments );
};
}(jQuery));
$('#foo').animate({width: 200});
$('#foo').bind('animating', function(e, fx){
console.log(fx);
});
Run Code Online (Sandbox Code Playgroud)
任何想法如何使用更新的jQuery版本?
是否可以在不使用画布的情况下将字节数组转换为图像数据?
我目前使用的是这样的东西,但是我认为没有画布可以做到,或者我错了吗?
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var byteArray = [
255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red
0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green
0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue
];
var imageData = ctx.getImageData(0, 0, 10, 3);
for(var i = 0; i < byteArray.length; i+=4){
imageData.data[i] = byteArray[i];
imageData.data[i+1] = byteArray[i + 1]; …Run Code Online (Sandbox Code Playgroud) 我尝试根据给定的十六进制值获得最匹配的颜色名称.例如,如果我们有六角颜色,#f00我们就得到颜色名称red.
'#ff0000' => 'red'
'#000000' => 'black'
'#ffff00' => 'yellow'
Run Code Online (Sandbox Code Playgroud)
我目前使用levenshtein距离算法来获得最接近的颜色名称,到目前为止效果很好,但有时并不像预期的那样.
例如:
'#0769ad' => 'chocolate'
'#00aaee' => 'mediumspringgreen'
Run Code Online (Sandbox Code Playgroud)
那么任何想法如何让结果更接近?
这是我为获得最接近的颜色而做的:
Array.closest = (function () {
// http://en.wikibooks.org/wiki/Algorithm_Implementation/Strings/Levenshtein_distance#JavaScript
function levDist(s, t) {
if (!s.length) return t.length;
if (!t.length) return s.length;
return Math.min(
levDist(s.substring(1), t) + 1,
levDist(t.substring(1), s) + 1,
levDist(s.substring(1), t.substring(1)) + (s[0] !== t[0] ? 1 : 0)
);
}
return function (arr, str) {
// http://stackoverflow.com/q/11919065/1250044#comment16113902_11919065
return arr.sort(function (a, b) {
return levDist(a, str) …Run Code Online (Sandbox Code Playgroud) 如何通过当前的插入位置在textarrea中找到一个单词?
我尝试了类似这样的东西,但这只返回第一个字母到达插入位置的字符.例如:
如果光标位于fo和o之间,则返回fo而不是foo被检查.
Fo |o bar不等于bar foo.=> Fo期待Foo
Foo bar不等于|bar foo.=> equ期待 equal.
这是我到目前为止所做的:
function getCaretPosition(ctrl) {
var start, end;
if (ctrl.setSelectionRange) {
start = ctrl.selectionStart;
end = ctrl.selectionEnd;
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
start = 0 - range.duplicate().moveStart('character', -100000);
end = start + range.text.length;
}
return {
start: start,
end: end
}
}
$("textarea").keyup(function () {
var caret …Run Code Online (Sandbox Code Playgroud)
我在GitHub上做了一个回购:
https://github.com/yckart/Veil.js
非常感谢Sargo Darya和Edward J Payton.
我要创建一个标题,如果向下滚动则向上滑动,反之亦然.问题是,它跳跃(如果你在 - 范围diff之间0-128).
我无法弄清问题所在.知道如何让它正常工作吗?
这是我到目前为止所做的:http://jsfiddle.net/yckart/rKW3f/
// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset, lastOffset, oldDir) {
return function (offset) {
var dir = offset < oldOffset;
if (dir !== oldDir) lastOffset = offset;
oldOffset = offset;
oldDir = dir;
return {dir: dir, last: lastOffset};
};
}());
var header …Run Code Online (Sandbox Code Playgroud) do jQuery.fn.empty()和remove()函数是否异步执行?我在jQuery文档中找不到这个问题的答案.
我有一个像这样的字符串foo bar(5) baz(0, 3),需要根据每个部分之间的空格将其分成几个部分。所以结果需要如下所示:['foo', 'bar(5)', 'baz(0, 3)']。
我尝试过这样的事情:
var str = 'foo bar(5) baz(0, 3)';
str.split(' '); // => ['foo', 'bar(5)', 'baz(0,', '3)']
Run Code Online (Sandbox Code Playgroud)
正如你所看到的结果不是我所期望的......有什么想法如何正确地分割它吗?我认为现在轮到RegExp这里的专家了......
更新
,一种简单的方法是将所有内容替换为,:
str.replace(/, /g, ',').split(' ');
Run Code Online (Sandbox Code Playgroud)
但对我来说这看起来不太漂亮......
jquery ×5
javascript ×4
css ×2
string ×2
ajax ×1
animation ×1
asynchronous ×1
base64 ×1
bytearray ×1
canvas ×1
colors ×1
cpu-word ×1
css-content ×1
duration ×1
getcaretpos ×1
getimagedata ×1
header ×1
html ×1
iframe ×1
performance ×1
regex ×1
scroll ×1
slide ×1
split ×1
state ×1
styling ×1
textarea ×1
whitespace ×1