前端开发学习笔记六

Create at 2015 01 135 min read技术学习笔记JavaScript

前言

终于搞定了一个电商整站临摹,共四张页面,实现了基本的交互功能,同时也应用了less这个新学的css预处理语言。之前也做过一个电商首页点这儿。但是因为只是单页面,处理起来比较简单。但是在制作这个整站的过程中,更加深刻的理解一些之前学过的内容:比如样式结构的分离,js设计时的分层思想等。点击这里查看网页效果,或者下面有效果图(图好丑):

效果图

结构

首先说结构,拿到设计图时,先要进行分析。比如这四张页面,是典型的上中下结构,其除了中间正文部分,头部和脚部都是完全一样的,而且除了

前端开发学习笔记五

Create at 2015 01 012 min read技术学习笔记JavaScriptCSS3

幽灵按钮最近很流行,就寻思着做了一个,它有如下一些效果。 5-1

其中按钮上的线条和图标的旋转完全用CSS3中的transtiontransform来实现,其中图标的旋转效果实现过程如下:

.link .img{
    display: block;
    width:180px;
    height:180px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s cubic-bezier(0, .18, 0, .97);    //为了兼容chrome和Safari
    transition:all 0.5s cubic-bezier(0, .18, 0, .97);        //定义动画属性,包括要变化的属性,时间,以及变化曲线(linear、ease、ease-out或者自定义等)
}

前端开发学习笔记四

Create at 2014 12 311 min read技术学习笔记JavaScript

固定导航栏根据页面滚动条距离来自动定位的效果,其中心思想就是通过判定当前滚动条的值与页面中相应内容值大小的关系来选择。js 代码如下(用到了 jQuery 库):

    $(document).ready(function () {
        $(window).scroll(function () {
            var top = $(window).scrollTop();
            var menu = $("#menu");
            var items = $("#content").find(".item");
            //滚动条发生滚动时,要获取相应的值。
            var currentId = "";
            //让导航菜单实现在滚动条滚动的时候自动设置焦点
            items.each(function () {
                var This = $(this);
                va

前端开发学习笔记二

Create at 2014 12 254 min read技术学习笔记JavaScript

前几天把之前做的购物网页的 js 效果写了出来。

如图所示,分别为以下几个效果:

  • 搜索按钮的文字效果
  • 轮播图
  • 模拟下拉菜单
  • 鼠标点击按钮,图片进行左右滚动 2-1

在学习过程中,思想很重要。写一个效果之前,现对其进行设计,然后分析,最后再实现。

比如很简单的一个轮播图,让图片淡入淡出的切换。它的原理就是,先让所有的图片淡出,然后让当前要显示的图片淡入就可以了。理解了它的工作原理,写起来就很简单了。

 shop.app.Banner=function(){            //Banner轮播图效果
     var ad=document.getElementById("ad");
     var ul=ad.getElementsByTagName("ul")[0];
     var li=ul.getElement