                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3实现七夕言情

为什么x坐标这样表示：-' + (width * 2) + 'px

为什么x坐标这样表示：-' + (width * 2) + 'px

Hyram_wu

2016-11-18

源自：H5+JS+CSS3实现七夕言情 2-2

关注问题我要回答

1845

操作

收起

2 回答

qq_画一群人的感伤_0 回答被采纳 +3 积分
2016-11-18

学到这里有两个场景，这个是在实现两个场景之间的切换。用的方法是移动父元素的x坐标。使用js获取的width是页面可视区域的width，因为之前我们写了hidden，所以可视页面的width其实是等于一个场景的width。而我们要实现从第一个页面滚动到第三个页面，我们的x坐标应该是2倍的width。所以这里用了 (width*2) 。

PS：说的有点啰嗦，希望你能理解我的意思

1 回复有任何疑惑可以回复我~

#1

Hyram_wu 提问者

非常感谢！

2016-11-18 回复有任何疑惑可以回复我~

#2

两边的两个加号什么意思，去掉不行吗，如果是拼接字符串的话看不懂怎么拼接的啊。。。

2017-03-27 回复有任何疑惑可以回复我~

#3

您好，请问为什么是负值呢？我认为应该是父元素向右移动，但是当我改成正值后，页面反而像左方向滚动了

2018-09-25 回复有任何疑惑可以回复我~

三层楼
2017-08-27

在x轴上移动 translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强 (-'+(width*2)+'px,0px,0px)表示x轴向左移动width*2，y轴、z轴不移动。

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

H5+JS+CSS3实现七夕言情

参与学习 211524 人
解答问题 540 个

为七夕节准备的H5+JS+CSS3特效案例，由浅入深案例拆分讲解

本课相似问答

3 回答width : (slides.length * width) + 'px',

1 回答这句'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动

4 回答width : (slides.length * width) + 'px', 这句是怎么理解的？

1 回答width: (slides.length * width) + 'px',这句如何计算的呢？

1 回答boy 的top坐标为什么是这样算的，这是按几维计算的

搜索更多本课相关问答

为什么x坐标这样表示：-' + (width * 2) + 'px

我要回答关注问题

意见反馈帮助中心 APP下载