完成原生JavaScript+css+html之海报画廊笔记

终于跟着老师的脚步完成了初步的海报画廊。。。感觉代码不难就是逻辑好绕。。。有时候真觉得混乱脑袋里乱七八糟的东西搅在一起代码这有一点问题那有一点问题。。。还是基本功不扎实。。。经过几天折腾在老师思路领导下总算是完成了。。。以后还要好好完善完善。。。下面记录一些代码中css和js的重点

CSS

1.perspective属性

perspective 是 CSS3 属性，目前浏览器都不支持 perspective 属性，Chrome 和 Safari 支持替代的 -webkit-perspective 属性。perspective 属性定义 3D 元素距视图的距离，以像素计，其值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身，perspective 属性只影响 3D 转换元素与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置

perspective: number | none;
number：元素距离视图的距离，以像素计(px 可以不写)
none：默认值，与 0 相同，不设置透视

在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。他们不同的地方是：perspective用在舞台元素上（变形元素们的共同父元素）；perspective()就是用在当前变形元素上，并且可以与其他的transform函数一起使用。例如，我们可以把：..stage {perspective: 600px;} 写成 .stage .box {transform: perspective(600px);} perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间

具体图例可以看http://www.jscode.cn/web/v74937

2.transition属性

IE 10、Firefox、Opera 和 Chrome 支持 transition 属性，Safari 支持替代的 -webkit-transition 属性 Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性

transition 属性是一个简写属性(默认值：all 0 ease 0)，用于设置四个过渡属性：
transition-property，定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔；all 则所有属性都将获得过渡效果
transition-duration，规定完成过渡效果需要多少秒或毫秒，必须始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
transition-timing-function，规定速度效果的速度曲线(linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n))
transition-delay，定义过渡效果何时开始

具体图例可以看http://www.cnblogs.com/cocowool/archive/2012/07/23/2605600.html

3.backface-visibility 属性

IE 10+ 和 Firefox 支持 backface-visibility 属性，Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性

backface-visibility 属性定义当元素不面向屏幕时是否可见
backface-visibility: visible | hidden
visible：背面是可见的
hidden：背面是不可见的

具体图例可以看http://www.w3school.com.cn/cssref/pr_backface-visibility.asp

4.transform属性

IE 10、Firefox、Opera 支持 transform 属性，IE 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换），Opera 只支持 2D 转换

如果有多个变换函数的时候，以空格分开
none: 表示不进行变换
rotate：旋转。rotate(<angle>) ：通过指定的角度参数对原元素指定一个 2D rotation，需先有 transform-origin 属性的定义
scale：缩放。元素的缩放中心点是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小；
scale(x,y)使元素水平方向和垂直方向同时缩放；如果第二个参数未提供，则取与第一个参数一样的值；
scaleX(x)元素仅水平方向缩放；scaleY(y)元素仅垂直方向缩放；其中 x, y 为数字
skew：扭曲。默认以元素中心为基点，也可以通过transform-origin来改变元素的基点位置；
skew(x,y)使元素在水平和垂直方向同时扭曲，如果没有设置第二个参数，那么Y轴为0deg；
skewX(x)仅使元素在水平方向扭曲变形；skewY(y)仅使元素在垂直方向扭曲变形，其中 x, y 为角度
translate：移动。移动物体时基点默认为元素中心点，也可以根据 transform-origin 进行改变基点；
translate(x,y)水平方向和垂直方向同时移动，如果第二个参数未提供，则以 0 作为其值；
translateX(x)仅水平方向移动；translateY(y)仅垂直方向移动；其中 x, y 为像素值
matrix：矩阵。

transform-origin: x-axis y-axis z-axis; 设置旋转元素的基点位置

x-axis：定义视图被置于 X 轴的何处。可能的值：left | center | right | length | %

y-axis：定义视图被置于 Y 轴的何处。可能的值：top | center | bottom | length | %

z-axis：定义视图被置于 Z 轴的何处。可能的值：length

具体图例参考：http://www.w3cplus.com/content/css3-transform/

5.transform-style:preserve-3d

IE不支持，Firefox 支持 transform-style 属性，Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
transform-style: flat | preserve-3d
flat: 子元素将不保留其 3D 位置
preserve-3d: 子元素将保留其 3D 位置
一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素
更多参考：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

javascript

1.访问对象属性

photo.style['transform'] = photo.style['-webkit-transform'] = 'rotate(' + random([-150, 150]) + 'deg) scale(0.8)';相当于photo.style.transform='rotate(' + random([-150, 150]) + 'deg) scale(1)';

