本功能比較简单,就是一个大幕。左右滚动播放图片。

关键点在于怎样实现平滑的滚动,包含动画效果,3d效果等。

<style>

img {
position: absolute;
top:200;
left:400px;
/* border: 1px solid #333;*/
padding: 2px 5px 2px 5px;
-webkit-transition:ease all 0.7s;
-webkit-transform-origin: 50% 50% 600px;
/* background: rgba(0,0,0,.3);*/
width: 100px;
height: 100px;
z-index: -1;
}
.button {
position: absolute;
top:253px;
width:20px;
height: 60px;
background: rgba(0,0,0,.3);
padding-top:40px;
vertical-align: middle;
text-align: center;
z-index: 2;
}
.button:hover {
cursor: pointer;
}
.left {
left:130px;
}
.right {
left:870px;
} .layerhidden {
position: absolute;
top:220px;
width:160px;
height: 200px;
background: white;
vertical-align: middle;
text-align: center;
z-index: 1;
}
.layerleft {
left:0px;
}
.layerright {
left:850px;
}
</style>
<script>
var imgs;
var leftStart=0;
var showLength=7;
var step = 0;
function init() {
imgs = document.getElementsByTagName("img");
reshowImgs();
}
function turnLeft(){
if(leftStart>0) {
leftStart--;
step++;
reshowImgs();
}
else {
alert("左边没有照片");
}
}
function turnRight(){
if(leftStart+showLength<imgs.length) {
leftStart++;
step--;
reshowImgs();
}
else {
alert("右边没有照片");
}
} function delayTransform(ind, yDeg)
{
imgs[ind].style.webkitTransform = "perspective(500px) rotateY("+yDeg+"deg)";
}
function delayDisplay(ind,display)
{
imgs[ind].style.display = display;
} function reshowImgs() {
var deg = Math.floor(showLength / 2);
var timeDelay = 700; for(var i=0;i<leftStart;i++)
{
imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg+leftStart-i)*10+"deg)";
setTimeout("delayDisplay("+i+",'none')",500);
}
for(var i=leftStart; i< leftStart+showLength;i++)
{
imgs[i].style.display = "block";
setTimeout("delayTransform("+i+","+(deg-(i-leftStart))*10+")",timeDelay/10);
}
for(var i=leftStart+showLength;i<imgs.length;i++)
{
imgs[i].style.webkitTransform = "perspective(500px) rotateY("+(deg-i)*10+"deg)";
setTimeout("delayDisplay("+i+",'none')",500);
} }
</script>
<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />
<img src="5.png" />
<img src="6.png" />
<img src="7.png" />
<img src="8.png" />
<img src="9.png" /> <div id="left_button" class="button left" onclick="turnLeft()" style=""><</div>
<div id="right_button" class="button right" onclick="turnRight()" style="">></div> <div class="layerhidden layerleft"></div>
<div class="layerhidden layerright"></div>
<script>
init();
</script>

图片3d轮放查看效果的更多相关文章

  1. 图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放

    上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...

  2. WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现

    原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...

  3. JS可控制的图片自动循环播放查看效果

    JS可控制的图片自动循环播放查看效果 <html> <head> <title>JS可控制的图片自动循环播放查看效果丨芯晴网页特效丨CsrCode.Cn</t ...

  4. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

  5. 图片轮播展示效果-2D实现

    图片的轮播展示效果如果使用2D实现,需要将3D中存在的近大远小效果使用图片的缩放呈现,因此需要存储和计算图片的位置同时还要计算存储图片的缩放信息.将所有图片的位置连线看作是一个椭圆,就可以根据图片的个 ...

  6. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  7. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  8. 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  9. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

随机推荐

  1. 求最长回文子串,O(n)复杂度

    最长回文子串问题-Manacher算法 最长回文串问题是一个经典的算法题. 0. 问题定义 最长回文子串问题:给定一个字符串,求它的最长回文子串长度. 假设一个字符串正着读和反着读是一样的,那它就是回 ...

  2. [Angular] ngx-formly (AKA angular-formly for Angular latest version)

    In our dynamic forms lessons we obviously didn’t account for all the various edge cases you might co ...

  3. VB.NET机房收费系统总结

    总感觉这次机房收费系统非常有份量,一直没有下手总结,从2014-7-27至2014-9-29.这中间有太多故事和成长.首先说一下两次机房收费系统的不同,它是我们从面向过程向面向对象的一个转变.在.NE ...

  4. 痛苦的人生——JRuby on Rails的开发与部署小记

    最近单位领导部署了一项开发用户自助服务系统的任务,该任务有且仅有我一人独立完成——哈哈,十分美妙的工作呢. 恰巧楼主最近被Ruby的美妙特性所迷惑,于是义无反顾地投入到Ruby on Rails的怀抱 ...

  5. 似然函数(likelihood function)

    1. 似然函数基本定义 令 X1,X2,-,Xn 为联合密度函数 f(X1,X2,-,Xn|θ),给定观测值 X1=x1,X2=x2,-,Xn=xn,关于 θ 的似然函数(likelihood fun ...

  6. [jzoj 6092] [GDOI2019模拟2019.3.30] 附耳而至 解题报告 (平面图转对偶图+最小割)

    题目链接: https://jzoj.net/senior/#main/show/6092 题目: 知识点--平面图转对偶图 在求最小割的时候,我们可以把平面图转为对偶图,用最短路来求最小割,这样会比 ...

  7. 2.Matlab数值数组及其运算

    2.1引导 2.2一维数组的创建与寻访 2.3二维数组的创建 2.4二维数组元素的标识 2.5二维数组的子数组寻访和赋值 2.6执行数组运算的常用函数 2.7数组运算和矩阵运算 2.8多项式的表达和创 ...

  8. 关于spring和extjs对接的过程简述

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...

  9. BZOJ 3674/BZOJ 3673 主席树

    思路: 主席树维护可持久化数组 剩下的就是普通的并查集了- //By SiriusRen #include <cstdio> #include <cstring> #inclu ...

  10. C#操作sql时注意点

    ①创建必要的索引 ②使用预编译查询 ③使用参数化sql会执行预编译,第一次执行的时候DBMS会为这个SQL语句进行查询优化并执行预编译 ④调整where子句中的连接顺序 ⑤DBMS一般次用自上而下的顺 ...