Question

我有一个没有循环的GIF动画。我想在大约6秒钟后在gif上显示图像。我想要一些图像有一个onlick事件，滚动到页面的一部分（嵌入代码），一些显示框/容器，其他人打开一个链接。我已经想出如何将图像放在gif的顶部，但我似乎无法使setTimeout或onclick函数工作。我正在使用weebly所以我将脚本放在html中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" defer>
        setTimeout(function(){
            document.querySelector(".contact-icon").style.display = 'inline-block';},6000)
</script>
<script type="text/javascript" defer>
$(".contact-icon").click(function() {
            $('html,body').animate({
                scrollBottom: $(".contact").offset().bottom},
                'slow');});
    </script>
</head>
<div id="tablet-container">
            <img src="/files/theme/tablet.gif" height="645" width="960"    style="padding:65px;"/>
            <div id="contact-icon-container">
                <a href="#" class="sprite contact-icon"></a>    
            </div>
            <div id="gallery-icon-container">
                <a href="#" class="sprite gallery-icon"></a>
            </div>
            <div id="gmail-icon-container">
                <a href="#" class="sprite Communcation-gmail-icon"></a>
            </div>
            <div id="piechart-icon-container">
                <a href="#" class="sprite piechart-icon"></a>
            </div>
            <div id="linkedin-icon-container">
                <a href="#" class="sprite LinkedIn_logo_initials"></a>
            </div>
        </div>

<css>
.sprite {
background: url(sprites.png) no-repeat;
display:inline-block;
}
.Communication-gmail-icon{
background-position: 0 0;
width: 66px;
height: 66px;
}
.Communication-gmail-icon:hover, .Communication-gmail-icon:active{
background-position: -96px 0;
width: 66px;
height: 66px;
}
.contact-icon{
background-position: 0 -77px ;
width: 66px;
height: 66px;
}
.contact-icon:hover, .contact-icon:active{
background-position: -95px -75px ;
width: 66px;
height: 66px;
}
.gallery-icon{
background-position: 0 -322px ;
width: 66px;
height: 66px;
}
.gallery-icon:hover, .gallery-icon:active{
background-position: -97px -321px ;
width: 66px;
height: 66px;
}
.LinkedIn_logo_initials{
background-position: -200px -83px ;
width: 66px;
height: 66px;
}
.LinkedIn_logo_initials:hover, .LinkedIn_logo_initials:active{
background-position: -295px -83px ;
width: 66px;
height: 66px;
}
.piechart-icon{
background-position: -198px -324px ;
width: 66px;
height: 66px;
}
.piechart-icon:hover, piechart-icon:active{
background-position: -292px -324px ;
width: 66px;
height: 66px;
}
/*Positioning for icons on top of Gif*/
#contact-icon-container{
position:relative;
top:-280px;
right:120px;
}
/*etc.......*/

这是JsFiddle的链接

https://jsfiddle.net/wp6uLksw/

setTimeout和.click用于图像HTML

0 个答案: