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

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

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

首先，实现了最基本的功能：点击不同的按钮切换显示不同的内容；

其次，加了定时器，用的是setInterval，当然用setTimeout也是可以的；

最后，给body绑定了onmouseover和onmouseout事件,鼠标移入清除定时器，移出又添加定时器。

HTML

    

        

            
首页
            
点击看看
            
会自动的
            
我的网站
        
    
    

        
我的网站
        
JS代码,导航菜单
        
看到效果了吗？？？
        
我的网站我做主
    

CSS

* {
    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: 28px;
    border-right: #cccccc solid 1px;
}
.menu li {
    float: left;
    width: 99px;
    text-align: center;
    line-height: 28px;
    height: 28px;
    cursor: pointer;
    border-left: #cccccc solid 1px;
    color: #666;
    font-size: 14px;
    overflow: hidden;
    background: #E0E2EB;
}
.menu li.off {
    background: #FFFFFF;
    color: #336699;
    font-weight: bold;
}
.menudiv {
    height: 200px;
    border-left: #ccc solid 1px;
    border-right: #ccc solid 1px;
    border-top: 0;
    background: #fefefe
}
.menudiv div {
    padding: 15px;
    line-height: 28px;
}

因为都是很基础的，我就主要讲解一下JS部分，后面的案例也一样，请理解。

var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
window.onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName("li")
    links_len=links.length;
    for(var i=0; ilinks_len)cursel_0=1
    setTab(name_0,cursel_0);
}

注意：onload 事件会在页面或图像加载完成后立即发生，类似与jQuery中的ready事件，推荐都加上，或者也可以使用立即执行函数，这就看个人喜欢；变量最好是在最开始的时候就声明，因为使用var声明的变量会发生“声明提前”，即使你在变量声明之前调用也不会报错；但是在es6中的let就很好的纠正了这一现象，所以我建议大家要养成一个好的习惯，先声明，在调用；

一个图片弹窗特效，点击图片会显示大图，并且可以读取图片的alt信息显示出来；点击关闭按钮会关闭弹窗。

HTML

    
    
    


    


    
    ×
    
    
        
        

CSS

/* 触发弹窗图片的样式*/
    #myImg{
        border-radius: 5px;
        cursor:pointer;
        transition:0.3s;
    }
    #myImg:hover{opacity:0.7;}
    /* 弹窗背景*/
    .modal{
        display:none;   /*Hidden by default*/
        position: fixed;/* Sit in place*/
        z-index: 1;/* Sit on top*/
        padding-top:100px;/* Location of the box*/
        left:0;
        top: 0;
        width:100%;/* Full width*/
        height: 100%;/*  Full width*/
        overflow: auto;
        background-color: rgba(0,0,0,0.9);/*  Black w/ opactity*/
    }
    /* 图片*/
    .modal-content{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
    }
    /* 文本内容*/
    #caption{
        margin: auto;
        display: block;
        width:80%;
        max-width: 700px;
        text-align:center;
        color:#ccc;
        padding:10px 0;
        height: 150px;
    }
    /* 添加动画*/
    .modal-content, #caption { 
    -webkit-animation-name: zoom;           /*定义一个或多个动画名称*/
    -webkit-animation-duration: 0.6s;          /*指定对象动画的持续时间*/
    animation-name: zoom;
    animation-duration: 0.6s;
}
 
@-webkit-keyframes zoom {                     
    from {-webkit-transform:scale(0)}  /*transform属性向元素应用2D或3D转换，scale是元素缩放*/
    to {-webkit-transform:scale(1)}
}
 
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
 
/* 关闭按钮 */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
 
.close:hover,.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
 
/* 小屏幕中图片宽度为 100% */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

简单讲解一下CSS代码，部分注解我写在了注释中；那在这里就重点说一下css3中的动画，可以使用@keyframes规则创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中，您可以更改CSS样式的设定多次。指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成；然后使用animation添加动画。记得要注意兼容性，在webkit内核的浏览器中要加前缀。

JS

 // 获取弹窗
var modal = document.getElementById("myModal");
 
// 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}
 
// 获取  元素，设置关闭按钮
var span = document.getElementsByClassName("close")[0];
 
// 当点击 (x), 关闭弹窗
span.onclick = function() { 
  modal.style.display = "none";
}

这个特效使用到的js就比较简单，给图片和关闭按钮绑定click事件就可以了。

瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应；

使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获取图片的高度，控制从第二行开始的图片先排在上一行中高度最低的下面，以此形成瀑布流的布局；

使用window.onresize，当窗口大小变化的时候重新计算窗口宽度，以重新进行排版；

使用window.onscroll，当滚动滚轮时，判断是否显示到最后一张图片，在这之前会从模拟的数据中读取图片地址，再添加到页面里，使得页面可以一直滚动下去，模拟了百度图片的效果；

在css中加入了过渡，使得图片位置变化的时候有过渡效果；

本特效的网页内容和样式都很简单就不写在这了，主要讲解一下js代码，下面上代码

window.onload = function(){ //判断页面内容与样式是否加载完毕
    imglocation("container","box");
    var imgData = {"data":[{"src":"img2.jpg"},{"src":"img3.jpg"},{"src":"img4.jpg"},{"src":"img5.jpg"},{"src":"img6.jpg"}]};//模拟的图片地址
    
    window.onscroll = function(){//监听滚轮事件
      if(checkFlag()){//checkFlag()是判断是否快要显示最后一张图，如果是返回true，否则返回false
        for(var i = 0;i
排版函数
function imglocation(parent,content) {
    //将parent中内容全部取出,获取所有的图片
    var ccontent = getChildElement(cparent,content);
    var imgWidth = ccontent[0].clientWidth;//图片的宽度
    var OWidth = document.documentElement.clientWidth;//窗口宽度
    var num = Math.floor(OWidth/imgWidth);//计算一行能摆放的图片数
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin: 0 auto;";
    //设置css样式
    var BoxheightArr = [];
    for(var i = 0;i
完整代码请到GitHub上观看，欢迎star
总结
虽然我这里写的是js实现特效，但是如果能用css实现，那么最后是用css，这就看哪种方法方便了，择优嘛；好啦，今天就写这三个案例吧，希望大家看完这三个案例，能够有些想法，最后是要动手写写，光看是没有用的。
最后，谢谢各位的观看，想看源代码的可以去我的GitHub上，欢迎star或者添加更多的js特效；如果有哪里写的不好也请指出来，我会马上去改正；如果感到对你有用欢迎收藏点赞！谢谢！