动画HTML,CSS JavaScript。我该如何实现呢

时间:2015-02-19 09:40:58

标签: javascript jquery html css html5

我正在尝试实现网站功能,但我不知道如何创建它。我试着查看源代码并创建它,但我无法做到。基本上在这个website上有一个小红球"左下角的菜单,当您单击它时,它会打开更多菜单。这是非常互动的,我想将它纳入我的大学项目。我是HTML,CSS和Javascript的初学者,所以对你来说这可能是一个愚蠢的问题,但是,如果你可以帮助我,那将是非常友好的。

1 个答案:

答案 0 :(得分:0)

该元素通过iFrame实现,您可以将其视为“微缩进入另一页”。 iframe的原始源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Share NIF</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>

<body style="overflow: hidden">

    <div id="content">
        <div class="socials">
            <ul class="reset">
                <li><a href="http://www.facebook.com/NarutoItalianForum" target="_blank" title="Facebook"><img src="img/socials/facebook.png" alt="Facebook" /></a></li>
                <li><a href="http://twitter.com/NIFTeam" target="_blank" title="Twitter"><img src="img/socials/twitter.png" alt="Twitter" /></a></li>
                <li><a href="http://it.netlog.com/NarutoItalianForum" target="_blank" title="Netlog"><img src="img/socials/netlog.png" alt="Netlog" /></a></li>
                <li><a href="http://www.youtube.com/NIFTeam" target="_blank" title="You Tube"><img src="img/socials/youtube.png" alt="You Tube" /></a></li>
                <li><a href="http://nifteam.altervista.org/" target="_blank" title="Sito"><img src="img/socials/msn.png" alt="Sito" /></a></li>
                <li><a href="/cdn-cgi/l/email-protection#721c130007061d1b06131e1b131c141d00071f321a1d061f131b1e5c1b06" target="_blank" title="E-mail"><img src="img/socials/mail.png" alt="E-mail" /></a></li>
            </ul>           
        </div>      
    </div>

<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&a.indexOf("/cdn-cgi/l/email-protection") > -1  && (a.length > 28)){s='';j=27+ 1 + a.indexOf("/cdn-cgi/l/email-protection");if (a.length > j) {r=parseInt(a.substr(j,2),16);for(j+=2;a.length>j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);}t.innerHTML=s.replace(/</g,"&lt;").replace(/>/g,"&gt;");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();
/* ]]> */
</script>
</body>
</html>

这是default.css

这是jquery.js

这是mobilyblock.js

这是init.js