首页 > Web开发 > 详细

js特效 15个小demo

时间：2019-12-18 21:06:27      阅读：69      评论：0      收藏：0      [点我收藏+]

js特效和15个小demo

代码如下：images文件夹未上传

1.图片切换：

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>图片切换</title>

</head>
<body>
    <img src="images/1.jpg" width="400" height="300" id="flower">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>

    <script type="text/javascript">
        //获取事件源 需要的标签
        var flower = document.getElementById(‘flower‘);
        var prevBut=document.getElementById(‘prev‘);
        var nextBut = document.getElementById(‘next‘);
        var mixIndex = 1,maxIndex = 4;currentIndex = mixIndex;

        //监听按钮的点击
        //下一张
        nextBut.onclick = function(){
            //到最后一张，当前为第四张，当再次点击事件，当前跳回第一张
            if (currentIndex === maxIndex) {
                currentIndex = mixIndex;
            }else{
                currentIndex++;
            }
            flower.setAttribute(‘src‘,`images/${currentIndex}.jpg`)
        }
        //上一张
        prevBut.onclick = function(){
            if (currentIndex === mixIndex) {
                currentIndex = maxIndex;
            }else{
                currentIndex--;
            }
            flower.setAttribute(‘src‘,`images/${currentIndex}.jpg`)
        }

    </script>
</body>
</html>
View Code

2.图片显示和隐藏

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>图片显示和隐藏</title>
</head>
<body>
    <button id="overflow">隐藏</button>
    <br>
    <img src="images/1.jpg" width="300" height="200">
    <script type="text/javascript">
    var butObj = document.getElementsByTagName(‘button‘)[0];
    var newImage = document.getElementsByTagName(‘img‘)[0];

    butObj.onclick = function(){
        //判断文本内容来操作开关
        if(butObj.innerHTML === ‘隐藏‘){
            newImage.style.display = ‘none‘;
            butObj.innerHTML = ‘显示‘;
        }else{
            newImage.style.display = ‘block‘;
            butObj.innerHTML = ‘隐藏‘;            
        }
    }


    </script>

</body>
</html>
View Code

3.相册切换效果

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>
        相册切换效果
    </title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
            overflow: hidden;
        }
        li{
            float: left;
            margin-left: 10px;
            margin-top: 20px;
            width: 46px;
            height: 26px;
            border: 2px solid #fff;
            
        }
        ul li.active{
            border-color: red;
        }
    </style>
</head>
<body>
    <img src="images/1.jpg" width="300" id="bigImage">
    <ul>
        <li class="active">
            <a href="#">
                <img src="images/1.jpg" width="46" class="smallImage">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/2.jpg" width="46" class="smallImage">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/3.jpg" width="46" class="smallImage">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/4.jpg" width="46" class="smallImage">
            </a>
        </li>
    </ul>

    <script type="text/javascript">
        //获取事件源
        var bigObj = document.getElementById(‘bigImage‘);
        var smallObj = document.getElementsByClassName(‘smallImage‘);

        //遍历集合，给每个img标签添加事件
        for(var i =0;i<smallObj.length;i++){
            smallObj[i].onmouseover = function(){
                //在悬浮前清除所有li的class属性
                for(var j =0;j<smallObj.length;j++){
                    smallObj[j].parentNode.parentNode.setAttribute(‘class‘,‘‘);
                }
                //当悬浮到这张图片，设置他属性class为active
                this.parentNode.parentNode.setAttribute(‘class‘,‘active‘);
                //获取到悬浮图片的src
                var smallImageSrc = this.getAttribute(‘src‘);
                bigObj.setAttribute(‘src‘,smallImageSrc);
            }
        }
        
    </script>
</body>
</html>
View Code

4.关闭小广告

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>关闭小广告</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        #qe_code{
            width: 180px;
            height: 160px;
            position: relative;
        }
        #qe_code img{
            position: absolute;
            right: 0;
        }
        #qe_code span#close{
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="qe_code">
        <img src="images/1.jpg" id="code" width="168px" height= "160px">
        <span id="close">X</span>
        <script type="text/javascript">
            var qe_codeDiv = document.getElementById(‘qe_code‘);
            var closeObj = document.getElementById(‘close‘);
            //隐藏盒子ok~
            closeObj.onclick = function(){
                qe_codeDiv.style.display = ‘none‘;
            }

        </script>
        
    </div>

