Question

一些新的HTML。我正在寻找创建动画，当点击图像时，它会播放动画，分割打开半页文本和内容。这样的事情：http://sketchtoy.com/62368639

Answer 1

如果你想做那样的事情，你应该看看像jquery这样的javascript框架（www.jquery.com）

我发现这个特别容易学习。

您想做什么：

<div style="display: none;" id="mytext">Your text</div>
<a onclick="$('#mytext').show()"></a>

Answer 2

基本流程是

添加图片的点击处理程序
查找点击图片所在行中的最后一张图片
设置展开元素的内容
在步骤2的图像之后插入展开元素
显示展开元素（在本例中为slideDown动画）

这是使用jQuery库，你没有标记，但它使这样做更容易。如果你需要一个vanilla javascript方法，可以添加一个。

HTML

<div id="container">
    <img src="http://placehold.it/128x128" />
    <img src="http://placehold.it/128x128" />
    <img src="http://placehold.it/128x128" />
    <img src="http://placehold.it/128x64" />
    <img src="http://placehold.it/128x64" />
    <img src="http://placehold.it/128x64" />

    <div id="expander">
        <img src="" />
        <div id="info">
            some info
        </div>
    </div>
</div>

JS

//Just making the expander half the height of the viewport
var winheight = $(window).height();
$("#expander").css("height",winheight/2);

$("img").click(function(){
   var img = $(this);
   var src = img.attr("src");
   var afterImg = findLastImgInRow(img);
   var expander = $("#expander");

   //Hide the expander if previously open
   expander.hide(0);

   //just setting the insides
   expander.find("img").attr("src",src);
   expander.find("#info").html("This is a test");

   //Put the expander after the last image in the row
   //so it will appear between its row and the next 
   expander.insertAfter(afterImg);
   expander.slideDown(600);    

   //This scrolls the page so that it will make the 
   //expander appear in the middle of the page
   $('html, body').animate({
       scrollTop: expander.offset().top-(winheight/4)
   }, 600);   
});

//Function to find the last image
//in a row by comparing their offset top values
function findLastImgInRow(img){
   var imgTop = img.offset().top;
   var img2 = img;
   do{
       if( img2.offset().top != imgTop ){
           img2 = img2.prev();
           break;
       }
   }while(img2=img2.next());
   return img2;
}

JSFiddle Demo

在单击链接之前不显示的Html页内隐藏文本

2 个答案: