我正在尝试将一个页面放在一起,上面会有一个水平滚动窗格 - 这是我希望获得的布局示例:
内容是动态添加的,具有不同的维度..
这是一些HTML:
<div class="container">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
基本CSS:
.container {
width: 100%;
height: 100%;
}
.container .inner {
position: relative
}
.container .inner > div {
float: left;
}
Run Code Online (Sandbox Code Playgroud)
目前,我可以使其工作的唯一方法是设置显式宽度.inner.否则,我最接近的就是这个答案,但它离我想要的效果还很远.有可能单独使用HTML/CSS实现我正在寻找的东西,还是我必须求助于javascript?
首先,让我说我在数学上绝对是残暴的,请耐心等待.
我正在尝试计算圆上两点之间的角度,这两点是用户在一定时间内拖动的距离.
这是我到目前为止:
intervalId = setInterval(function(){
if(p1x != undefined){
p2x = Xpos;
}
if(p1y != undefined){
p2y = Ypos;
}
if( p1x != p2x || p1y != p2y ){
p1a = p1x - wheelMiddleVer;
p1b = p1y - wheelMiddleHor;
a = Math.sqrt((p1a * p1a) + (p1b * p1b));
p2a = p2x - wheelMiddleVer;
p2b = p2y - wheelMiddleHor;
b = Math.sqrt((p2a * p2a) + (p2b * p2b));
u = p1x - p2x;
v = p1y - p2y;
c = Math.sqrt((u …Run Code Online (Sandbox Code Playgroud) 我用HTML5画布构建John Conways的生活游戏.它有一个gameOfLife对象,它包含一个包含所有单元格及其状态(死/活)的数组.以下是构建单元格的代码:
function cell(x,y){
this.x = x;
this.y = y;
this.isAlive = false;
}
Run Code Online (Sandbox Code Playgroud)
我正在探索检查细胞状态周围细胞的方法.据我所知,一种方法是遍历数组并找到一个坐标匹配的单元格,该单元格位于当前已检查的单元格周围.
我在考虑采用不同的方式.通过在被评估的单元格的索引上添加和减去Y(和X)轴上的单元格数(具有+1和-1的小变化),您应该能够得出任何顶部的索引左,左,左下,右上,右,右下单元格.
我无法测试这个想法,因为它不能让我得到所需的索引:
所以,在我的更新循环中:
//I know that there is a cell at the index of exampleIndex + cellsY
exampleIndex = 200;
game.getLivingNeighbours(exampleIndex);
function getLivingNeighbours(i){
console.log(i) //Logs an integer
console.log(grid.cellsY) //Logs an integer
console.log(game.cells[i + grid.cellsY]); //Undefined?!
}
Run Code Online (Sandbox Code Playgroud) 我正在尝试让 HTML5 视频正常工作。我正在使用本地服务器。
<video id="headervideo" controls>
<source src="<?php echo base_url(); ?>assets/home.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Run Code Online (Sandbox Code Playgroud)
但是,该文件拒绝播放。当我使用绝对路径访问它时,它只会显示播放按钮为灰色的播放器。这里可能是什么问题?
我正在使用HTML5的canvas API在Javascript中制作游戏,并且遇到了障碍.
其中一个游戏效果是导弹沿着y轴向上行进,受到阵风(由涡轮机发出)的影响,沿着x轴移动.制作这些涡轮机之一我没有任何问题,但当它们的数量增加到3时,我遇到了麻烦.在一个新的级别,我将这些涡轮机实例化为对象,然后将其推入一个数组,如下所示:
function gameStateNewLevel(){
for (var i = 0; i < 2; i++){
turbine = {};
turbine.width = 10;
turbine.height = Math.floor(Math.random()*200); //turbine height
turbine.y = Math.floor(Math.random()*600) //turbine y-axis
if (Math.random()*10 > 5){ //indicates turbine side of canvas
turbine.side = leftSide;
}else{
turbine.side = rightSide;
}
if(turbine.height <= 100){ //Increases turb. size if it's too small
turbine.height += Math.floor(Math.random()*100);
}
turbines.push(turbine);
}
context.fillStyle = "#FFFFFF"
switchGameState(GAME_STATE_PLAYER_START);
}
Run Code Online (Sandbox Code Playgroud)
现在,在渲染之前,它们也会通过updateTurbine函数进行更新.所有这些功能应该确保涡轮机不相互重叠,并根据需要在y轴上向上或向下移动(通过循环数组并比较其中的每个对象).我已经开始制作这个功能,但是我在所有循环之间完全迷失了.这就是我所拥有的,我感觉我走错了路:
function updateTurbines(){
tempTurbine = {}
turbinePositionTop = tempTurbine.y;
turbinePositionBottom = tempTurbine.y …Run Code Online (Sandbox Code Playgroud) 我正在向数据库中插入一些东西,并使用jQuery在其他地方更新它(给我一个休息时间,我是新来的),之后我需要能够单击它并显示一些UI东西,这意味着获取ID。因此,我设置了ID变量,然后尝试再在click事件中尝试使用它:
...
"click .message-entry" : function (e) {
var id = this._id || new Meteor.Collection.ObjectID(newMessageId);
Session.set('singleMessageId', id);
},
...
Run Code Online (Sandbox Code Playgroud)
原则上应该可以工作,但是返回以下错误:
Uncaught Error: Invalid hexadecimal string for creating an ObjectID
断点显示该ID既是字符串,又是新插入文档的ID。这里可能出什么问题了?
我在网站上定位Google +1按钮时遇到了一些麻烦.div如下:
<div class="g-plusone"></div>
Run Code Online (Sandbox Code Playgroud)
我正在使用的CSS非常简单:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Run Code Online (Sandbox Code Playgroud)
尽管看起来很简单,但它很简单并不想动.
我知道有问题的div正在被访问.奇怪的是,其他社交分享按钮,如下面的FB遵循相同的语法,并且定位完美.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Run Code Online (Sandbox Code Playgroud)
遗憾的是,添加!值对值没有任何作用.
有任何想法吗?
简单代码:
$(document).ready(function(){
console.log($('.slide-background').width());
});
Run Code Online (Sandbox Code Playgroud)
和简单的HTML:
<div class="testdiv">
<img class="slide-background" src="img/slide.png"/>
</div>
Run Code Online (Sandbox Code Playgroud)
以及简单的CSS:
body {
margin: 0; padding: 0;
height: 100%; width: 100%;
}
html {
margin: 0; padding: 0;
height: 100%; width: 100%;
}
.testdiv {
overflow: hidden;
width: 100%;
height: 100%;
background-color: black;
}
Run Code Online (Sandbox Code Playgroud)
为什么它会随时输出宽度?有时宽度实际上会被记录,但大多数时候返回0.
抱歉问了这个非常愚蠢的问题。我正在从头开始慢慢学习数学。
我想通过javascript计算三角形的角度。
我计算边长,
Ab = Math.abs(b.x - c.x);
Ac = Math.abs(b.y - c.y);
A = Math.sqrt((Ab*Ab) + (Ac*Ac));
Bb = Math.abs(a.x - c.x);
Bc = Math.abs(a.y - c.y);
B = Math.sqrt((Bb*Bb) + (Bc*Bc));
Cb = Math.abs(a.x - b.x);
Cc = Math.abs(a.y - b.y);
C = Math.sqrt((Cb*Cb) + (Cc*Cc));
Run Code Online (Sandbox Code Playgroud)
然后我谈到这一点:
angleB = Math.cos(((C*C) + (A*A) - (B*B))/(2*C*A));
Run Code Online (Sandbox Code Playgroud)
然而,我得到了一个完全错误的号码。为什么会这样呢?
Math.atan2()是一个非常有用的计算角度的函数.但是,我无法绕过一件事:
$(document).mousemove(function(event){
r = Math.atan2(event.pageY, event.pageX);
deg = r * 180/Math.PI;
console.log(deg);
})
Run Code Online (Sandbox Code Playgroud)
console.log表示计算角度的0,0位于屏幕的左上角.如何从不同的原点计算角度,比如说屏幕的中心?