</body>
</html>
View Code

5.图片切换完整版 函数封装

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>图片切换</title>
    
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
            display: inline-block;
            margin-right: 20px;
        }
        #box{
            border: 1px solid #ccc;
            width: 300px;
            height: 70px;
            padding-top:450px;
            background:url(‘images/1.jpg‘) no-repeat
        }
    </style>
</head>
<body>
    <div id="box">
        <li class="item">
            <img src="images/1.jpg" width="46">
        </li>
        <li class="item">
            <img src="images/2.jpg" width="46">
        </li>
        <li class="item">
            <img src="images/3.jpg" width="46">
        </li>
        <li class="item">
            <img src="images/4.jpg" width="46">
        </li>
    </div>
    <script type="text/javascript">
        //获取事件源
        function $(id){
            return typeof id ===‘string‘? document.getElementById(id):null;
        }
        var items = document.getElementsByClassName(‘item‘);
        for(var i = 0;i<items.length;i++){
            console.log(i);
            var item = items[i]
            item.id = i+1; //设置属性
            item.onmouseover = function(){
            $(‘box‘).style.background = `url(‘images/${this.id}.jpg‘) no-repeat`                //模板字符串``
        }
        }
    </script>




</body>
</html>
View Code

6.百度换肤

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>百度换肤</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;    
        }
        ul,li{
            list-style: none;
            border: 0;

        }
        #bottom1{
            position: fixed;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            background-image:url(‘images/1.jpg‘);
            background-position: center 0;
            background-repeat: no-repeat;
        }
        #top{
            width: 100%;
            height: 120px;
            position: relative;
            z-index: 10;

        }
        #top ul{
            width: 1200px;
            margin:0 auto;
            overflow: hidden;
            background-color: rgba(255,255,255,.5);
        }
        #top ul li{
            float: left;
        }
        #top ul li img{
            width: 180px;
            height: 124px;
            margin-left: 20px;
        }    
    </style>
</head>
<body>
    <div id="bottom1">    
    </div>
    <div id="top">
        <ul>
            <li class="item">
                <img src="images/1.jpg">
            </li>
            <li class="item">
                <img src="images/2.jpg">
            </li>
            <li class="item">
                <img src="images/3.jpg">
            </li>
            <li class="item">
                <img src="images/4.jpg">
            </li>
        </ul>

    </div>
    <script type="text/javascript">
                //获取事件源
        function $(id){
            return typeof id ===‘string‘? document.getElementById(id):null;
        }
        var items = document.getElementsByClassName(‘item‘);
        for(var i = 0;i<items.length;i++){
            
            var item = items[i]
            item.id = i+1; //设置属性
            item.onmouseover = function(){
            $(‘bottom1‘).style.backgroundImage = `url(‘images/${this.id}.jpg‘)`                //模板字符串``
        }
        }
    </script>
</body>
</html>
View Code

7.音乐盒实现全选和反选

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>09音乐盒实现全选和反选</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #panel{
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 400px;
            margin: 100px auto;
        }
        .panel-footer{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="panel">
    <div class="panel-title">
        <h3>千千音乐盒</h3>
        <hr>
    </div>

    <div class="panel-content">
        <input type="checkbox">漂洋过海来看你<br>
        <input type="checkbox">小酒窝<br>
        <input type="checkbox">林俊杰<br>
        <input type="checkbox">青花瓷<br>
        <input type="checkbox">千里之外<br>
        <input type="checkbox">我爱你<br>
        <input type="checkbox">南山南<br>
        <input type="checkbox">可惜不是你<br>
    </div>
    <div class="panel-footer">
        <hr>
        <button id="allSelect">全选</button>
        <button id="cancelSelect">取消选中</button>
        <button id="reverseSelect">反选</button>
    </div>
    </div>
    
    <script type="text/javascript">
        function $(id) {
            return typeof id ===‘string‘? document.getElementById(id):null;
        }
        //获取复选框
        var inputs = document.getElementsByTagName(‘input‘);
        //全选
        $(‘allSelect‘).onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
                // inputs[i].setAttribute(‘checked‘,‘checked‘);
            }    
        }
        //取消选中
        $(‘cancelSelect‘).onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = false;
            }
        }
        //反选
        $(‘reverseSelect‘).onclick = function(){
            for(var i=0;i<inputs.length;i++){
                //inputs[i].checked = !inputs[i].checked;
                if (inputs[i].checked) {
                    inputs[i].checked = false;
                }else{
                    inputs[i].checked = true;
                }    
            }
        }                
    </script>
    
