小编Bru*_*ord的帖子

我已经把一个简单的javascript/css图像滑块放在一起,开始只是一个学习练习,但现在我想在现实世界中应用它.问题是我的桌面上的动画很不稳定(这是一款高规格的游戏装备) - 在移动设备上更糟糕(在某种程度上它不再是动画)

你可以在这里看到它:

www.chrishowie.co.uk/sands/

jsfiddle隔离了大部分相关的代码 - 它不是"这不起作用"的问题,所以希望这个小提琴足以帮助优化它.

http://jsfiddle.net/9aozrxy8/5/

总结:我有一个DIV,连续4个图像,每个图像是页面宽度的100%.我使用javascript来翻译X(我已经尝试过translate3d,因为听说这会使用GPU,但没有做太多的差异)而且我设置CSS过渡以简化变换.

我也认为可能我只是想在这个网站上做太多 - 但是后来我看了一些其他网站做得更多,而且它像丝绸一样光滑.所以我想我错过了一些东西.

function slideRight() {

if (sliding) {
    return false
};
window.sliding = true;

el = document.getElementById("slider");
cst = getComputedStyle(el);
transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
widthst = cst.width;
widthst = widthst.replace("px", ""); // computed width of slider (7680px)
slidewidth = widthst / 4;

transformst = transformst.replace("matrix(", "");
transformst = transformst.replace(")", "");

transformst = transformst.split(",");
transformst = transformst[4]; // returns current transform in px without unit (px)
if …

我正在使用 Angular 和 Webpack 编写一个电子应用程序，但我遇到了一个问题，即我对图像的唯一引用在构建中以某种方式倾斜。我怀疑这是一个 webpack 配置错误，以某种方式与电子运行应用程序的操作有关 - 根据输出到 dist 时 .js 和 .png 文件所在的位置，实际结果 URL 指向正确的目录。

图像在 login.component.html 中引用

src 目录如下所示：

src
??? app/
?   ??? login/
?        ??? login.component.html
?        ??? login.component.ts
?        ??? login.component.css
??? assets/
    ??? images/
        ??? someimage.png

dist 目录：

 dist 
   ??? assets/
   ?    ??? images/
   ?        ??? someimage.png
   ??? index.html
   ??? index.js
   ??? app.css
   ??? app.js

这是我的常用配置

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
const …