JS基础特效---网页常用特效

最新推荐文章于 2024-04-20 02:52:24 发布

weixin_34192732

最新推荐文章于 2024-04-20 02:52:24 发布

阅读量2.3k

点赞数 6

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000011068956

版权

1、前言

很久没有发布文章啦，终于今天有点时间，就在上班前把我之前所写的为了学习JS基础编写的一些使用JS实现的网页常用特效分享给大家；相关的代码我之后也会放到GitHub上，欢迎大家star；

2、JS实现特效的概念

JS实现网页特效，其实通俗的说就是通过JS动态地控制css样式，以达到实现动画的效果；
（很多动画特效都可以由css3实现，个人推荐是能用css3就用css3；这里用Js的目的我前面也说了，是为了学习JS基础以及学习如何通过js控制各种节点）。

3、案例1--选项卡

3.1、案例分析

首先，实现了最基本的功能：点击不同的按钮切换显示不同的内容；
其次，加了定时器，用的是setInterval，当然用setTimeout也是可以的；
最后，给body绑定了onmouseover和onmouseout事件,鼠标移入清除定时器，移出又添加定时器。

3.2案例实现过程

3.2.1编写网页的内容和样式

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>点击切换选项卡代码</title>
</head>
<body>
<div class="tab1" id="tab1">
    <div class="menu">
        <ul>
            <li id="one1" onclick="setTab('one',1)">首页</li>
            <li id="one2" onclick="setTab('one',2)">点击看看</li>
            <li id="one3" onclick="setTab('one',3)">会自动的</li>
            <li id="one4" onclick="setTab('one',4)">我的网站</li>
        </ul>
    </div>
    <div class="menudiv">
        <div id="con_one_1">我的网站</div>
        <div id="con_one_2" style="display:none;">JS代码,导航菜单</div>
        <div id="con_one_3" style="display:none;">看到效果了吗？？？</div>
        <div id="con_one_4" style="display:none;">我的网站我做主</div>
    </div>
</div>
<div style="text-align:center;clear:both;"></div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a, img {
    border: 0;
}
body {
    font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
.tab1 {
    width: 401px;
    border-top: #cccccc solid 1px;
    border-bottom: #cccccc solid 1px;
    margin: 50px auto 0 auto;
}
.menu {
    height:

最低0.47元/天解锁文章