抹桥的博客

前端开发学习笔记四

Create at 2014 12 31 • 1 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

Read more

`前端开发学习笔记三`

Create at 2014 12 26 • 1 min read • 技术 • 学习笔记工具

把慕课的首页临摹了一下，感觉还不错。


顺便推荐一个前端编辑器，Adobe 出的 Brackets，可以实时预览，再也不用老是切换加 f5 了，可以极大的提高编写速度。

下载地址：
http://brackets.io/

Read more

`前端开发学习笔记二`

Create at 2014 12 25 • 4 min read • 技术 • 学习笔记JavaScript

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


如图所示，分别为以下几个效果：

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


在学习过程中，思想很重要。写一个效果之前，现对其进行设计，然后分析，最后再实现。
比如很简单的一个轮播图，让图片淡入淡出的切换。它的原理就是，先让所有的图片淡出，然后让当前要显示的图片淡入就可以了。理解了它的工作原理，写起来就很简单了。
 shop.app.Banner=function(){            //Banner轮播图效果
     var ad=document.getElementById("ad");
     var ul=ad.getElementsByTagName("ul")[0];
     var li=ul.getElement

Read more

`前端开发学习笔记一`

Create at 2014 12 11 • 2 min read • 技术 • 学习笔记

刚刚花了点时间学完 html 和 css，同时粗略的看了一点 javascript。于是看了一遍教程后，就动手做了下面这个页面。（这是原效果图）



其中有些问题，比如教程中的一些圆角按钮，是用一个三层嵌套然类似<ahref=''><strong><span>HOME</span></strong></a>后分别给每个标签设置背景图片来实现。
感觉有点得不偿失，其实完全可以用border-radius加上一个平铺背景来实现，即简单代码看起来又清爽，而且符合 html 的语义化:
<a>HOME</a>，然后只需要在 css 中设置a{border-radius:5px}，就可以了。
实现图如下：
<

Read more