<!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. TP5.1：facade静态代理

    THINKPHP中有很多很多的facade静态代理,这些静态代理的位置在:thinkphp\think\facade文件夹下 1.在app\commom中新建一个文件,名为:Test.php,表示被代 ...

  2. 关于定义顺序和内存分配的关系--记一道不严谨的C语言题

    include<stdio.h> #include<iostream> int main() { char a[] = "123"; char b[] = ...

  3. poj 3485 区间选点

    题目链接:http://poj.org/problem?id=3485 题意:X轴上公路从0到L,X轴上下有一些点给出坐标代表村庄,问在公路上最少建几个出口才能使每个村庄到出口的距离不超过D. 以村庄 ...

  4. C sharp #003# 面向对象编程基本构件

    饮水思源:金老师的自学网站 索引 类的属性 简化字段/属性的初始化 命名空间 程序集 类的属性 字段+get/set方法=属性 (之前都是把字段和属性混着用..) 经典写法: using System ...

  5. apache以天为单位生成日志

    编辑/etc/httpd/conf.d/vhost.conf,修改ErrorLog和CustomLog: ErrorLog "|rotatelogs /var/log/httpd/phpdd ...

  6. 三、Object-C内存管理

    一.管理范围:任何继承了NSObject的对象,对基本数据类型无效 原理: 1.每个对象都有个引用计数器,是一个与之关联的整数 2.使用了 3.给对象发送一条retain消息,可以使对计数器+1 4. ...

  7. js中this的运用

    this 永远指向函数运行时所在的对象,而不是函数创建时所在的对象 匿名函数和不处于任何对象中的函数,This指向window call, apply, with指的This是谁就是谁. 普通函数调用 ...

  8. python面试，日更

    l1 = [11, 2, 3, 22, 2, 4, 11, 3] 去重并保持原来顺序 # 集合方法 l2 = list(set(l1)) l2.sort(key=l1.index) # 按照l1索引排 ...

  9. 关于webpack打包vue后vendor包过大的问题

    因为项目用到了elementUI,打包之后包括vue.axios.elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示.在百度过后发现可以使用外链接而不用模块包. 博主使用的外 ...

  10. 当Java遇见了Html--Servlet篇

    ###一.什么是servlet servlet是在服务器上运行的小程序.一个servlet就是一个 java类,并且通过"请求-响应"编程模型来访问的这个驻留在服务器内存里的程序. ...