</body>
</html>
View Code

8.表单验证 成绩单前端简单检测合法

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #prompt{
            font-size: 12px;
            color: darkgray;
        }
        #score{
            border: 1px solid darkgray;
        }

        /**绿色勾*/
        .correct:before {
            content: ‘\2714‘;
            color: #008100;
        }
        .incorrect:before {
            content: ‘\2716‘;
            color: #b20610;
        }

    </style>
</head>
<body>
    <div id="box">
    <label for="score">请输入你的成绩:</label>
    <input type="text" id="score" placeholder="请输入分数">        
    <span id="prompt">请输入你的成绩</span>
    </div>
    <script type="text/javascript">
        function $(id){
            return typeof id ===‘string‘ ? document.getElementById(id):null;
        }
        $(‘score‘).onblur = function(){
            var values = parseFloat(this.value);
            if(isNaN(values)){
                $(‘prompt‘).innerHTML = ‘输入的成绩不正确‘;
                $(‘prompt‘).setAttribute(‘class‘,‘incorrect‘);
                this.style.borderColor = ‘red‘;
            }else if(values>0 && values <=100){
                $(‘prompt‘).innerHTML = ‘输入的成绩正确‘;
                $(‘prompt‘).setAttribute(‘class‘,‘correct‘);
                this.style.borderColor = ‘lightgreen‘;    
                //    $(‘prompt‘).className =‘correct‘ 设置属性        
            }else{
                //超出的范围
                $(‘prompt‘).innerHTML = ‘输入的成绩超出范围‘;
                $(‘prompt‘).setAttribute(‘class‘,‘incorrect‘);    
                this.style.borderColor = ‘#ff7500‘;            
            }
        
        
        $(‘score‘).onfocus = function(){
            $(‘prompt‘).innerHTML =‘请输入你的成绩‘;
            $(‘prompt‘).className=‘‘;
            $(‘score‘).style.borderColor =‘darkgray‘;
            $(‘score‘).style.outline =‘none‘;
            $(‘score‘).value = ‘‘;
            
            }

        }
    </script>
</body>
</html>
View Code

9.上传图片验证

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <label for="file">上传图片格式验证:</label>
    <input type="file" id="file">
    <script type="text/javascript">

        //获取事件源
        function $(id){
            return typeof id ===‘string‘ ? document.getElementById(id): null;
        }
        //监听图片选择的变化
        $(‘file‘).onchange=function(){
            var path = this.value;
            console.log(path);
            //获取.后面的格式
            var fileIndex = path.lastIndexOf(‘.‘);
            var file_path = path.substr(fileIndex);
            //转为小写
            var lower_suffix = file_path.toLowerCase();
            console.log(file_path);
            //判断
            if(lower_suffix===‘.jpg‘ || lower_suffix ===‘.gif‘ ||lower_suffix===‘.png‘ || lower_suffix===‘.jpeg‘){
                alert(‘上传图片格式正确！‘);
            }else{
                alert(‘上传图片格式不正确！‘);
            }
        }


    </script>
</body>
</html>
View Code

10.随机验证码校验

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="code"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="验证">


    <script type="text/javascript">
        //全局
        var code=‘‘;
        //获取标签
        var codeDiv =document.getElementById(‘code‘);
        var newCode = document.getElementById(‘newCode‘);
        var validateBut = document.getElementById(‘validate‘);

        //文本被添加验证码
        createCode();

        //给input输入框绑定点击事件
        validateBut.onclick = function(){
            var newCodeA=newCode.value.toUpperCase();
            console.log(newCodeA);
            if(codeDiv.innerHTML===newCodeA){
                // alert(‘验证通过！‘);
                window.location.href = ‘http://www.baidu.com‘;
            }else{
                alert(‘验证失败！‘);
                newCode.value = ‘‘;
                
            }
                
        }
        





        function random(lower, upper) {
            return Math.floor(Math.random() * (upper - lower)) + lower;
        }
        function createCode(){
            var codeLength =4;
            var randomCode=[0,1,2,3,4,5,6,7,8,9,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘];
            for(var i=0;i<codeLength;i++){
                        var index = random(0,36);
                        code+=randomCode[index];
            }
            codeDiv.innerHTML = code;
        }    


    </script>

