Pc端总结

白色背景：收藏了图片

走马灯效果

$(function () {

    var SPEED = 3000;

    var num = $(".noticeLeftUl").children().length;

    var temp = 0;

    function Marquee() {

        temp = temp - 100;

        // 设置无限滚动

        if (temp == -((num) * 100)) {

            temp = 0;

            $(".noticeLeftUl").animate({ bottom: temp + '%' }, 1000);

            $(".noticeLeftUl").css('top', temp + '%');

        }

        else {

            $(".noticeLeftUl").animate({ top: temp + '%' }, 1000);

        }

    };

    // 初始化

    var MyMar = setInterval(Marquee, SPEED);

    // 鼠标事件，悬浮停止滚动，移开启动滚动

    $(".noticeLeftUl").hover(function () { clearInterval(MyMar) },

        function () { MyMar = setInterval(Marquee, SPEED) })

})

多行省略号展示：

1. overflow : hidden;
2. text-overflow: ellipsis;
3. display: -webkit-box;
4. -webkit-line-clamp: 2;
5. -webkit-box-orient: vertical;

打开本页面

 

打开外链：

var s = $(document).scrollTop()

    if (s > 200) {

        $('.zd').show();

    } else {

        $('.zd').hide();

    }

    $(document).on('scroll', function () {

        s = $(document).scrollTop()

        if (s > 200) {

            $('.zd').fadeIn(500);

        } else {

            $(".zd").fadeOut(500);

        };

    })

 

    $('.zd').click(function () {

        $('html').animate({ scrollTop:"0"}, 1000)

    })

 

 $(".home-float li").hover(function (e) {

        e.preventDefault()

        console.log($(this).index())

        $('.home-float .con').addClass('hidden')

        if ($(this).index() != '0') {

            $($('.home-float .con')[$(this).index()]).removeClass('hidden')

        }

    })

    $(".home-float .con").mouseleave(function () {

        $(".home-float .con").addClass('hidden')

    })