js和CSS3炫酷3D相册展示

<!doctype html>

<html>

<head>

<title>js和CSS3炫酷3D相册展示</title>

<style>

*{margin:0;padding:0;}

body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;};

h1{width:277;height:76px;margin:30px auto 0;}

.xc-3D{width:100%;height:300px;background:#fff;margin-top:100px;position:relative;transform-style:preserve-3D;/*转变3D*/perspective:800px;//景深}

.xc-3D img{position:absolute;-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0.1),rgba(0,0,0,0.5));transition:1s;}

.xc-3D img .forn{transform:rotateY(45deg);transfromZ(-100px);}

.xc-3D img .now{transform:rotateY(0deg);transfromZ(100px);}

.xc-3D img .last{transform:rotateY(-45deg);transfromZ(-100px);}

</style>

</head>

<body>

<h1><img src="img/logo.png" width="277" height="76" alt="潭州logo" /></h1>//h1装logo

</div>

var imgL=$(.xc-3D img).length；//代表有几个img

var lastMin=Math.floor(imgL/2);//向下取整数得到中间那个初始中间序列号

for(var i=0;i<imgL;i++){

if(i<lastMin){

$(".xc-3D img")eq(1).addClass("forn");

}else if(i>lastMin){

$(".xc-3D img")eq(1).addClass("last");

}else{

$(".xc-3D img")eq(1).addClass("now");

}

};

//控制位置

function mind(){

//浏览器宽度

var w_l=$(window).width();

var _left=w_l/2)-$(".xc-3D.now").width/2;

$(".xc-3D img.now").css({left:_left+"px"});

for(var i=0;i<imgL;i++){

//非常重要

$(".xc-3D img.now").eq(i).css(left:_left-(lastMin-i)*150+"px");

};

//把left存储起来

Left[i]=parseInt($(".xc-3D img").eq(i).css("left"));//把字符串转化为数字

}

$(.xc-3D img).click(funtion(){

//添加样式

for(var i=0;i<imgL;i++){

var nowMin=$(this).index();

if(i<nowMin){

$(".xc-3D img")eq(1).removeClass().addClass("forn");

}else if(i>nowMin){

$(".xc-3D img")eq(1).removeClass().addClass("last");

}else{

$(".xc-3D img")eq(1).removeClass.addClass("now");

};

};;

//确定位置

for(var i=0;i<imgL;i++)

Left[i]-=(nowMin-lastMin)*150;//为什么

//非常重要

$(".xc-3D img").eq(i).css({left:Left[i]+"px"});

};

lastMin=nowMin;//当前和初始值交替

})

</script>

</body>

</html>

css兼容,js兼容,渲染，底层，内核兼容

1投影

转载于:https://www.cnblogs.com/think90/p/5808753.html

js和CSS3炫酷3D相册展示相关推荐

python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构折叠面板的html结 ...
动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法在HTML文件中引入. HTML结构创建HTML结构并使 ...
❤唯美满天星❤ html+css+js炫酷3D相册(含音乐/可自定义文字)程序员表白必备
元旦节快到了,在跨年夜前夕.是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ❤元旦节表白3D相册,在元 ...
js制作的炫酷3D太阳系行星运行效果
想象着打开网页就能浏览太阳系行星的运行情况,促进我们更好的了解这个宇宙星空,于是找到了这样一段代码可以完美的实现这个功能,通过css和js就可以实现在网页上展示一个完美的太阳系行星的运行情况,效果炫酷 ...

js和CSS3炫酷3D相册展示

js和CSS3炫酷3D相册展示相关推荐

最新文章

热门文章