js和CSS3炫酷3D相册展示
<!doctype html>
<html>
<head>
<meta charset="UTF">
<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 class="xc-3D" >
<img class="forn" style="left:500px" src="img/1.jpg" width="300" height="200" alt="cctv2采访潭州教育" />
<img class="now" style="left:650px" src="img/2.jpg" width="300" height="200" alt="cctv2采访潭州教育">
<img class="" style="left:800px" src="img/3.jpg" width="300" height="200" alt="潭州VIP参观潭州大厦" />
<img src="img/4.jpg" width="300" height="200" alt="潭州夜景" />
<img src="img/5.jpg" width="300" height="200" alt="潭州教育软件集群老师" />
<img src="img/6.jpg" width="300" height="200" alt="潭州教育九周年庆" />
<img src="img/7.jpg" width="300" height="200" alt="潭州教育九周年庆" />
<img src="img/8.jpg" width="300" height="200" alt="潭州教育第二届技术峰会" />
<img src="img/9.jpg" width="300" height="200" alt="潭州教育LED灯" />
<img src="img/10.jpg" width="300" height="200" alt="潭州教育艺术老师" />
<img src="img/11.jpg" width="300" height="200" alt="潭州教育软件课程研发会" />
</div>
<script src="js/jquery.js"></script>
<script>
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投影
最新文章
- 11 Clever Methods of Overfitting and how to avoid them
- 字符串--java中判断字符串是否为数字的方法的几种方法?
- RESTful API设计指南
- CSS select样式列表-------美化列表
- 【easyui】--普通js中获取easyui中分页信息(page,pageSize等)
- document.addEventListener理解
- Python抓取单个网页中所有的PDF文档
- C++类静态成员变量和const常量的初始化方法
- Fiddler的安装设置
- Linux常用的配置文件整理
- (cljs/run-at (JSVM. :all) ";细说函数";)
- jquery中的attr()与prop()的区别
- JavaScript夯实基础系列(四):原型
- PHP之道 - php各方面的知识汇总
- lr分布式测试--笔记
- gitlab提交代码
- Docker Kubernetes Volume 网络数据卷
- 12LaTeX学习系列之---LaTex的图片插入
- java断言assert初步使用:断言开启、断言使用
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
热门文章
- Linux教程之:Nginx [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use)
- 数组:获取GET的键名
- Linux下安装部署RabbitMQ
- hdu-1247 Hat’s Words---字典树模板
- 广搜破解密码(HDU1195)
- EasyHook实用指南
- c#winform初学习
- undefined reference to &#39;dlopen&#39;;undefined reference to &#39;dlclose&#39;;undefined reference to &#39;dlerror&#39;等问题
- apache配置局域网访问
- js实现二分查找