Javascript 设置超时和。单击查看HTML图像_Javascript_Jquery_Html_Css

Javascript 设置超时和。单击查看HTML图像

javascript jquery html css

Javascript 设置超时和。单击查看HTML图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个没有循环的动画gif。我想在大约6秒钟后在gif上显示图像。我希望一些图像有一个onlick事件，可以滚动到页面的某个部分（嵌入代码），一些图像显示box/container，还有一些图像可以打开链接。我已经知道了如何将图像放在gif的顶部，但我似乎无法让setTimeout或onclick函数工作。我使用weebly，所以我将脚本放在html中 <html> <head> <meta http-equiv="Content-Type" content="t

我有一个没有循环的动画gif。我想在大约6秒钟后在gif上显示图像。我希望一些图像有一个onlick事件，可以滚动到页面的某个部分（嵌入代码），一些图像显示box/container，还有一些图像可以打开链接。我已经知道了如何将图像放在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>


setTimeout（函数（）{
document.querySelector（“.contact icon”）.style.display='inline block'；}，6000）
$（“.contact图标”）。单击（函数（）{
$（'html，body'）。设置动画({
滚动底部：$（“.contact”）.offset（）.bottom}，
“慢”）；}）；


雪碧先生{
背景：url（sprites.png）不重复；
显示：内联块；
}
.通讯gmail图标{
背景位置：0；
宽度：66px；
高度：66px；
}
.通讯gmail图标：悬停，.通讯gmail图标：活动{
背景位置：-96px 0；
宽度：66px；
高度：66px；
}
.联系人图标{
背景位置：0-77px；
宽度：66px；
高度：66px；
}
.联系人图标：悬停，.联系人图标：活动{
背景位置：-95px-75px；
宽度：66px；
高度：66px；
}
.图库图标{
背景位置：0-322px；
宽度：66px；
高度：66px；
}
.gallery图标：悬停，.gallery图标：活动{
背景位置：-97px-321px；
宽度：66px；
高度：66px；
}
.LinkedIn_徽标_首字母{
背景位置：-200px-83px；
宽度：66px；
高度：66px；
}
.LinkedIn_徽标_首字母：悬停，.LinkedIn_徽标_首字母：活动{
背景位置：-295px-83px；
宽度：66px；
高度：66px；
}
.piechart图标{
背景位置：-198px-324px；
宽度：66px；
高度：66px；
}
.piechart图标：悬停，piechart图标：活动{
背景位置：-292px-324px；
宽度：66px；
高度：66px；
}
/*在Gif上定位图标*/
#联系人图标容器{
位置：相对位置；
顶部：-280px；
右：120px；
}
/*等等*/

下面是指向JSFIDLE的链接

我看到您正在使用jQuery，但在head部分没有指向库的链接。顺便说一下，你的意思是六秒钟……你必须更新你的小提琴。您的fiddle与堆栈溢出上的相同代码不匹配。同意上述两条评论。在解释的基础上，你也很难想象你想要达到的效果，但也许那只是我。更新了JSFIDLE，我不是说使用jquery或指向库的链接，这些是我能找到的唯一脚本代码，可以执行我想要的。我只想在html中使用脚本，因为weebly使链接到其他代码文件@ShikkedielMaybe变得很困难。请尝试将脚本包装在

$（document）.ready（function（）{…}）

中。老实说，还是不确定它是否连接到图书馆。

<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.......*/