jquery.abScrollBars实现页面内模拟滚动条效果代码

代码语言:html

所属分类:加载滚动

代码描述:页面内模拟滚动条

代码标签: jquery.abScrollBars 页面 模拟 滚动条

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <style type="text/css">
        *{margin:0;padding:0}body{background:#0c91e8;font-size:12px;color:#333}ul,li{list-style:none}p{word-wrap:break-word}img{border:0;vertical-align:middle}a{color:#eef7fe;text-decoration:none}a:hover{color:#fff;text-decoration:none}
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.abScrollBar-v1.2.min.js"></script>
</head>

<body>
    <div style="text-align:center;padding:100px 0 150px 0;">
        <div class="logo z">
            <h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="HttP://www.bootstrapmb.com" title="abScrollBar v1.0" target="_blank">abScrollBar</a></h2>
            <p style="font-size:13px;font-style:italic;color:#ddf0fb;">页面内模拟滚动条 v1.2</p>
        </div>
    </div>
    <style type="text/css">
        .abScrollBar-main{width:320px;height:465px;margin:0 auto;background:#fff;border:1px solid #fff;border-radius:30px}.abScrollBar-box{width:320px;height:400px;margin:30px 0 0 0;background:#fff;overflow:hidden;position:relative}.abScrollBar-box .content{color:#555;padding:0 30px}.abScrollBar-box .content p{line-height:24px;font-size:14px;padding:15px 0;text-indent:2em;border-bottom:1px solid #f5f5f5}.abScrollBar-box .bar-bg{background:#fafafa}.abScrollBar-box .bar{background:#4ad585}
    </style>
    <div class="abScrollBar-main">
        <div class="abScrollBar-box">
            <div class="content">
                <p style="color:#4ad585; font-size:15px; font-style:italic; font-weight:bold;">鼠标放这里上下滚动试试</p>
                <p>以下内容仅为测试滚动条效果</p>
                <p>为什么芯片设计需要很长时间?能不能加速芯片设计周期?能否在几天或几周之内完成芯片的设计?这是一个非常有野心的目标。过去十年,机器学习的发展离不开系统和硬件的进步,现在机器学习正在促使系统和硬件发生变革。</p>
                <p>Google在这个领域已率先出发。在第58届DAC大会上,Google AI负责人Jeff Dean分享了《机器学习在硬件设计中的潜力》,他介绍了神经网络发展的黄金十年,机器学习如何影响计算机硬件设计以及如何通过机器学习解决硬件设计中的难题,并展望了硬件设计的发展方向。 </p>
                <p>他的演讲重点在于Google如何使用机器学习优化芯片设计流程,这主要包括架构搜索和RTL综合、验证、布局与布线(Placement and routing)三大阶段。在架构搜索阶段,Google提出了FAST架构自动优化硬件加速器的设计,而在验证阶段,他们认为使用深度表示学习可提升验证效率,在布局与布线阶段,则主要采用了强化学习技术进行优化。</p>
                <p>制造出像人一样智能的计算机一直是人工智能研究人员的梦想。而机器学习是人工智能研究的一个子集,它正在取得很多进步。现在大家普遍认为,通过编程让计算机变得“聪明”到能观察世界并理解其含义,比直接将大量知识手动编码到人工智能系统中更容易。</p>
                <p>神经网络技术是一种非常重要的机器学习技术。神经网络一词出现于1980年代左右,是计算机科学术语中一个相当古老的概念。虽然它当时并没有真正产生巨大的影响,但有些人坚信这是正确的抽象。 </p>
                <p>本科时,我写了一篇关于神经网络并行训练的论文,我认为如果可以使用64个处理器而不是一个处理器来训练神经网络,那就太棒了。然而事实证明,我们需要大约100万倍的算力才能让它真正做好工作。</p>
                <p>不同于传统的CPU和GPU架构,Groq从头设计了一个张量流处理器(TSP) 架构, 以加速人工智能、机器学习和高性能计算中的复杂工作负载。这个架构不是开发小型可编程内核并对其进行数百次复制,而是容纳一个具有数百个功能单元的单个处理器。</p>
                <p>10月6日,大巴黎欧冠对阵本菲卡。赛前有两件事。第一件事就是C罗同胞即葡萄牙人中有大量球迷围在大巴黎入住的酒店,并且高喊梅西的名字。梅西征服了C罗同胞,跟他征服任何球迷群体一样,毫不费劲。第二件事发生在英国直播间,利物浦名宿卡拉格赛前进行分析,却把话题引到国家队。这位不爽C罗的利物浦名宿,再次表态梅西是历史第一人,并且希望阿根廷和梅西在世界杯夺冠。</p>
                <p>要知道,卡拉格可是英国人,跟他有关的英格兰队进了世界杯,而且被视为夺冠大热门,在已经准了两届的大数据预测中,得到一个被阿根廷在决赛中击败的名额,也进了去年欧洲杯决赛,实力还是非常不错的。然而,卡拉格却放弃提名自己的英格兰队,选择了梅西的阿根廷队,作为他认为是世界杯冠军候选。</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){abScrollBar({scrollType:"y",contentEl:".content",barClass:"bar",barBgClass:"bar-bg",width:320,height:400,barWidth:10,isHideBar:true,mousewheelStep:30})});
    </script>
    <div style="height:100px;"></div>
    <style type="text/css">
        .abScrollBar-main2{width:620px;height:125px;margin:0 auto;background:#fff;border:1px solid #fff;border-radius:30px}.abScrollBar-box2{width:560px;height:65px;padding:30px;background:#fff;overflow:hidden;position:relative;border-radius:30px}.abScrollBar-box2 .content2{color:#555}.abScrollBar-box2 .content2 p{float:left;line-height:24px;font-size:14px;padding:15px;border-bottom:1px solid #f5f5f5}.abScrollBar-box2 .bar2-bg{background:#fafafa}.abScrollBar-box2 .bar2{background:#4ad585}
    </style>
    <div class="abScrollBar-main2">
        <div class="abScrollBar-box2">
            <div class="content2">
                <p style="color:#4ad585; font-size:15px; font-style:italic; font-weight:bold;">鼠标放这里上下滚动试试</p>
                <p>以下内容仅为测试滚动条效果</p>
                <p>为什么芯片设计需要很长时间?能不能加速芯片设计周期?能否在几天或几周之内完成芯片的设计?这是一个非常有野心的目标。过去十年,机器学习的发展离不开系统和硬件的进步,现在机器学习正在促使系统和硬件发生变革。</p>
                <p>Google在这个领域已率先出发。在第58届DAC大会上,Google AI负责人Jeff Dean分享了《机器学习在硬件设计中的潜力》,他介绍了神经网络发展的黄金十年,机器学习如何影响计算机硬件设计以及如何通过机器学习解决硬件设计中的难题,并展望了硬件设计的发展方向。 </p>
                <p>他的演讲重点在于Google如何使用机器学习优化芯片设计流程,这主要包括架构搜索和RTL综合、验证、布局与布线(Placement and routing)三大阶段。在架构搜索阶段,Google提出了FAST架构自动优化硬件加速器的设计,而在验证阶段,他们认为使用深度表示学习可提升验证效率,在布局与布线阶段,则主要采用了强化学习技术进行优化。</p>
                <p>制造出像人一样智能的计算机一直是人工智能研究人员的梦想。而机器学习是人工智能研究的一个子集,它正在取得很多进步。现在大家普遍认为,通过编程让计算机变得“聪明”到能观察世界并理解其含义,比直接将大量知识手动编码到人工智能系统中更容易。</p>
                <p>神经网络技术是一种非常重要的机器学习技术。神经网络一词出现于1980年代左右,是计算机科学术语中一个相当古老的概念。虽然它当时并没有真正产生巨大的影响,但有些人坚信这是正确的抽象。 </p>
                <p>本科时,我写了一篇关于神经网络并行训练的论文,我认为如果可以使用64个处理器而不是一个处理器来训练神经网络,那就太棒了。然而事实证明,我们需要大约100万倍的算力才能让它真正做好工作。</p>
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0