</body>
</html>
View Code

11.发表评论

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>发表评论</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        ul{
            list-style: none;
        }
        #box{
            width: 1000px;
            border: 1px solid #ccc;
            margin: 100px auto;
            padding: 20px;
            /*background-color: red;*/
        }
        #comment{
            padding: 10px;
            width: 80%;
            font-size: 20px;
            outline: none;
        }
        .box_top{
            margin-bottom: 50px;
        }
        #comment_content li{
            border-bottom: 1px dashed #ccc;
            width: 80%;
            color: red;
            line-height: 45px;
        }
        #comment_content li a{
            float: right;
    </style>
</head>
<body>
    <div id="box">
        <div class="box_top">
            <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论">
            </textarea>
            <button id="btn">发表</button>
        </div>
        <ul id="comment_content">

        </ul>
    </div>
    <script type="text/javascript">
        window.onload=function(){
            //监听按钮的点击
            $(‘btn‘).onclick =function(){
                //1.1 获取用户输入的内容
                var content = $(‘comment‘).value;
                console.log(content);
                //1.2判断
                if (content.length === 0) {
                    alert(‘请输入内容！‘);
                    return;
                }else{
                    //1.3 创建li标签
                    var newLi = document.createElement(‘li‘);
                    newLi.innerHTML = `${content}<a href=‘javascript:void(0)‘>删除</a>`;
                    //往后面插入
                    // $(‘comment_content‘).appendChild(newLi);
                    //往前面插入,以ul下儿子辈的第一个为标准
                    $(‘comment_content‘).insertBefore(newLi,$(‘comment_content‘).children[0]);

                    //清楚输入框的内容
                    $(‘comment‘).value =‘‘;
                };
                //删除评论
                var delBtn =document.getElementsByTagName(‘a‘);
                for(var i=0;i<delBtn.length;i++){
                    //当被点击删除按钮
                    delBtn[i].onclick = function(){
                        //this是a，删除li
                        this.parentNode.remove();
                    }
                }
                
                
            }
            













            function $(id){
                return typeof id === ‘string‘ ? document.getElementById(id):null;
            }
        




        }




    </script>
</body>
</html>
View Code

12.九宫格布局浮动实现

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>九宫格布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            overflow: hidden;
        }
        #wrap .item{
            width: 248px;
            height: 300px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
            text-align: center;
        }
        #wrap .item .price{
            color: #ff7500;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服精灵女巫</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>

    </div>

    <script type="text/javascript">
        //获取事件源
        var buts = document.getElementsByTagName(‘button‘);
        var items = document.getElementsByClassName(‘item‘);
        console.log(items);
        //监听按钮的点击

        buts[0].onclick = function(){
            zzy_flex(3);  //这里直接调用函数
        }
        buts[1].onclick = function(){
            zzy_flex(4);
        }
        buts[2].onclick = function(){
            zzy_flex(5);
        }        

        //封装一个函数
        function zzy_flex(colsNum){
            for(var i= 0;i<items.length;i++){
                items[i].style.float = ‘left‘;
                items[i].parentNode.style.width =(colsNum*items[i].offsetWidth)+‘px‘;
                }
            }
    </script>
</body>
</html>
View Code

