<!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投影

js和CSS3炫酷3D相册展示的更多相关文章

  1. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  2. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  3. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  4. 超酷3D照片展示效果

    @{ Layout = null; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...

  5. 为你的WordPress博客添加CSS3炫酷读者墙

    为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶 ...

  6. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  7. 3d相册展示

    示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  8. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  9. Css3炫酷总结使用

    先从CSS3的选择器说起: E F:所有的子孙元素: E>F: E中的子元素: E+F:E元素之后的最近的选择器: E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括) att ...

随机推荐

  1. 给网站添加图标： Font Awesome

    先贴上各种图标的网址:https://fontawesome.com/?from=io 1.打开网址,我们可以看到: 像我这种英语不好的,直接用谷歌浏览器进行翻译中文好了,自己还是有点B数的····· ...

  2. zendstudio 汉化

    http://archive.eclipse.org/technology/babel/index.php http://www.eclipse.org/babel/downloads.php 注册码 ...

  3. DataGrid 样式

    <SolidColorBrush x:Key="OutsideFontColor" Color="#FF000000" /> <LinearG ...

  4. webpack整体了解

    一.下载 新建一个文件夹,在cmd中npm init->npm install->npm install webpack --save-dev 下载完成之后,新建一个webpack.con ...

  5. cs231n 17-18 assignment2 出现 No module named 'past' 解决方法

    解决方法: pip install future

  6. 寄生组合式继承 js

    寄生组合式继承是集寄生式继承和组合继承的优点于一身,是基于类型继承最有效的方式 function object(o){ function F(){}; F.prototype = o; return ...

  7. ArcGIS License Server Administrator 10.2 无法启动许可的解决办法

    刚刚重装了电脑,安装ArcGIS的时候,安装完desktop之后又安装了License Manager,结果把破解文件替换完之后,发现ArcGIS License Server Administrat ...

  8. [Pytorch] pytorch笔记 <一>

    pytorch笔记 - torchvision.utils.make_grid torchvision.utils.make_grid torchvision.utils.make_grid(tens ...

  9. 2018.9.9 Tomcat是怎样运行的

    一. Servlet容器是怎样工作的 一个Servlet容器是一个复杂的系统.然而,对于处理对Servlet的请求,Servlet容器主要做三件事情: 1. 创建请求对象,并设置所调用的Servlet ...

  10. 2017.10.28 针对Java Web应用中错误异常处理方法的运用

    针对Java Web应用中错误异常处理方法的运用 在javaweb中其异常都需要对Checked Exception之下的Exception进行继承,并且有选择地对发生的错误和异常进行处理.Java同 ...