前端开发学习笔记六
Create at 2015 01 13 • 5 min read • 技术 • 学习笔记JavaScript
Create at 2015 01 13 • 5 min read • 技术 • 学习笔记JavaScript
Create at 2015 01 01 • 2 min read • 技术 • 学习笔记JavaScriptCSS3
幽灵按钮最近很流行,就寻思着做了一个,它有如下一些效果。
其中按钮上的线条和图标的旋转完全用CSS3
中的transtion
和transform
来实现,其中图标的旋转效果实现过程如下:
.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 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
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