<!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. html中如何使用python屏蔽一些基本功能

    进行数据解析的理由不计其数,相关的工具和技巧也同样如此.但是,当您需要用这些数据做一些新的事情时,即使有“合适的”工具可能也是不够的.这一担心对于异类数据源的集成同样存在.用来做这项工作的合适工具迟早 ...

  2. LeetCode Path Sum 判断树的路径之和

    /** * Definition for binary tree * struct TreeNode { * int val; * TreeNode *left; * TreeNode *right; ...

  3. Selenium入门17 selenium IDE安装及使用

    selenium IDE是firefox浏览器的一个插件,支持脚本的录制回放,关键字驱动的.界面跟robotframework很像. 实际测试中不用录制回放,不过初学者拿来看看元素是如何定位的还是有用 ...

  4. Selenium入门7 内嵌框架iframe

    如果网页内嵌iframe,那么iframe里的元素是无法直接定位的,需要使用switch_to.frame进入frame操作: 之后需要再操作页面上非嵌入在iframe里的元素,需要使用switch_ ...

  5. BFS变换素数，POJ(3126)

    题目链接:http://poj.org/problem?id=3126 解题报告: #include <iostream> #include <queue> #include ...

  6. Java继承和访问修饰符

    继承 概念:为了提取两个类中公共代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). 关键字     ext ...

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

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

  8. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  9. P2447 [SDOI2010]外星千足虫

    怎么说呢? 因为是在mod 2 意义下的吗(一般是遇到二就可能是位运行算或二分图) 就可以利用异或计算. 因为奇数和偶数在二进制上就用判断最后一位就可以了 然后因为异或符合交换律和结合律 直接消元就可 ...

  10. IE问题——列表项图像

    等我们实现列表时,经常会遇到一种情况:需要为列表的每一项的前面添加一个列表项图像. 我们在查阅W3C时会发现,在CSS中已经为我们提供了实现方法——“list-style-type”,我们来看看它的实 ...