13.九宫格布局定位实现

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>九宫格布局定位实现</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            /*overflow: hidden;*/
            position: relative;
        }
        #wrap .item{
            width: 248px;
            height: 300px;
            font-size: 13px;
        }
        #wrap .item .title{
            width: 248px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
            text-align: center;
        }
        #wrap .item .price{
            color: #ff7500;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
        .imgContainer{
            width: 248px;
            display: table-cell;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="cols">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="wrap">
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服精灵女巫</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>
        <div class="item">
            <div class="imgContainer">
                <img src="images/1.jpg" width="200px">
            </div>
            <p class="title">衣服</p>
            <p class="price">￥69</p>
        </div>

    </div>

    <script type="text/javascript">
        //获取事件源
        var buts = document.getElementsByTagName(‘button‘);
        var items = document.getElementsByClassName(‘item‘);
        console.log(items);
        //监听按钮的点击

        buts[0].onclick = function(){
            zzy_flex(3);  //这里直接调用函数
        }
        buts[1].onclick = function(){
            zzy_flex(4);
        }
        buts[2].onclick = function(){
            zzy_flex(5);
        }        

        //封装一个函数
        function zzy_flex(colsNum){
            //第0行第0列 top:0*h left:0*w
            //第0行第1列 top:0*h left:1*w
            //第0行第2列 top:0*h left:2*w
            //第1行第0列 top:1*h left:0*w
            //第1行第1列 top:1*h left:1*w
            //第1行第2列 top:1*h left:2*w
            for(var i=0;i<items.length;i++){
                //求每个盒子的行数和列数，比如第10个盒子 10  3行 1列
                                                    //11  3   2 
                var row =parseInt(i/colsNum); //行  从0开始，第一张是 0 0;
                var col = parseInt(i%colsNum); //列
                //设置盒子定位
                items[i].style.position =‘absolute‘;
                items[i].style.top = (row*items[i].offsetHeight)+‘px‘;
                items[i].style.left = (col*items[i].offsetWidth)+‘px‘;
            }    
        }
    </script>
</body>
</html>
View Code

14.日期特效

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>日期特效</title>
    <style type="text/css">
        
        #nowDate{
            position: relative;
            width: 300px;
            height: 200px;
            text-align: center;
            background-color: #ff7500;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
        }
        #day{
            width: 120px;
            height: 120px;
            background-color: purple;
            position: absolute;
            top: 20px;
            left: 90px;
            line-height: 120px;
            text-align: center;
            vertical-align: middle;
            color: #fff;
            font-size: 40px;
        }
    </style>
</head>
<body>

    <div>
        <p id="nowDate">
            
        </p>
        <p id="day">
            
        </p>
    </div>

    <script type="text/javascript">
        //获取事件源
        var nowDate = document.getElementById(‘nowDate‘);
        var day = document.getElementById(‘day‘);
        //定时器 更新时间的变化
        setInterval(nowNumTime,20);

        function nowNumTime(){
            //创建对象
            var now =new Date();
            var year = now.getFullYear();
            var month =now.getMonth();
            var d = now.getDate();
            var week = now.getDay();
            var hour =now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();

            var weeks =[‘星期天‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘,]
            //拼接时间
            var temp = ‘‘+(hour>12 ? hour-12:hour);
            if(hour ===0){
                temp=‘12‘;
            }
            temp = temp+(minute<10 ? ‘:0‘ : ‘:‘)+minute;
            temp = temp+(second<10 ? ‘:0‘ : ‘:‘)+second;
            temp =temp+(hour>=12 ? ‘ P.M‘:‘ A.M‘);
            //拼接年月日 星期
            temp =`${year}年${month}月${d}日 ${temp} ${weeks[week]}`;

            nowDate.innerHTML = temp;
            day.innerHTML = d;
        }




    </script>
</body>
</html>
View Code

15.长图滚动

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title>长图滚动</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #000;
        }
        #box{
            width: 658px;
            height: 400px;
            border: 1px solid #ff6700;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
        }
        span{
            position: absolute;
            width: 100%;
            height: 50%;
            left: 0;
            cursor: pointer;
        }
        #top{
            top: 0;
        }
        #bottom{
            bottom:0;
        }

    </style>
</head>
<body>

    <div id="box">
        <img src="images/1.jpg">
        <span id="top"></span>
        <span id="bottom"></span>
    </div>


    <script type="text/javascript">
        //获取事件源
        var box = document.getElementById(‘box‘)
        var pic = document.getElementsByTagName(‘img‘)[0]
        var divTop = document.getElementById(‘top‘);
        var divBottom = document.getElementById(‘bottom‘);

        //2添加事件
        var num =0,timer =null ;
        divTop.onmouseover = function(){
            //让图片滚动
            clearInterval(timer);
            timer = setInterval(function(){
                num-=10;
                if (num>=-680) {
                    pic.style.top = num + ‘px‘;
                }else{
                    clearInterval(timer);
                }
                
            },100);
        }
        divBottom.onmouseover = function(){
            //让图片滚动
            clearInterval(timer);
            timer = setInterval(function(){
                num+=10;
                if (num<=0){
                    pic.style.top = num + ‘px‘;
                }else{
                    clearInterval(timer);
                }
                
            },100);
        }        
        //失去焦点时候清除定时
        box.onmouseout= function(){
            clearInterval(timer);
        }
    </script>
</body>
</html>
View Code

js特效 15个小demo

原文：https://www.cnblogs.com/hanfe1/p/12063365.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！