使用可滚动的div
.scrollable-div{
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
Android设备上的DEMO刷卡滚动平滑甚至加速和减速.
在iPhone上使用相同的代码,滚动很僵硬.当用户释放触摸时,滚动立即停止.
如何使iPhone像滚动浏览器一样对待具有平滑加速/减速原生样式滚动的Android浏览器？
考虑p由数据属性索引的此标记数组.
<p class='my-class' data-id='0' data-id-index='1'></p>
<p class='my-class' data-id='0' data-id-index='2'></p>
<p class='my-class' data-id='1' data-id-index='1'></p>
<p class='my-class' data-id='1' data-id-index='2'></p>
要选择一个pby data-id和附加文本,我可以使用:
$('.my-class[data-id="' + dataId + '"]').append(myText);
以上将附加myText到p具有相同的所有标签data-id.但是,如果我想要的东西,以双方选择data-id和data-id-index？
我想在任何时候水平和垂直居中.
我可以减少/增加窗口的宽度,div将通过始终保持在窗口的中心来响应
.cent
{
height:50px;
width:50px;
background-color:black;
margin:auto;
}
这是我目前所拥有的JSFiddle示例.但我想保持div垂直居中,所以如果我减少/增加窗口的高度,div将通过停留在窗口中间来响应.
关于这个例子,我想让黑盒子在窗口调整大小时垂直居中,就像它总是水平放置在中心一样.
关于JavaScript,在清理数组时,我发现了两种方法:
myArray.length = 0;
VS
myArray = new Array()
我会在逻辑上myArray.length = 0;保持引用,同时myArray = newArray()创建一个新的引用,使之前的引用无效.
但是,我在过去发现使用我自己的逻辑猜测JavaScript的工作原理经常是不成功的:)
这两种方法之间有什么区别(如果有的话)？
如何检查没有滚动条的鼠标滚轮运动？
$(document).mousewheel(function() {
clicker.html("a7a");
});
我想开始使用即将推出的ECMAScript 6(ES6)编写代码,以便开始掌握新语法.
是否有某种网络资源或浏览器插件,我可以用来播放(编写和测试代码)我们目前有关ES6的内容？
我一直认为使用Google Chrome Canary可能会有所帮助.所以我下载了Canary,我启用了Canary的一些功能:
启用实验性JavaScript(Mac,Windows,Linux,Chrome OS,Android)
启用网页以使用实验性JavaScript功能.
#enable-javascript-harmony 启用
并在letfor循环中测试块范围之后
for (let i = 0; i < 10; i++) {
console.log(i);
}
我遇到了语法错误:
SyntaxError:意外的标识符
使用时.keydown我可以捕获keydown事件,然后检查并阻止默认操作(显示字符).
使用时.keyup我不能用？
我知道alert()当代码在条件内时,事件被捕获为火灾,preventDefault()但不会阻止该操作.
这是一个完整的DEMO
我用CSS3看过一些很酷的图像遮罩和其他效果.只使用CSS3我们可以在下面的代码中看到这种效果,或者看到工作小提琴.
HTML
<canvas id="canvas1" width="400" height="400"></canvas>
使用Javascript
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
can.addEventListener('mousemove', function(e) {
var mouse = getMouse(e, can);
redraw(mouse);
}, false);
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true)
ctx.clip();
ctx.drawImage(img2, 0, 0);
}
var img = new Image();
img.onload = function() {
redraw({x: -450, y: -500})
}
img.src = 'http://placekitten.com/400/400';
var img2 = new Image();
img2.onload = function() {
redraw({x: -450, y: -500}) …我遇到了一个问题,右浮动元素与左浮动元素和居中元素保持相同的水平对齐.右浮动元素向右浮动,但坐在水平线下方,其他元素处于开启状态.
当浮动元素(例如一个左,一个居中和一个右)在同一个div中时,右元素需要在左元素之前堆叠.
例:
<div id=container>
<div id="float-right"></div>
<div id="margin-auto"></div>
<div id="float-left"></div>
</div>
如果我只有两个元素,一个左边和一个右边,它们水平放置如下.
参见示例:jsfiddle
当我添加一个中心元素时,右元素向下移动.
参见示例:jsfiddle
这里发生了什么？
下面是jQuery页面结构,它位于一个页面上.jQuery mobile将每个data-role ='page'视为用户可以浏览的不同页面.
我的项目现在变得非常大,我在同一个.php文件上有10个data-role ='page'页面,我想将它们分成10页但仍保留jQuery Mobile提供的功能.我怎样才能做到这一点？
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div><!-- /page -->
</body>
jquery ×4
css ×3
css3 ×3
html5 ×3
javascript ×3
html ×2
css-float ×1
ecmascript-6 ×1
ios ×1
mobile ×1
mousewheel ×1
scroll ×1
scrollbar ×1