Question

我正在努力寻找解决方案，并想知道是否有人可以提供帮助。

我想制作一个页面，其中图像会随着时间的推移而消失，从而显示另一个图像。我希望通过使用updatesecond / getseconds函数来实现这一点。所以基本上它会充当一个时钟，越多的分钟/秒越过它消失，并让它循环。例如，在一天的开始它将是一个完整的图像，在12它将是一半，在24小时它将消失，并重复。我认为这将是一个if else函数关于页面的百分比，我只是无法弄清楚如何说出它。

这有可能吗？任何帮助将不胜感激。谢谢！

这是我到目前为止使用的代码。提前谢谢。

body
{
    background-color: #FFF;
    padding: 2%;
    color: #ccc;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

a
{
    color: #FFF;
    text-decoration: none;
}

a:hover
{
    color: #DCE808;
    text-decoration: underline;
}

#mosaic
{
/*      background-color: yellow; 
    font-size: 500px;
    color: black;
    height: 1310px;
    width: 2000px;   */
background-image: url('tomorrow4.png');
}

#mosaic span.hover
{
    /*  background-color: blue;
    font-size: 500px;
    color: white;
    height: 1310px;
    width: 2000px;
    left: 100px;*/
    float: left;
   background-image: url('today4.png');  
}

和javascript

$(document).ready(function() {

var width = 1400;
var height = 724;

count = 0;
elements = new Array();

var el = $('#mosaic');

el.width(width).height(height);

var horizontal_pieces = 100;
var vertical_pieces = 100;
total_pieces = horizontal_pieces * vertical_pieces;

var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;

var vertical_position = 0;

for (i=0; i<total_pieces; i++)
{
var tempEl = $('<span class="hover" id="hover-' + i + '">
</span>');

var horizontal_position = (i % horizontal_pieces) * box_width;

if(i > 0 && i % horizontal_pieces == 0)
{
    vertical_position += box_height;
}

tempEl.css('background-position', '-' + horizontal_position + 'px  
-' + vertical_position + 'px');

el.append(tempEl);
elements.push(tempEl);
}

elements = shuffleArray(elements);

$('#mosaic .hover').width(box_width).height(box_height);

setInterval(toggleDisplay, 100);
});

function toggleDisplay()
 {
 var tempEl = elements[count];
 var opacity = tempEl.css('opacity');

if(opacity == 0)
{
tempEl.animate({ opacity: 1 })
}
else
{
tempEl.animate({ opacity: 0 })
}

 count = (count + 1) % total_pieces;
 }



/* shuffleArray source:    
http://stackoverflow.com/questions/2450954/how-to-randomize-a-  
javascript-array#12646864 */
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor() * (i + 1);
var temp = array[i];
array[i] = array[j];
array[j] = temp;
 }
 return array;
 }

Answer 1

你是说这样的意思吗？ http://jsfiddle.net/1r5qer56/

我使用了4个扇区（因为skewY倾向于拧紧超过90度）并将它们设置为相对于午夜以来经过的分钟数的大小。

如果您想测试它，只需在time。

中输入一个自定义数字

我的代码如下：

HTML

<ul class='pie'>
    <li class='slice tr'><div class='slice-contents'></div></li>
    <li class='slice br'><div class='slice-contents'></div></li>
    <li class='slice bl'><div class='slice-contents'></div></li>
    <li class='slice tl'><div class='slice-contents'></div></li>
<ul>

CSS

.pie {
    position: relative;
    margin: 1em auto;
    border: dashed 1px;
    padding: 0;
    width: 32em; height: 32em;
    border-radius: 50%;
    list-style: none;
    background-image: url('http://lorempixel.com/output/animals-q-c-512-512-4.jpg');
}
.slice {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%; 
}
.slice.tr {
    transform: rotate(0deg) skewY(-0deg);
}
.slice.br {
    transform: rotate(90deg) skewY(0deg);
}
.slice.bl {
    transform: rotate(180deg) skewY(0deg);
}
.slice.tl {
    transform: rotate(270deg) skewY(0deg);
}
.slice-contents {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    border-radius: 50%;
        background: lightblue;
}
.slice.tr .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.br .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.bl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}
.slice.tl .slice-contents {
    transform: skewY(0deg); /* unskew slice contents */
}

JS + jQuery的

updateClock();

setInterval(function(){updateClock();}, 60000);//check for updates once per minute

function updateClock(){
    var dt = new Date();
    var time = (dt.getHours() * 60) + dt.getMinutes();//number of minutes since 00.00
    var timeToDegrees = time / 4;//1440 minutes in 24hours, 360 degrees in a circle. 1440 / 4 = 360

    if(timeToDegrees < 90){//deal with top right sector
        $('.slice.tr').css('transform', 'rotate('+timeToDegrees+'deg) skewY(-'+timeToDegrees+'deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY('+timeToDegrees+'deg)');
    }
    else if(timeToDegrees < 180){//deal with bottom right sector
        var localDeg = timeToDegrees - 90;
        $('.slice.tr').eq(0).css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate('+(90+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees < 270){//deal with bottom left sector
        var localDeg = timeToDegrees - 180;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(180deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate('+(180+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees <= 360){//deal with top left sector
        var localDeg = timeToDegrees - 270;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate(270deg) skewY(-90deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.tl').css('transform', 'rotate('+(270+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.tl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
}

Answer 2

从我收集的内容看一下代码，你正在寻找一张用另一张图片覆盖的图片，与一天的长度成正比，以秒为单位。就像一张图片滑过另一张图片？喜欢这张图片：

看看我在这里创建的jsBin http://jsbin.com/xevinakihe/edit?html,css,js,output

代码的核心是时间和身高调整：

  function setCoverHeight() {
    var d = new Date();
    var curSecs = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
    var coverHeight = curSecs * 100 / (24 * 3600);

    $('.cover').height(coverHeight + '%');

    if (curSecs < 24 * 3600) {
      setTimeout(setCoverHeight, 1000);
      console.log(coverHeight);
    } else {

      // reset the cover height to 0%
      $('.cover').height(0);

      // swap the cover image to the bottom
      $('.bottom').css('backround-image', $('.cover').css('background-image'));

      // set a new cover image
      // ... get from Ajax, array, etc

    }

  }

  setCoverHeight();

那就是调整HTML：

<div class="wrapper">
  <div class="cover"></div>
  <div class="bottom"></div>
</div>

最终这一天将耗尽，封面应与底部图片交换，以便您可以循环浏览每日个人照片（例如'today.jpg'和'tomorrow.jpg'）

希望有所帮助！

jquery基于获取第二个时钟显示图像

2 个答案:

HTML

CSS

JS + jQuery的