项目总结 极客学院 2016.11.21

最新推荐文章于 2019-05-10 18:10:41 发布
最新推荐文章于 2019-05-10 18:10:41 发布
阅读量461 收藏
点赞数
分类专栏： 项目 文章标签： 项目 总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzahao/article/details/53263395
版权

项目：极客学院部分页面及友推、起点学院主页。

因为极客学院部分页面难度较低，且无特效，这里暂不评论。

起点学院主页效果图：


主要特效：


一、轮播图：

css代码：

<div class="banner_bigbox">
                <ul id="bigbox_img">
                    <li style="background: url(img/qidian/banner_1.jpg) no-repeat center;display: block;opacity: 1;filter: alpha(opacity:100);">
                        <a href="#"></a>
                    </li>
                    <li style="background: url(img/qidian/banner_2.jpg) no-repeat center;">
                        <a href="#"></a>
                    </li>
                    <li style="background: url(img/qidian/banner_3.jpg) no-repeat center;">
                        <a href="#"></a>
                    </li>
                    <li style="background: url(img/qidian/banner_4.jpg) no-repeat center;">
                        <a href="#"></a>
                    </li>
                </ul>
                <div class="arr">
                    <div id="arr_prev"></div>
                    <div id="arr_next"></div>
                </div>
                <div id="banner_button">
                    <ul>
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>



样式：

.banner_bigbox{width: 100%;height: 640px;margin: 0 auto;position: relative;overflow: hidden;}
#bigbox_img{width: 100%;height: 640px;}
#bigbox_img li{width: 100%;height: 640px;position: absolute;display: none;opacity: 0;filter: alpha(opacity:0);}
.arr{width: 1000px;height: 106px;position: absolute;top: 250px;left: 13%;}
#arr_prev{width: 60px;height: 106px;background: url(../img/qidian/arr_prev.png) no-repeat center white;border-radius: 3px;float: left;opacity: 0.3;filter: alpha(opacity:30);cursor: pointer;}
#arr_prev:hover{opacity: 0.8;filter: alpha(opacity:80);}
#arr_next{width: 60px;height: 106px;background: url(../img/qidian/arr_next.png) no-repeat center white;border-radius: 3px;float: right;opacity: 0.3;filter: alpha(opacity:30);cursor: pointer;}
#arr_next:hover{opacity: 0.8;filter: alpha(opacity:80);}
#banner_button{width: 1024px;position: absolute;left: 50%;margin-left: -512px;bottom: 20px;padding: 0 365px;}
#banner_button li{width: 60px;height: 5px;background: #FFFFFF;float: left;margin: 0 10px;opacity: 0.5;filter: alpha(opacity:50);cursor: pointer;}
#banner_button .active{opacity: 1;filter: alpha(opacity:100);}



js文件：

    var oBigbox_img = document.getElementById('bigbox_img');
    var aBig_img = oBigbox_img.getElementsByTagName('li');

    var oBigbox_btn = document.getElementById('banner_button');
    var aBig_btn = oBigbox_btn.getElementsByTagName('li');

    var oBtn_prev = document.getElementById('arr_prev');
    var oBtn_next = document.getElementById('arr_next');

    var now = 0;

    var timer = setInterval(next, 4000);

    oBigbox_btn.onmouseover = function() {
        clearInterval(timer);
    }
    oBigbox_btn.onmouseout = function() {
        timer = setInterval(next, 4000);
    }

    oBtn_prev.onclick = function() {
        now = now - 1;
        if(now < 0) {
            now = aBig_img.length - 1;
        }
        tab();
    }
    oBtn_next.onclick = function() {
        now = now + 1;
        if(now == aBig_img.length) {
            now = 0;
        }
        tab();
    }

    for(var i = 0; i < aBig_btn.length; i++) {
        aBig_btn[i].index = i;
        aBig_btn[i].onclick = function() {
            now = this.index;
            tab();
        };
    };

    function next() {
        now++;
        if(now == aBig_img.length) {
            now = 0;
        }
        tab();
    }

    function tab() {
        for(var i = 0; i < aBig_btn.length; i++) {
            aBig_btn[i].className = '';
        }
        aBig_btn[now].className = 'active';
        for(var i = 0; i < aBig_img.length; i++) {
            change(aBig_img[i], {
                opacity: 0
            },30);
            if(aBig_img[i].style.opacity == 0) {
                aBig_img[i].style.display = 'none';
            }
            aBig_img[now].style.display = 'block';
            if(aBig_img[i].style.display == 'block') {
                change(aBig_img[now], {
                    opacity: 100
                },30)
            }
        }
    }



