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

最新推荐文章于 2022-12-16 07:57:14 发布

南太平洋_99

最新推荐文章于 2022-12-16 07:57:14 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/heyue_99/article/details/52280742

版权

终于跟着老师的脚步完成了初步的海报画廊。。。感觉代码不难就是逻辑好绕。。。有时候真觉得混乱脑袋里乱七八糟的东西搅在一起代码这有一点问题那有一点问题。。。还是基本功不扎实。。。经过几天折腾在老师思路领导下总算是完成了。。。以后还要好好完善完善。。。下面记录一些代码中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：字符串或正则表达式