js实现百叶窗
来源：互联网 发布：php 商城怎么删除订单 编辑：程序博客网 时间：2024/04/24 02:13
效果一：
效果二：
效果三：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>百叶窗</title>
<style type="text/css">
*{padding:0;margin:0;}
#container{width:800px;height:540px;border:1px solid #eee;margin:0 auto;position:relative;overflow:hidden;}
</style>
<script type="text/javascript">
function Blind(_obj,_src){
//横向
this.horizontal = function(_wid,_time){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_height / _wid);
(function createElement(){
var _div = null;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.width = _width+"px";
_div.style.height = "0px";
_div.style.left = "0px";
_div.style.top = _wid*i+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = "0 "+(-_wid*i)+"px";
_obj.appendChild(_div);
}
})();
(function start(){//console.log("start");
var _divs = _obj.getElementsByTagName("div");
var _timer = 0;var _height = 0;
function exec(){//console.log("exec");
window.clearTimeout(_timer);
_height= parseInt(_divs[0].style.height);
_height++;
for(var i=0;i<_divs.length;i++){
_divs[i].style.height = _height+"px";
}
if(_height<_wid){
_timer = window.setTimeout(exec,_time);
}else{
window.clearTimeout(_timer);
}
}exec();
})();
}
//竖向，上方下方错乱
this.vertical = function(_wid,_time){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_width / _wid);
(function createElement(){
var _div=0;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.left = _wid*i+"px";
if(i%2==0){
_div.style.top = -_height+"px";
}else{
_div.style.top = _height+"px";
}
_div.style.width = _wid+"px";
_div.style.height = _height+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = -_wid*i+"px 0px";
_obj.appendChild(_div);
}
})();
(function start(){
var _timer = 0;
function exec(){
var _divs = _obj.getElementsByTagName("div");
for(var i=0;i<_divs.length;i++){
var _top = parseInt(_divs[i].style.top);
if(i%2==0){
_top+=10;
}else{
_top-=10;
}
_divs[i].style.top = _top+"px";
}
if(_top==0){
window.clearTimeout(_timer);
}else{
_timer = window.setTimeout(exec,_time);
}
}exec();
})();
}
//从上往下阶梯状落下
this.ladder = function(_wid,_time){
(function createDemo(){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_width / _wid);
var _div = null;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.height = _height+"px";
_div.style.width = _wid+"px";
_div.style.left = _wid*i+"px";
//_div.style.top = "0px";
_div.style.top = -_height+(-40*i)+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = -_wid*i+"px 0px";
_obj.appendChild(_div)
}
})();
(function start(){
var _timer = 0;
var _divs = _obj.getElementsByTagName("div");
var _top = 0;
function exec(){
window.clearTimeout(_timer);
for(var i=0;i<_divs.length;i++){
_top = parseInt(_divs[i].style.top);
_top+=20;
if(_top<=0){
_divs[i].style.top = _top+"px";//console.log(_divs[i].style.top);
}
}
if(parseInt(_divs[_divs.length-1].style.top)==0){
window.clearTimeout(_timer);
}else{
_timer = window.setTimeout(exec,_time);
}
}exec()
})();
}
}
window.onload = function(){
var _blind = new Blind(document.getElementById("container"),"images/86.jpg");
//_blind.horizontal(40,30);
//_blind.vertical(30,30);
_blind.ladder(40,30);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
使用多继承方式实现百叶窗效果：
继承可以使用原型链，
例：Exchange.prototype = new Blind();Floor.prototype=new Exchange();
继承使用多继承：var _blind = new Blind();Floor.call(_blind,参数们);Floor.apply(_blind,[参数们]);
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>百叶窗</title>
<style type="text/css">
*{padding:0;margin:0;}
#container{width:800px;height:540px;border:1px solid #eee;margin:0 auto;position:relative;overflow:hidden;}
</style>
<script type="text/javascript">
function Blind(_obj,_src){
//横向
this.style = function(_wid,_time){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_height / _wid);
(function createElement(){
var _div = null;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.width = _width+"px";
_div.style.height = "0px";
_div.style.left = "0px";
_div.style.top = _wid*i+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = "0 "+(-_wid*i)+"px";
_obj.appendChild(_div);
}
})();
(function start(){//console.log("start");
var _divs = _obj.getElementsByTagName("div");
var _timer = 0;var _height = 0;
function exec(){//console.log("exec");
window.clearTimeout(_timer);
_height= parseInt(_divs[0].style.height);
_height++;
for(var i=0;i<_divs.length;i++){
_divs[i].style.height = _height+"px";
}
if(_height<_wid){
_timer = window.setTimeout(exec,_time);
}else{
window.clearTimeout(_timer);
}
}exec();
})();
}
}
function Floor(_obj,_src){
//从上往下阶梯状落下
this.floor = function(_wid,_time){
(function createDemo(){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_width / _wid);
var _div = null;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.height = _height+"px";
_div.style.width = _wid+"px";
_div.style.left = _wid*i+"px";
//_div.style.top = "0px";
_div.style.top = -_height+(-40*i)+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = -_wid*i+"px 0px";
_obj.appendChild(_div)
}
})();
(function start(){
var _timer = 0;
var _divs = _obj.getElementsByTagName("div");
var _top = 0;
function exec(){
window.clearTimeout(_timer);
for(var i=0;i<_divs.length;i++){
_top = parseInt(_divs[i].style.top);
_top+=20;
if(_top<=0){
_divs[i].style.top = _top+"px";//console.log(_divs[i].style.top);
}
}
if(parseInt(_divs[_divs.length-1].style.top)==0){
window.clearTimeout(_timer);
}else{
_timer = window.setTimeout(exec,_time);
}
}exec()
})();
}
}
function Exchange(_obj,_src){
//竖向，上方下方错乱
this.exchange = function(_wid,_time){
var _width = _obj.clientWidth;
var _height = _obj.clientHeight;
var _count = parseInt(_width / _wid);
(function createElement(){
var _div=0;
for(var i=0;i<_count;i++){
_div = document.createElement("div");
_div.style.position = "absolute";
_div.style.left = _wid*i+"px";
if(i%2==0){
_div.style.top = -_height+"px";
}else{
_div.style.top = _height+"px";
}
_div.style.width = _wid+"px";
_div.style.height = _height+"px";
_div.style.background = "url("+_src+")";
_div.style.backgroundPosition = -_wid*i+"px 0px";
_obj.appendChild(_div);
}
})();
(function start(){
var _timer = 0;
function exec(){
var _divs = _obj.getElementsByTagName("div");
for(var i=0;i<_divs.length;i++){
var _top = parseInt(_divs[i].style.top);
if(i%2==0){
_top+=10;
}else{
_top-=10;
}
_divs[i].style.top = _top+"px";
}
if(_top==0){
window.clearTimeout(_timer);
}else{
_timer = window.setTimeout(exec,_time);
}
}exec();
})();
}
}
window.onload = function(){
var _blind = new Blind(document.getElementById("container"),"images/86.jpg");
//多继承方式
Floor.call(_blind,document.getElementById("container"),"images/86.jpg");
Exchange.call(_blind,document.getElementById("container"),"images/86.jpg");
//_blind.style(40,30);
//_blind.exchange(40,30);
_blind.floor(40,30);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
- js实现百叶窗
- js原生实现百叶窗上下滚动
- 实现百叶窗效果图
- asp百叶窗实现
- J2ME实现百叶窗效果
- WPF Clip实现百叶窗
- Jquery 百叶窗实现原理
- html实现百叶窗效果
- 百叶窗
- 网页图片实现百叶窗效果
- 利用Jquery实现百叶窗效果
- 百叶窗特效（用move.js库）
- 百叶窗特效（用move.js库）
- 百叶窗特效（用move.js库）
- 用JavaScript实现页面百叶窗效果
- 用VB实现“百叶窗”的图形特效
- 用VB实现“百叶窗”的图形特效
- AS3.0实现百叶窗过渡效果
- ios键盘的第一响应者和打开关闭触发的通知
- BGRABitmap图像操作9d：渲染前面的水纹
- WebService理解和代码解析
- 关于计算机视觉的各种库儿们
- 微信退款
- js实现百叶窗
- 99 Problems in Scala
- 12_View动画-集合
- B-树和B+的相关知识点
- 17. meta http-equiv 属性
- 前端工程师与SEO
- C++学习初级之QString
- String 的两种创建方法及存储方式
- 在不改变php.ini的情况下修改文件上传大小