二、无缝滚动

css代码：

<div class="student">
                <h3 class="student_title">部分优秀学员</h3>
                <div class="student_line"></div>
                <div id="student_banner">
                    <ul id="student_ul">
                        <li class="student_box">
                            <div class="student_img"><img src="img/qidian/cbl.png"/></div>
                            <div class="student_name">陈滨淋</div>
                            <div class="student_job">惠买集团产品总监</div>
                            <div class="student_l"></div>
                            <p>在起点，能与各路大神进行思维碰撞、分享，学习自己不足的，助人助己创造一个新的起点！！</p>

                        </li>

                        li*n

                    </ul>
                </div>
                <div id="arr_left"></div>
                <div id="arr_right"></div>
            </div



css样式：

.student{width: 100%;height: 667px;background-color: #FFFFFF;position: relative;}
.student_title{width: 1024px;height: 80px;line-height:80px;margin: 0 auto;text-align: center;font-size: 42px;color: #000027;font-family: "微软雅黑";font-weight: lighter;margin-top: 47px;}
.student_line{width: 100px;height: 3px;background-color: #2eab23;margin: 17px auto 40px;}
#student_banner{width: 929px;height: 389px;margin: 59px auto 0;overflow: hidden;position: relative;}
#student_banner ul{width: 3824px;height:389px;padding-top: 57px;box-sizing: border-box;position: absolute;left: 0;top: 0;}
.student_box{width: 210px;height: 330px;border: 1px solid #e9e9e9;position: relative;background-color: #f5f5f5;margin-right: 27px;float: left;}
.student_img{width: 124px;height: 124px;position: absolute;left: 47px;top: -57px;}
.student_name{width: 190px;height: 21px;line-height:21px;color: #2EAB23;font-family: "微软雅黑";font-size: 20px;text-align: center;margin: 85px auto 0;}
.student_job{width: 190px;height: 25px;line-height:25px;color: #666666;font-family: "微软雅黑";font-size: 14px;text-align: center;margin: 0 auto 0;}
.student_l{width: 190px;height: 10px;background:  url(../img/qidian/line.png) no-repeat center;margin: 17px auto;}
.student_box p{width: 190px;height: 150px;line-height:24px;color: #666666;font-family: "微软雅黑";font-size: 14px;margin: 0 auto;}
#arr_left{width: 28px;height: 50px;background: url(../img/qidian/jian_icon.png) no-repeat 0 -83px;position: absolute;left: 10%;top: 52%;cursor: pointer;}
#arr_left:hover{background: url(../img/qidian/jian_icon.png) no-repeat 0 0}
#arr_right{width: 28px;height: 50px;background: url(../img/qidian/jian_icon.png) no-repeat -75px -83px;position: absolute;left: 88%;top: 52%;cursor: pointer;}
#arr_right:hover{background: url(../img/qidian/jian_icon.png) no-repeat -75px 0}



js文件：

    var oStudent_box = document.getElementById('student_banner');
    var oStudent_ul = document.getElementById('student_ul');
    var aStudent_li = oStudent_ul.getElementsByTagName('li');
    var oBtn_left = document.getElementById('arr_left');
    var oBtn_right = document.getElementById('arr_right');
    var speed = 956;
    
    oStudent_ul.innerHTML = oStudent_ul.innerHTML+oStudent_ul.innerHTML;    
    
    oStudent_ul.style.width = (aStudent_li[0].offsetWidth+27)*aStudent_li.length+'px';
    
    timer2=setInterval(next2,5000);
    
    function next2(){
        if(oStudent_ul.offsetLeft<=-oStudent_ul.offsetWidth/2 && speed == -956){
            oStudent_ul.style.left='0px';
        }
        else if(oStudent_ul.offsetLeft>=0 && speed == 956){
            oStudent_ul.style.left=-oStudent_ul.offsetWidth/2+'px';
        }
        change(oStudent_ul,{left:oStudent_ul.offsetLeft+speed},30);
    }
    
    oBtn_left.οnclick=function(){
        if(oStudent_ul.offsetLeft % 956 == 0){
            speed = 956;
            clearInterval(timer2);
            next2();
            timer2=setInterval(next2,5000);
        }
    }
    oBtn_right.οnclick=function(){
        if(oStudent_ul.offsetLeft % 956 == 0){
            speed = -956;
            clearInterval(timer2);
            next2();
            timer2=setInterval(next2,5000);
        }
    }


三、缓慢回到顶部特效

css代码：

<div class="sidebar">
            <ul>
                <li>Lisa</li>
                <li>Zooey</li>
                <li>Mary</li>
                <li>Liya</li>
                <li>小雪</li>
                <li>Simon</li>
                <p id="to_top"></p>
            </ul>
        </div>



css样式：

.sidebar{width: 58px;height: auto;position: fixed;right: 40px;top: 150px;z-index: 9999;}
.sidebar li{width:58px;height:58px;line-height:83px;text-align:center;color:#ffffff;font-family:"微软雅黑";font-size:12px;background: url(../img/qidian/sidebar_qq.png) no-repeat;margin-bottom: 4px;cursor: pointer;float: left;}
.sidebar li:hover{background: url(../img/qidian/sidebar_qq_a.png)}
.sidebar p{width:58px;height:58px;background: url(../img/qidian/sidebar_arr.png) no-repeat;cursor: pointer;opacity: 0;filter: alpha(opacity:0);float: left;}
.sidebar p:hover{background: url(../img/qidian/sidebar_arr_a.png)}



js文件：

var oTo_top = document.getElementById('to_top');
    var timer3 = null;

    oTo_top.οnclick=function(){
        timer3=setInterval(function(){
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            var speed = Math.ceil(scrolltop/15);
            if(scrolltop==0){
                clearInterval(timer3);
            }
            document.documentElement.scrollTop = document.body.scrollTop=scrolltop-speed;
        },10)
    }




难点：

无缝滚动使用了自写的原生JS，所以在动画执行时同时点击按钮会导致计时器清空，从而使运动距离不在两端超出距离。


解决方法：

使用JQ插件或者写一个开关，判断动画是否完成，完成时点击按钮才能移动UL的位置。




友推主页效果图：


主要特效：


一、：

css代码：

<div class="feature">
                <div id="feature_box">
                    <span>
                        <div>
                            <img src="img/youtui/function1.png"/>
                            <h4>轻巧</h4>
                            <h4>light</h4>
                            <p>集成后安装包大小增加不到200k</p>
                        </div>
                    </span>
                    <span>
                        <div>
                            <img src="img/youtui/function2.png"/>
                            <h4>开源</h4>
                            <h4>open</h4>
                            <p>源代码开放，随时按需修改</p>
                        </div>
                    </span>
                    <span>
                        <div>
                            <img src="img/youtui/function3.png"/>
                            <h4>多模板</h4>
                            <h4>mutil-suit</h4>
                            <p>提供多套分享模板、图标素材</p>
                        </div>
                    </span>
                    <span>
                        <div>
                            <img src="img/youtui/function4.png"/>
                            <h4>多维度统计</h4>
                            <h4>statistics</h4>
                            <p>用户属性、行为、效果、一目了然</p>
                        </div>
                    </span>
                </div>
            </div>



样式：

.feature{width: 100%;height: 238px;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;}
#feature_box{width: 1350px;height: 150px;line-height: 141px;margin: 40px auto 40px;}
#feature_box span{width: 0px;height: 150px;margin-top: 15px;float: left;}
#feature_box div{width: 330px;height: 150px;overflow: hidden;display: block;}
#feature_box img{width: 135px;float: left;}
#feature_box h4{width:100px;height: 20px;line-height: 20px;color: #787878;font-family: "微软雅黑";font-size: 20px;font-weight:lighter;margin-top: 10px;float: left;}
#feature_box p{width:180px;height:40px;line-height:40px;color: #969696;font-family: "微软雅黑";font-size: 12px;margin-top:20px;float: left;}



js文件：

window.οnscrοll=function(){
    //特点与回到顶部特效
    var oBox=document.getElementById('feature_box');
    var aSpan=oBox.getElementsByTagName('span');
    
    var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
    if(scrolltop>300){
        for(i=0;i<aSpan.length;i++){
                aSpan[i].style.display='block';
                change(aSpan[i],{width:330},30);
        }
    }
    else if(scrolltop<300){
        for(i=0;i<aSpan.length;i++){
                aSpan[i].style.display='none';
                change(aSpan[i],{width:0},30);
        }
    }
}



二、无缝滚动

css代码：

<div class="banner">
                <div id="banner_img">
                    <div class="banner_box">
                        <img src="img/youtui/bokeyuan.png"/>
                        <p>博客园</p>
                    </div>
                    div*n
                </div>
                <div class="empty"></div>
                <div id="banner_button">
                    <div class="banner_btn">
                        <span style="opacity: 1; filter: alpha(opacity:100);"></span>
                    </div>
                    <div class="banner_btn">
                        <span></span>
                    </div>
                    <div class="banner_btn">
                        <span></span>
                    </div>
                    <div class="banner_btn">
                        <span></span>
                    </div>
                </div>
            </div>



css样式：

.banner{width: 900px;height: 122px;margin: 0 auto 78px;position: relative;overflow: hidden;}
#banner_img{width: 3840px;height: 92px;position: absolute;left: 0px;top: 0px;}
.banner_box{width: 60px;height: 92;margin-right: 60px;float: left;}
.banner_box img{width: 60px;margin-bottom: 14px;}
.banner_box p{color: #333333;font-family: "微软雅黑";font-size: 11px;font-weight: bold;text-align: center;margin: 0 -20px;}
.empty{height: 0;width: 0;}
#banner_button{width: 56px;height: 10px;margin: 112px auto 0}
.banner_btn{width: 10px;height: 10px;background: url(../img/youtui/yuanquan.png) no-repeat;border-radius: 5px;float: left;margin-right: 4px;cursor: pointer;}
.banner_btn span{width: 10px;height: 10px;border-radius: 5px;display: block;opacity: 0;filter: alpha(opacity:0);background: url(../img/youtui/yuanquan1.png) no-repeat;}



js文件：

    var oBanner=document.getElementById('banner_img');
    var oButton=document.getElementById('banner_button');
    var aBtn=oButton.getElementsByTagName('span');

    var timer=setInterval(next,4000);
    
    var now=0;
    
    for(i=0;i<aBtn.length;i++){
        aBtn[i].index=i;
        aBtn[i].οnclick=function(){
            now=this.index;
            tab();
        }
    }
    
    function tab(){
        for(i=0;i<aBtn.length;i++){
            change(aBtn[i],{opacity:0},30);
        }
        change(aBtn[now],{opacity:100},30);
        
        change(oBanner,{left:now*-960},30)
    }
                
    function next(){
        now++;
        if(now==aBtn.length){
            now=0;
        }
        tab();
    }
                    
    oBanner.οnmοuseοver=function(){
        clearInterval(timer);
    }
    oBanner.οnmοuseοut=function(){
        timer=setInterval(next,4000);
    }




难点：

展开处原网站效果为从中间放大式的展开。即CSS的transition属性。


解决方法：

使用了JS的改变盒子宽度去解决





附上JS中使用的change函数的js样式：

function getstyle(obj, name) {
    if(obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

function change(obj, json,time,fn) {
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function() {
        //                    var at=parseInt(getstyle(obj,att));
    var stop=true;
    
    for(var i in json){
        var at = 0;
        
        if(i == 'opacity') {
            at = Math.round(parseFloat(getstyle(obj, i)) * 100);
        } else {
            at = parseInt(getstyle(obj, i));
        }
        var speed = (json[i] - at) / 15;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(at != json[i]){
            stop=false;
        }
//        obj.style[att]=at+speed+'px';
        if(i == 'opacity') {
            obj.style[i] = (at + speed) / 100;
            obj.style.filter = 'alpha(opacity:' + (at + speed) + ')';
        } else {
            obj.style[i] = at + speed + 'px';
        }
    }
    if(stop){
        clearInterval(obj.timer);
        if(fn){fn()};
    }
    }, time)
}

dzahao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序-极客学院.zip
04-14
微信小程序-极客学院.zip，小程序模板代码，基于微信小程序的在线免费小说的开发。，可以直接从源码里粘贴复制过来，虽然这样做不利于自己独立编写代码。
仿3D效果的图片轮播
九天翔龙的技术博客
06-10 1909
在网上看到了一个仿3D的轮播效果。很有意思，就模仿做了一下。 原示例可以参考http://www.jq22.com/jquery-info20579 jq22这个例子是用jQuery写的。我这里就用原生态JS写一次。采用面向对象的思路来写。 整体思路就是： 1、结合CSS3实现两边图片的倾斜和图片轮转的动画 2、JS只负责增加和删除类。 从“顶部”看这个轮播图，示例如下：分别用...
jQuery自适应-3D旋转轮播图
weixin_34186931的博客
10-17 828
3D旋转轮播图 本例源于（站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm） 其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html） 自己研究重写了一遍。 一、先写静态的初始样式的css和html。我用的是 550x300的大小一致的 5张图片，代码可拓展为三张、四张、甚至...
3D版图片轮播--滑动轮播
impossible1994727的博客
12-12 3750
这个是用了3张图，来回滑动，类似一个圆圈（不晓得这个 怎么上动图啊！！！！） 图就是这么个图，但是他是可以滑动的（不好描述啊！！） 贴代码比较方便。。。 &lt;div class="banner"&gt; &lt;div class="banner_li left"&gt; &lt;img src="2.jpg" /&gt; &lt;/div&gt;
微信小程序3D轮播图实现
热门推荐
wcsandlili的博客
09-17 1万+
好久没有写博客了，前段时间换了家公司，做了两个多星期，完成了一款app的开发， 公司没有app的需求了，我们几个移动端Android和IOS都转岗开发微信小程序，由于刚接触小程序不到两周，技术还是基于复制粘贴，h5以前也就看看，所以针对css样式和div之类的没有什么感觉，基本一切从0开始，好了，扯淡完毕-----------------------------------------------...
2017年极客学院大数据工程师全套 视频 代码 课件
qq_38473647的博客
07-19 2641
课程内容】 第1章：走进大数据Hadoop框架的世界 01、Hadoop概述 02、Hadoop架构介绍 03、Yarn的发展背景及基本原理 04、安装HadoopYARN 第2章：用户行为分析项目 01、Hadoop用户行为分析项目之应用概述 02、Hadoop用户行为分析项目之分析与设计 03、Hadoop用户行为分析项目之编码实践 第3章：调优 01、Had
Python极客项目编程.zip
10-25
Python极客项目编程
基于java开发的极客学院小程序.zip
03-29
基于java开发的极客学院小程序
Python极客项目编程.pptx
10-13
Python极客项目编程.pptx
bootstrap极客学院下.
07-27
bootstrap极客学院下.
2019最新极客学院Android开发工程师项目实战分享(完整)
xx123456978的博客
05-10 2544
课程目录：第1阶段-环境搭建 -- 1.Android开发环境与SDK -- 2.Android L最新版本开发环境搭建 -- 3.Android Studio集成开发环境的安装、配置与使用 -- 4.Intel Atom Android模拟器的安装与配置 -- 5.Android应用程序的打包与发布 第2阶段-Java基础 -- 1.计算机进制转换二进制、八进制、十进制、十六进制互...
infrared-remote-candroid studiodemo
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
05-05
基于matlab实现的用于应用布格重力异常数据反演地下异常密度体.rar
node-v8.10.0-linux-x64.tar.xz
最新发布
05-05
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于Yolov5目标检测和deepsort目标跟踪无人机跟踪.zip
05-05
无人机最强算法源码，易于部署和学习交流使用
数据库课程设计实战.zip
05-05
数据库课程设计后端 使用Springboot + Mybatis + Redis + Maven 数据库课程设计实战.zip，使用到了所有的相关SQL 的操作，如增删改查等，让你可以在一个项目里面，锻炼到所有的数据库相关的知识。项目亲测可以运行，里面含有运行相关的文档，不会的可以丝我请求帮助。 数据库课程设计后端 使用Springboot + Mybatis + Redis + Maven 具体的表和相关的数据如下： 用户（电话号码，密码，身份证号，邮箱，真实姓名，用户类型，性别，地址） 乘客（用户电话号码，乘客身份证号，乘客真实姓名，乘客电话号码，乘客类型，地址） 列车信息（列车编号，车次，列车类型，列车车厢数，列车始发站，列车终点站，列车开车时间，列车到达时间，列车到达日期，列车运行时间，列车状态） 列车座位信息（列车编号，车厢号，座位类型，座位数） 列车经停信息（列车编号，车次，车站编号，车站名，到达时间，总运行时间，开车时间） 订单信息（订单编号，用户电话号码，乘客身份证号码，列车编号，出发站编号，到达站编号，车厢号，座位编号，订单创建时间，订单状态，开车时间）
咨询的分析方法gl.ppt
05-05
咨询的分析方法gl.ppt
基于three.js的开源项目
08-15
基于Three.js的开源项目有许多，其中一个知名的项目是Gio.js。Gio.js是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js，开发者可以快速地创建自定义的Web3D数据可视化模型，并将其作为一个组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值