function g(selector){
var method=selector.substr(0,1)=='.'?'getElementsByClassName':'getElementById';
return document[method](selector.substr(1));
}

一般来说，访问对象属性时使用的都是点表示法，不过，在 JavaScript 中也可以使用方括号表示法来访问对象的属性。在使用方括号语法时，应该将要访问的属性以字符串的形式放在方括号中，如下面的例子所示:
alert(person["name"]); //"Nicholas"
alert(person.name); //"Nicholas"
方括号语法的主要优点是可以通过变量来访问属性，如果属性名中包含会导致语法错误的字符，或者属性名使用的是关键字或保留字，也可以使用方括号表示法。例如：
person["first name"] = "Nicholas";
通常，除非必须使用变量来访问属性，否则建议使用点表示法。

2.split和join方法

var n=elem.id.split('_')[1] （id是photo_n 字符串变为数组取到n）

html.push('<div class="nav">'+nav.join('')+'</div>'); （数组化为字符串默认为逗号连接所以要加引号表示不用逗号）

我之前文章有详细说 http://blog.csdn.net/heyue_99/article/details/52076946

3.test()方法

if(/photo_front/.test(cls)){ //cls中是否存在photo_front
cls=cls.replace(/photo_front/,'photo_back'); //不能直接传值会覆盖原有的className 要替换
//将按钮图标的样式也改变
g('#nav_'+n).className+=' i_back '; //同时处理控制按钮
}

test() 方法用于检测一个字符串是否匹配某个模式.

详见 http://www.w3school.com.cn/jsref/jsref_test_regexp.asp

4.replace()方法

replace方法是属于String对象的，可用于替换字符串。

var oHtml=temp.replace('{index}',s)

.replace('{image}',data[s].src)

.replace('{caption}',data[s].caption)

.replace('{desc}',data[s].desc);

cls=cls.replace(/photo_front/,'photo_back');

StringObject.replace(searchValue,replaceValue)

StringObject: 字符串

searchValue：字符串或正则表达式

replaceValue: 字符串或者函数

replace()方法可连续使用

详见http://blog.jobbole.com/50906/

5.substr()方法

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。不会改变原字符串。

function g(selector){
var method=selector.substr(0,1)=='.'?'getElementsByClassName':'getElementById';
return document[method](selector.substr(1));
}

又如

str='happy day' //"happy day"
str.substr(2,2) //"pp"
str //"happy day"

详见 http://www.w3school.com.cn/jsref/jsref_substr.asp

6.splice()方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组,返回删除的数据

photo_left=photo.splice(0,Math.ceil(photo.length/2));

又如

arr=[1,2,3,4,5,6] //[1, 2, 3, 4, 5, 6]
arr.splice(1,2) //[2, 3]
arr //[1, 4, 5, 6]

详见 http://www.w3school.com.cn/jsref/jsref_splice.asp

完成原生JavaScript+css+html之海报画廊笔记相关推荐

JavaScript + CSS3 实现的海报画廊特效
原文:JavaScript + CSS3 实现的海报画廊特效这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解 ...
原生Javascript 操作 css类名 - 踩坑篇
文章目录原生Javascript 操作 css类名效果图示下: 案例 · 代码如下: 重要代码提示: 其他无关参考: 官方参考: 原生Javascript 操作 css类名不建议用 .class ...
原生JavaScript对CSS进行格式化和压缩
全是正则表达式测试地址:http://jsfiddle.net/dtdxrk/AX5wN/embedded/result/ 1 <!DOCTYPE> 2 <HTMLxmlns=&q ...
阴阳师项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1.4 font 1.2 HTML ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
小兔鲜项目网站首页(动态网页）原生HTML+CSS+Javascript
目录 1. 项目搭建 1.1 在项目开始之前,先做好准备工作,创建这样的文件目录,git和vscode直接忽略. 1.1.1 css文件夹 1.1.2 images文件 1.1.3 js文件 1.1. ...
如何使用js实现电影海报画廊特效？
js实现电影海报画廊特效特效需求: 加载页面依次自动播放下一张海报点击向前按钮,移动到钱一张海报点击向后按钮,移动到后一张海报点击底部圆点按钮,移动到对应的海报所用重点函数/方法/语句(部分 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...

完成原生JavaScript+css+html之海报画廊笔记

完成原生JavaScript+css+html之海报画廊笔记相关推荐

最新文章

热门文章