<!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. Scala OOP

    Scala OOP 1.介绍 Scala是对java的封装,底层仍然采用java来实现,因此Scala也是面向对象的.其中scala给出了class.object和trait三种面向对象的组件.

  2. Javascript作业—封装type函数，返回较详细的数据类型

    Javascript作业—封装type函数,返回较详细的数据类型 思路: 1 取typeof的值,如果是数字.函数等非对象类型,直接取类型 2 如果是object类型,则调用Object.protot ...

  3. IOS 纯代码添加 Button Image Label 添加到自定义View中

    @interface ViewController () /**获取.plist数据*/ @property (nonatomic,strong) NSArray *apps; @end @imple ...

  4. POJ-2377 Bad Cowtractors---最大生成树

    题目链接: https://vjudge.net/problem/POJ-2377 题目大意: 给一个图,求最大生成树权值,如果不连通输出-1 思路: kruskal算法变形,sort按边从大到小排序 ...

  5. Codeforces Codeforces Round #383 (Div. 2) E (DFS染色)

    题目链接:http://codeforces.com/contest/742/problem/E 题意: 有一个环形的桌子,一共有n对情侣,2n个人,一共有两种菜. 现在让你输出一种方案,满足以下要求 ...

  6. nodejs使用MYSQL连接池，断线重连

    两种方式解决1.你可以配置mysql的连接池 var mysql = require('mysql'); var pool = mysql.createPool({ host: 'localhost' ...

  7. spring中使用i18n(国际化)

    简单了解i18n i18n(其来源是英文单词internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称.在资讯领域,国际化(i18n)指让产品(出版物,软件,硬件 ...

  8. GAN的调研和学习

    近期集中学习了GAN,下面记录一下调研的结果,和学习的心得,疏漏的地方,敬请指正. 本文将分为几个部分进行介绍,首先是GAN的由来,其次是GAN的发展,最后是GAN的应用. 先把最近收集的资料列举一下 ...

  9. typeid操作符

    typeid() operator返回type_info,返回值不可拷贝.不可赋值 // Illustrates the typeid operator. #include <iostream& ...

  10. Python 初始—(字符编码解码)

    字符编码之间的编码转换则需要通过Unicode 进行转换,那么需要一个编码和解码实现与Unicode进行关联转换 例如utf-8转gbk utf-8----decode----->Unicode ...