js访3d上下轮播图
js/css访3d上下轮播图
(附件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0}
img{border:none;vertical-align:bottom}
#box{position:relative;margin:50px auto;width:800px;height:400px;
}
#box img{position:absolute;}
#box .yun1{width:320px;height:160px;top:-160px;left:0;z-index:1;opacity:0}
#box .yun2{width:320px;height:160px;top:120px;left:0px;z-index:1;opacity:0.2}
#box .yun3{width:360px;height:180px;top:110px;left:100px;z-index:2;opacity:0.6}
#box .yun4{width:400px;height:200px;z-index:3;top:100px;left:200px;opacity:1}
#box .yun5{width:360px;height:180px;top:110px;left:340px;z-index:2;opacity:0.6}
#box .yun6{width:320px;height:160px;top:120px;left:480px;z-index:1;opacity:0.2}
#box .yun7{width:320px;height:160px;top:-160px;left:480px;z-index:1;opacity:0}
</style>
<script type="text/javascript" src="js/fengzhuanghanshu.js"></script>
<script type="text/javascript" src="js/time_move.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript">
window.onload=function(){
var aImg=box.getElementsByTagName("img");
var arr=['height','width','top','left','opacity','zIndex']
var arrval=[];
for(var i=0;i<aImg.length;i++){
var oarr={};
for(var j=0;j<arr.length;j++){
if(arr[j]=='opacity'){
var iCur=Math.round(getStyle(aImg[i],'opacity')*100)
}else{
var iCur=parseInt(getStyle(aImg[i],arr[j]))
}
oarr[arr[j]]=iCur;
}
arrval.push(oarr)
}
console.log(arrval)
setInterval(function(){
arrval.push(arrval.shift())
for(var i=0;i<aImg.length;i++){
startMove(aImg[i],arrval[i])
}
},1000)
}
</script>
</head>
<body>
<div id="box">
<a href="javascript:;"><img class="yun1" src="img/1.jpg" /> </a>
<a href="javascript:;"><img class="yun2" src="img/2.jpg" /> </a>
<a href="javascript:;"><img class="yun3" src="img/3.jpg" /> </a>
<a href="javascript:;"><img class="yun4" src="img/4.jpg" /> </a>
<a href="javascript:;"><img class="yun5" src="img/5.jpg" /> </a>
<a href="javascript:;"><img class="yun6" src="img/6.jpg" /> </a>
<a href="javascript:;"><img class="yun7" src="img/7.jpg" /> </a>
</div>
</body>
</html>
js访3d上下轮播图的更多相关文章
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
随机推荐
- android studio常用控件
1.Button设置不同的样式 <?xml version="1.0" encoding="utf-8"?> <selector xmlns: ...
- 非受限联合体 - 现代C++新特性总结
非受限联合体 非受限联合体:C++98中并不是所有数据类型都能够成为union的数据成员,不允许联合体拥有非POD(Plain Old Data).静态或引用类型的成员. C++11中取消了联合体对于 ...
- 多线程下载文件,ftp文件服务器
1: 多线程下载文件 package com.li.multiplyThread; import org.apache.commons.lang3.exception.ExceptionUtils; ...
- spring的bean容器加载
1.在单独使用的时候可以通过ClassPathXmlApplicationContext(“配置文件.xml”);来启动容器. 2.在MVC下是通过启动servlet容器,初始化DispatcherS ...
- 机器学习理论基础学习3.3--- Linear classification 线性分类之logistic regression(基于经验风险最小化)
一.逻辑回归是什么? 1.逻辑回归 逻辑回归假设数据服从伯努利分布,通过极大化似然函数的方法,运用梯度下降来求解参数,来达到将数据二分类的目的. logistic回归也称为逻辑回归,与线性回归这样输出 ...
- Vim/Vi的使用
Vim 是vi的加强 Gvim图形化的vim Vim/Vi简介 Vim/Vi是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,他们 的作用是建立,编辑,显示文本文件 Vi ...
- http协议基础(二)请求和响应报文的构成
http协议用于客户端和服务器之间的通信,请求访问资源的一方称为客户端,而提供资源响应的一方称为服务器端. 下面就是客户端和服务端之间简单的通信过程 PS:请求必须从客户端建立通信,服务端没收到请求之 ...
- MySQL创建数据表并建立主外键关系
为mysql数据表建立主外键需要注意以下几点: 需要建立主外键关系的两个表的存储引擎必须是InnoDB. 外键列和参照列必须具有相似的数据类型,即可以隐式转换的数据类型. 外键列和参照列必须创建索引, ...
- <<Joint Deep Modeling of Users and Items Using Reviews for Recommendation>> 评论打分预测
综述: 本文将 CNN 与 FM(Factorization Machine) 结合,基于评论文本来进行评分预测. 简介: 目前将神经网络应用推荐系统的研究工作中,有一类思路是把如CNN等神经网络作为 ...
- Description Resource Path LocationType Java compiler level does not match the version of the instal
从别的地方导入进来的maven项目报: Description Resource Path Location TypeJava compiler level does not match the ve ...