jquery-笔记

最新推荐文章于 2020-10-01 02:08:20 发布

百事可口

最新推荐文章于 2020-10-01 02:08:20 发布

阅读量150

点赞数

分类专栏：笔记 jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38594056/article/details/106607498

版权

笔记同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

jquery是js的一个库，简单来说就是js对象，函数封装
以下为小练习：

进度条：

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .progress{
            width: 500px;
            height: 10px;
            background-color: #aaa;
            border-radius: 10px;
            margin-top: 20px;
            overflow: hidden;
        }
        .progressBar{
            width: 0%;
            height: 10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>点击加载进度条</button>
    <div class="progress">
        <div class="progressBar"></div>
    </div>
    <h2></h2>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $('button').on('click',function(){

            var timer=null;
            timer=setInterval(goUp,30)
            var num=0;
            var speed=5
            function goUp(){
                num++;
                $('.progressBar').width(num)
               if(num>=$('.progress').width()){
                   clearInterval(timer)
               }
               $('h2').html('进度'+parseInt(num/5)+'%')
            }
        })
    </script>
</body>
</html>

滚动新闻

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 150px;
            height: 150px;
            border: 1px solid black;
            overflow: hidden;
            margin: 50px auto;
        }
        li{
            list-style: none;
            margin-left: 30px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>新闻1新闻</li>
            <li>新闻2新闻</li>
            <li>新闻3新闻</li>
            <li>新闻4新闻</li>
            <li>新闻5新闻</li>
            <li>新闻6新闻</li>
            <li>新闻7新闻</li>
            <li>新闻8新闻</li>
            <li>新闻9新闻</li>
            <li>新闻10新闻</li>
        </ul>
    </div>
   
<script src="js/jquery-1.12.4.js"></script>
<script>
    //克隆
    var copy=$('ul').clone()
    $('.box').append(copy)

    var timer=null;
    timer=setInterval(moveUp,10)
    var num=0;
    function moveUp(){
        var top=$('.box').scrollTop()
        top++;
        $('.box').scrollTop(top)
        
        if($('.box').scrollTop()>=$('ul').height()){
            $('.box').scrollTop(0)
        }
    }
    $('.box').on('mouseenter',function(){
        clearInterval(timer)
    })
    $('.box').on('mouseleave',function(){
        timer=setInterval(moveUp,10)
    })
</script>
</body>
</html>

模拟弹幕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 100%;
            height: 500px;
            background-color: #eee;
            position: relative;
            overflow: hidden;
            /* border: 1px solid #000000; */
        }
        .bottom{
            width: 100%;
            height: 60px;
            background-color: #333;
        
            line-height: 60px;
            text-align: center;
        }
        .bottom input{
            width: 300px;
            height: 30px;
            line-height: 30px;
        }
        .bottom button{
            padding:6px 20px
        }
        .bottom span{
            color:#fff
        }
        .content span{
            position: absolute;
            display: block;
            white-space: nowrap;
            font-size: 28px;
        }
    </style>
</head>  
<div class="content">
</div> 
<div class="bottom">
    <span>吐槽 : </span><input type="text">
    <button>发送</button>
</div>
<script>
    var max=$(window).width()
    console.log(max);
    
    //发送
    $('button').on('click',function(){
        //得到输入内容
        var val=$('input').val();
        //得到后毁掉
        $('input').val('');
        if(val=='')return;
        //获取随机顶部位置
        var top=parseInt(Math.random()*301);
        //颜色随机
        var red=parseInt(Math.random()*256)
        var green=parseInt(Math.random()*256)
        var blue=parseInt(Math.random()*256)
        //拼接
        var color='rgb('+red+','+green+','+blue+')'
        //动态创建元素。
        $('<span>'+val+'</span>').css({
            color:color,
            top:top,
            left:max
        }).appendTo($('.content')).animate({
            left:-300
        },6000,'linear',function(){
            $(this).remove()
        })

    })
    
</script>
</body>
</html>

动态添加内容，可用on 事件委托：
委托的祖宗.on(‘事件名’,‘元素’,‘fun’)

事件绑定在父元素上面，点击子元素，会触发之前的父元素事件，可以先解绑：
jq.off(‘事件’)
jq.unbing(‘事件1 事件2’)

动画animate

jquery对象.animate（参数1，参数2，参数3，参数4）
参数1：{ }css样式
参数2：动画执行时间
参数3：动画运动状态（匀速）
参数4：回调函数动画结束后在执行的函数

动画的练习：
类似轮播图的动画：
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        .content{
            width: 590px;
            height: 470px;
            margin: 0 auto;
            border: 3px solid #ff6700;
            overflow: hidden;
            position: relative;
        }
        .content img{
            width: 100%;
            height: 100%;
        }
        ul{
            list-style: none;
            width: 2360px;
        }
        .content li{
            float: left;
        }
        .content .next,.content .prev{
            position: absolute;
            top:50%;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            text-align: center;
            line-height: 40px;

            font-size: 26px;
        }
        .content .next{
            right: 0;
        }
        .content .prev{
            left: 0;
        }
    </style>
</head>  

<div class="content">
    <ul>
        <li><a href="#"><img src="imgs轮播/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs轮播/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs轮播/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs轮播/4.jpg" alt=""></a></li>
    </ul>
    <a href="javascript:;" class="next">&gt;</a>
    <a href="javascript:;" class="prev">&lt;</a>
<script>
    $('.next').click(function(){
        $('.content ul').stop(false).animate({marginLeft:'-590px'},1000,'linear',function(){
            $('.content ul>li').eq(0).appendTo($('.content ul'))
            $('.content ul').css('marginLeft','0px')
        })
    })
    $('.prev').click(function(){

        $('.content ul').css('marginLeft','-590px')
            $('.content ul>li').last().prependTo($('.content ul'))
            $('.content ul').stop(true).animate({marginLeft:'0px'},1000)
    
    })
   
</script>
    
</body>
</html>

百事可口

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery-笔记

jquery是js的一个库，简单来说就是js对象，函数封装以下为小练习：进度条：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
复制链接

扫一扫