我一直在研究一个使用CSS3过渡的幻灯片脚本,或者当它们不可用时使用jQuery的动画.我已经创建了一个自定义函数来执行幻灯片动画,这样做是恰当的.一切似乎都运转良好,但我在测试过程中遇到了一个重大障碍.
出于这样或那样的原因,在大型幻灯片上转换之前和之后应用jQuery CSS会有很大的延迟.例如,下面链接中的幻灯片显示大约9900像素宽(容器宽度,其中大部分是隐藏的).使用CSS3过渡和变换属性操纵容器以显示适当的幻灯片.延迟发生在下面的粘贴中的第75-82行之间应用CSS.特别是,应用"转换"CSS会导致问题.将"过渡"CSS添加到样式表(而不是将其应用于JS),并且延迟消失.然而,这并不是一个真正的解决方案,因为我们只想在特定属性上使用CSS3过渡,这可能会有所不同(在样式表中使用'all'会转换一些我们不想动画的CSS,但会定期更改).
动画功能:http: //pastebin.com/9wumQvrP
幻灯片演示:http://www.matthewruddy.com/demo/? p = 2431
真正的问题在于iOS,其中幻灯片(有时甚至是浏览器)变得完全无法使用.我无法查明任何错误,并且确实已经耗尽了调试JS的知识.在玩了一下之后,我确定它与该功能的这一部分有关,并且在插件中禁用CSS3支持完全消除了这个问题.
我完全陷入困境,非常感谢任何人都可以给予的任何帮助.
---编辑---
我尝试使用原生Javascript而不是jQuery的.css函数来应用CSS.结果相同,没有更好的表现.另外值得注意的是,这在Firefox中根本不会发生,而且似乎只是Webkit浏览器的一个问题.
任何有解决方案的人都乐意为几瓶啤酒捐款!我真的想不出这个!
---第二次编辑---
好的,所以一直在调试,我可以看到减速是由浏览器重绘周期引起的,这需要很长时间.是否有更好的方法来处理它已经做的方式?绝对定位元素是减少重绘的一种已知方法,但由于幻灯片显示是响应的,因此这种方法并不真正有效.绝对定位幻灯片图像或幻灯片本身会导致它崩溃.
---第三次编辑---
一天后,我取得了一些进展.通过原始帖子中提到的自定义动画功能添加"内联CSS过渡"属性,从而为元素样式表CSS添加"过渡:所有0轻松".这会导致显着的性能提升,尤其是在转换本身完成时删除内联CSS转换属性时.
好东西!但是,现在在转换后删除内联CSS转换(用于创建硬件加速转换效果本身)并且正在应用左定位时,仍然存在减速.当两者一起发生时,就会出现放缓.
将它们分解为两个单独的任务(删除转换,然后在没有指定时间的情况下在setTimeout中添加左侧位置),再次摆脱重绘=性能增益,看起来好像问题已解决.但有时候,CSS过渡属性不会被足够快地否定,并且翻译删除会变得生动.没有好处,也不知道下一步在哪附近工作.
嘿.我的下拉菜单和iframe有一个相当令人费解的问题.
我在下拉菜单中应用了z-index为1000,但是包含youtube视频的iframe仍显示在菜单上方.请在下方查看(查看"短代码"菜单):
http://www.matthewruddy.com/demo/?page_id=765
我无法弄清楚为什么会这样.谁能帮我吗?这是CSS,如果它有帮助:
#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}
#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}
#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}
#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}
#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000; …Run Code Online (Sandbox Code Playgroud) 我是javascript的新手.
我正在尝试使用document.write(使用Wordpress)创建一个标记,以添加一个在预加载之前隐藏图像的样式.我不得不求助于编写Javascript样式来隐藏图像,然后再通过CSS加载它们.我不想将其实际写入CSS文件,因为用户已禁用Javascript,然后图像将永远不显示.
我正在尝试使用此代码:
jQuery(function($) {
document.write('<style type="text/css"> .preload img { display: none; } </style>');
$('#body-wrap').preloadThis();
});
Run Code Online (Sandbox Code Playgroud)
但是,它只是覆盖整个页面并使其变为空白.我怎么能阻止这个?我想在不删除页面的情况下添加标签.尝试使用'返回',没有运气.
对不起,我是新手.提前致谢.
尝试使用JS .replace来替换带字符串的整数.
例如,字符串可以是:
var string = 'image[testing][hello][0][welcome]';
Run Code Online (Sandbox Code Playgroud)
我想用另一个值替换'0'.我最初使用这个:
string.replace( /\[\d\]/g, '[newvalue]');
Run Code Online (Sandbox Code Playgroud)
但是当我们开始更换两位数或更多(12,200,3204,你明白我的意思)时,它就会停止正常工作.不知道如何让它按照我想要的方式运行.
提前致谢.非常感激.
只是想知道是否有办法(或者甚至可能).
所以我有一段与此类似的代码.我有一个字符串,其值包含方括号,类似于访问数组键时使用的字符串.我想通过使用字符串值来创建该数组键.我希望这段代码能够更清楚地表达我的意思.
// String that has a value similar to an array key
$string = 'welcome["hello"]';
$$string = 'thisworks';
// I could then print the array keys value like this
print( $welcome["hello"] );
// This would hopefully output 'thisworks'.
Run Code Online (Sandbox Code Playgroud)
但是,似乎无法让它正常工作.是否有可能(或者我还能怎么做)?
试图找出一个相当恼人的IE7 CSS问题.由于下面页面上的一些奇怪的原因,它的填充看起来比正常情况要大得多.我申请的任何属性似乎都没有解决问题,我无法弄清楚它为什么会发生.您可以在按钮(主要罪魁祸首)上看到问题:
示例:http://www.matthewruddy.com/demo/?page_id = 1088
这是应用的CSS:
.button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
}
.button span {
margin: 0;
padding: 8px 12px;
display: inline-block;
white-space: nowrap;
}
你可以在这里看到整个CSS:http://pastebin.com/Grsxh97H
以及网页的来源:http://pastebin.com/rW33Nh0D
感谢任何能够解决这个问题的人,马修.
这里有一个相当直截了当的问题.正在查看一些代码,我已经看到了一个似乎将给定变量转换为布尔值的函数.它是这样的:
function to_bool( $var ) {
return !!$var;
}
Run Code Online (Sandbox Code Playgroud)
很简单,但它是如何工作的?从来没有见过这个,谷歌搜索并没有真正让我到任何地方.额外的'!' 翻转结果?'!$ var'可用于检查var是否为false,'!!'也是如此 将'false'变为true,反之亦然?
有一个关于innerHTML和输入值的简短问题.请参阅下面的简要示例(为方便起见,使用jQuery):
jQuery的:
jQuery(document).ready(function($) {
$('.send').click(function() {
alert( $('.content').html() );
return false;
});
});?
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="content">
<input type="text" name="input" value="Old Value" />
<input type="button" class="send" value="Send" />
</div>?
Run Code Online (Sandbox Code Playgroud)
如果您编辑输入值,然后单击"发送"按钮,警报显示innerHTML gotten包含带有"旧值"的输入,而不是用户输入的值.为什么是这样?我们如何将HTML作为用户输入的输入值的字符串?
所以在我开始之前,我是一个OAuth2新手,所以仍然试图真正地围绕各种许可范围和补助.
我已成功使用Laravel OAuth2 Server软件包成功实施OAuth2服务器.
我正在处理的当前网站将使用client_credentials授权类型从API中简单地获取食物.我已经设法成功地工作,并可以使用提供的访问令牌进行API调用.
但是,我想知道如何实现类似于Instagram,Soundcloud等的架构,它们不需要access_token基本端点,只需要一个client_id.他们如何做到这一点?这是自定义授权类型吗?
优选地,我只想在访问私有资源时开始要求访问令牌,例如用于修改用户信息的那些,等等.据我所知,对于这些我需要使用password授权类型,这不是不是问题.
我正在尝试使用jQuery将高度传递给colorbox.这样做,我认为定义高度的唯一方法是通过链接'class'.所以我想弄清楚如何从字符串中获取数字; 例如;
class ="height_900"; 我希望它得到数字'900'.
这有可能与jQuery?
更多信息:好的..所以这就是我想要实现的目标.
我正在为彩盒创建一个Wordpress短代码(灯箱的变化).Colorbox通过jQuery设置其高度和宽度.
Wordpress短代码包含属性"高度"和"宽度",允许用户根据需要手动设置.问题是,我无法找到将这些PHP变量传递给colorbox jQuery的方法.
我能想到的最好的解决方案是有一个类如下:height_ $ height; 例如height_450.然后我想通过jQuery获取数字,然后将其用作特定颜色盒的高度.宽度相同.
我可以想象这已被问过几次,但我确实无法找到解决我想弄清楚的具体问题的例子.
所以我有一个对象,如下:
var collection = [{ id: 0 }, { id: 1 }, { id: 2 }];
Run Code Online (Sandbox Code Playgroud)
然后我有一个数组,这是'顺序',就像这样:
var order = [2, 0, 1];
Run Code Online (Sandbox Code Playgroud)
我想使用'order'数组按特定顺序重新排序集合.我一直在用.sort函数尝试很多解决方案,但我找不到合适的解决方案.任何人都可以开导我吗?可能很简单,我希望.