любой способ получить div/изображение для отдыха на подпикселе?

Оба стиля style.top и translateY() кажутся округлыми до полных значений пикселей. Есть ли способ получить изображение для подпикселя?любой способ получить div/изображение для отдыха на подпикселе?

В качестве примера, здесь я перемещаю div с изображением в нем на 0,1 пикселя каждые 100 мс, и, как вы можете видеть, он просто перескакивает полный пиксель каждую секунду. https://jsfiddle.net/je391bfr/

var i= setInterval(function() {this.myTimer(); },100); 
var y=0; 
var div=document.getElementById('mytest'); 
function myTimer(){ 

    this.y+=.1; 
    console.log(this.y); 
    //var tr="translateY("+this.y+"px)"; 
    var tr="translate(0,"+this.y+"px)"; 
    this.div.style.webkitTransform=tr; 
    this.div.style.mozTransform=tr; 
    this.div.style.msTransform=tr; 
    this.div.style.oTransform=tr; 
    this.div.style.transform=tr; 
}

Примечание: Я хочу что-то, что может остановить на субпиксель, если я хочу, а не просто на субпиксель во время анимации.

источник

2015-07-31 user3134006

Я не считаю, что это возможно с HTML/CSS, но вы могли бы, вероятно, достичь этого путем встраивания изображения в 'canvas' или' svg' элемента. – nrabinowitz

Это можно сделать, используя свойство преобразования CSS3, где вы можете преобразовать изображение, используя метод translate, где вы предоставляете ему субпиксел, который вам нужен для координаты оси y (аналогично вашему примеру).

Перевод не всегда гладкий без использования небольшого поворота, что помогает лучше использовать механизм рендеринга rotate(.0001deg) и облегчит подпиксельную визуализацию.

Ниже приведен фрагмент кода ....

Чтобы остановить анимацию, просто использовать clearInerval(i), он остановится на любом субпиксель он достигает.

var imgPos = 0.0; 
 
var offset = .2; 
 

 
function myTimer(){ 
 
    imgPos += offset 
 
    $("#img").css('transform', 'translate(0,' + imgPos + 'px) rotate(.0001deg)'); 
 
} 
 

 
var i= setInterval(function() {myTimer(); },100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body style="background-color:#ffffff; padding:0px; margin:0px;"> 
 

 

 
<div id="mytest" style="overflow: visible; display: inline-block; position: absolute; width: 152px; height: 56px; left: 0px; top: 0px; padding: 0px; margin: 0px; cursor: pointer; opacity: 1; "><img id="img" style="width: 100%; height: 100%; display: inline-block; position: absolute;" src="https://d138hkes00e90m.cloudfront.net/banner_images/Lazarus18_Large_Banner.jpg"></div> 
 

 
</body>

источник

2015-07-31 18:31:30 KAD

Спасибо, но это, похоже, работает только в Chrome, а не в firefox/ie:/ – user3134006

Попробуйте использовать префикс поставщика firefox '-moz-' и префикс поставщика IE '-ms-' с преобразованием. – KAD

Или вы можете использовать jQuery 1.8.0+, он автоматически добавляет префиксы поставщика. – KAD

любой способ получить div/изображение для отдыха на подпикселе?

ответ

Смежные вопросы