漂亮的Slider效果类终于封装成功

Slider类的功能说明:
1、可以控制任何一个页面上存在的div
2、slider在滑动的同时还可以实现透明度的变化,整个过程更平滑、更美观
3、可控性强,通过多个参数实现不同大小的div不同方向、不同速度的滑动
4、调用方便,一句话即可初始化,slider的隐现控制更为简单,详情参见代码例子
关于Slider类实现过程的说明:
有感于现在的网站经常使用所谓Web2.0模式的div隐现效果,前一段自己在网页上要实现一个,尝试成功后又想封装一个类方便以后使用,也可以开放给大家使用,刚好还可以学习一下javascript的类编程方法(兄弟以前一直用微软的东西,对javascript不熟),过程当中遇到一点问题,就在51js上面发了一个帖子求助,本来也没有报太大希望,结果得到了caudex和he1a2s0两位朋友的讲解和帮助,顺利解决了问题,再次对二位表示衷心得感谢,当然顺便也要感谢一下FlyKing这位大侠的不屑和讥讽,因为这也给了我莫大的动力。
好了,废话不说,尽管我的实现方法肯定不是最好的,甚至比较原始和笨拙,但毕竟是实现了,拿出来奉献给大家,有看的上的就用一下吧。或者有更好方法的也给指教一下,我的邮箱douwenming@gmail.com,欢迎联系。

无标题文档

body {
background-color: #EEEEEE;
margin: 0px;
text-align: center;
}
#wrap {
width: 736px;
background-color: #FFFFFF;
overflow: hidden;
margin: 12px;
padding: 12px;
}
#topcontainer {
height: 80px;
width: 732px;
background-color: #99FF66;
border: 1px solid #79F200;
}
#bodycontainer {
height: 400px;
width: 100%;
margin-top: 12px;
}
#bottomcontainer {
height: 60px;
width: 100%;
margin-top: 12px;
}
#topwrap {
width: 100%;
}
#leftcontainer {
background-color: #99FF66;
height: 400px;
width: 120px;
float: left;
border: 1px solid #79F200;
}
input {
background-color: #99FF66;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #79F200;
border-right-color: #79F200;
border-bottom-color: #79F200;
border-left-color: #79F200;
line-height: 28px;
background-position: center;
height: 30px;
}

slider.names = new Array();

function slider()
{
this.id = slider.names.length;
slider.names[this.id] = this;
this.target = document.getElementById(arguments[0]); //第一个参数:被操作div的id
this.direction = arguments[1];//第二个参数:div弹出的方向
this.height = arguments[2];//第三个参数:div的高度
this.width = arguments[3];//第四个参数:div的宽度
this.step = arguments[4];//第五个参数:希望动作分解为几步完成
this.timer = 10 * arguments[5];//第六个参数:每个动作的间隔时间,10ms为一个单位
this.startopa = arguments[6];//第七个参数:div开始的透明度
this.sparent = this.target.parentNode;//获取操作div的父容器
this.intervalid = null;//循环定时的id
this.i = 0;//循环的计数器
this.status = 0;//slider层的状态:0-可以展开;1-不可以展开
this.target.style.display = "none";//先将div隐去
return this;
}

slider.prototype.initialize = function()
{
this.sparent.style.overflow = "hidden";//设置父容器overflow
this.target.style.width = Number(this.width) + 'px';//设置目标div的宽度
this.target.style.height = Number(this.height) + 'px';//设置目标div的高度
this.target.style.position = "";//设置目标div的定位方式
this.target.style.display = "";//设置目标div的显示方式
this.target.style.filter = 'Alpha(opacity=' + Number(this.startopa) + ')';//设置目标div的透明度为初始透明度
this.target.style.overflow = "hidden";//设置overflow
switch(this.direction)//根据弹出方向设定div的margin
{
case 1://left to right
this.target.style.marginLeft = "-" + this.width + "px";
break;
case 2://top to bottom
this.target.style.marginTop = "-" + this.height + "px";
break;
case 3://right to left
this.target.style.marginRight = "-" + this.width + "px";
break;
}
}

slider.prototype.show = function()
{
if (this.status==0)//检查状态是否已经展开
{
this.initialize();//操作div及其父容器的初始化
this.intervalid = window.setInterval("slider.names["+this.id+"].cycle()",this.timer);//设置动作循环

}
}

slider.prototype.hide = function()
{
if (this.status==1)//检查状态是否已经展开
{
this.intervalid = window.setInterval("slider.names["+this.id+"].decycle()",this.timer);//设置动作循环

}
}

slider.prototype.cycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5);//计算每步增加的透明度
var nopa = Number(opa) + Number(opastep);//当前透明度
if (nopa>100){this.target.style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' + String(nopa) + ')';}//给div透明度赋值
switch(this.direction)//根据弹出方向计算和设定div的动作
{
case 1: //left to right
var opx = this.target.style.marginLeft.split("px")[0];
var pxstep = Math.round((this.width / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginLeft = '0px';}else{this.target.style.marginLeft = String(npx) + 'px';}
break;
case 2: //top to bottom
var opx = this.target.style.marginTop.split("px")[0];
var pxstep = Math.round((this.height / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginTop = '0px';}else{this.target.style.marginTop = String(npx) + 'px';}
break;
case 3: //right to left
var opx = this.target.style.marginRight.split("px")[0];
var pxstep = Math.round((this.width / this.step)+0.5);
var npx = Number(opx) + Number(pxstep);
if (npx>0){this.target.style.marginRight = '0px';}else{this.target.style.marginRight = String(npx) + 'px';}
break;
}
this.i++ //计数器+1
if (this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //循环完毕,清除循环定时
}

slider.prototype.decycle = function() //单步循环动作
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//获取目标div的透明度数值
var opastep = Math.round(((100 - Number(opa)) / this.step)+2.5)*2;//计算每步增加的透明度
var nopa = Number(opa) - Number(opastep);//当前透明度
if (nopathis.width+2){this.target.style.marginLeft = '-' + this.width + 'px';}else{this.target.style.marginLeft = String(npx) + 'px';}
break;
case 2: //top to bottom
var opx = this.target.style.marginTop.split("px")[0];
var pxstep = Math.round((this.height / Math.round(this.step*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>this.height+2){this.target.style.marginTop = '-' + this.height + 'px';}else{this.target.style.marginTop = String(npx) + 'px';}
break;
case 3: //right to left
var opx = this.target.style.marginRight.split("px")[0];
var pxstep = Math.round((this.width / Math.round(this.step*0.5))+0.5);
var npx = Number(opx) - Number(pxstep);
if (Math.abs(npx)>this.width+2){this.target.style.marginRight = '-' + this.width + 'px';}else{this.target.style.marginRight = String(npx) + 'px';}
break;
}
this.i++ //计数器+1
if (this.i>(Math.round(this.step*0.5)-1)){window.clearInterval(this.intervalid);this.i=0;this.status=0;this.target.style.display = "none";} //循环完毕,清除循环定时
}

//关于如何使用这个代码的说明:
//上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
//然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部之前,否则可能会报错
var topslider = new slider('topcontainer',2,80,734,20,2,20);
var leftslider = new slider('leftcontainer',1,398,120,20,1,20);
//参数分别代表的意义可以在代码顶端看到
//控制slider动作可以使用两种方式
//一种是使用下面声明的名字调用,比如topslider.show(),topslider.hide()
//另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Slider类的调用说明:
//关于如何使用这个代码的说明:
//上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
//然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错


var topslider = new slider('topcontainer',2,80,734,20,2,20);
var leftslider = new slider('leftcontainer',1,398,120,20,1,20);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

//参数分别代表的意义可以在代码顶端看到
//控制slider动作可以使用两种方式
//一种是使用初始化时声明的名字调用,比如topslider.show(),topslider.hide()
//另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序

(0)

相关推荐

  • 漂亮的Slider效果类终于封装成功

    Slider类的功能说明: 1.可以控制任何一个页面上存在的div 2.slider在滑动的同时还可以实现透明度的变化,整个过程更平滑.更美观 3.可控性强,通过多个参数实现不同大小的div不同方向.不同速度的滑动 4.调用方便,一句话即可初始化,slider的隐现控制更为简单,详情参见代码例子 关于Slider类实现过程的说明: 有感于现在的网站经常使用所谓Web2.0模式的div隐现效果,前一段自己在网页上要实现一个,尝试成功后又想封装一个类方便以后使用,也可以开放给大家使用,刚好还可以学习

  • C# Winform实现自定义漂亮的通知效果

    目录 前言 优化调整 调用并显示自定义通知 主要实现过程 代码实现 前言 本文主要介绍其具体的实现思路(视频仅有代码输入,并无过程介绍等),同时,在原本实现的基础上,进行了多处修改和优化,具体参见下面的内容. 优化调整 下面是对源代码的修改.优化和调整: 修改 lblMsg(Label) 的 AutoSize 为false,尽可能多占通知窗体区域,Anchor跟随窗体变换,文字左侧垂直居中,用于显示可能更多的消息. 设定action.timer1默认值,Name.Opacity.StartPos

  • 实例解析iOS app开发中音频文件播放工具类的封装

    一.简单说明 1.关于音乐播放的简单说明 (1)音乐播放用到一个叫做AVAudioPlayer的类 (2)AVAudioPlayer常用方法 加载音乐文件 复制代码 代码如下: - (id)initWithContentsOfURL:(NSURL *)url error:(NSError **)outError; - (id)initWithData:(NSData *)data error:(NSError **)outError; 准备播放(缓冲,提高播放的流畅性) - (BOOL)prep

  • 分享一个漂亮的php验证码类

    本文实例为大家分享了一个漂亮的php验证码类,供大家参考,具体内容如下 //验证码类 class ValidateCode { private $charset = 'abcdefghkmnprstuvwxyzABCDEFGHKMNPRSTUVWXYZ23456789';//随机因子 private $code;//验证码 private $codelen = 4;//验证码长度 private $width = 130;//宽度 private $height = 50;//高度 privat

  • 漂亮的thinkphp 跳转页封装示例

    项目是要一点点按优先级进行优化的,现在到优化thinkphp的跳转页了. <?php if(C('LAYOUT_ON')) { echo '{__NOLAYOUT__}'; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳转中</title> <style> .buffer{ background-color

  • JavaScript 类的封装操作示例详解

    本文实例讲述了JavaScript 类的封装操作.分享给大家供大家参考,具体如下: 一,首先,为什么要使用封装? 这是从信息的角度出发的,信息的隐藏是最终的目的,而封装只不过是实现隐藏的一种方法. 这里我们需要明白一点就是:类的定义有如下的三种方式: (第一种)门户大开型方式       (第二种)用命令规范区别私有和公有的方式    (第三种)闭包 现在详细描述一下每一种类的定义方式: 针对第一种,门户大开类型 首先,我们来看一种情况 (1)声明一个简单的类,代码如下 function Per

  • Redis缓存穿透/击穿工具类的封装

    目录 1. 简单的步骤说明 2. 逻辑缓存数据类型 3. 缓冲工具类的封装 3.1 CacheClient 类的类图结构 3.2 CacheClient 类代码 1. 简单的步骤说明 创建一个逻辑缓存数据类型 封装缓冲穿透和缓冲击穿工具类 2. 逻辑缓存数据类型 这里主要是创建一个可以往Redis里边存放的数据类型 RedisData 的Java类型 import lombok.Data; import java.time.LocalDateTime; @Data public class Re

  • pagehelper分页工具类的封装

    本文实例为大家分享了pagehelper分页工具类的封装代码,供大家参考,具体内容如下 现状: 在使用Mybatis进行数据库分页查询时,我们经常使用的是插件:pagehelper 此插件可以帮助我们很方便的进行数据库分页操作,但是使用此插件每次都需要先开启插件,然后再手动的对参数进行封装,这些都是模板化的套路,有没有一种更简洁的方法,让我们不在关注具体的分页细节,只需要实现我们的业务逻辑呢?所以接下来我将使用Spring AOP技术,对该工具类进行封装,让我们可以更方便的进行分页操作: 依赖:

  • js实现YouKu的漂亮搜索框效果

    本文实例讲述了js实现YouKu的漂亮搜索框效果.分享给大家供大家参考.具体如下: 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • PHP类的封装与继承详解

    封装 把成员方法和成员属性封装到类中,隐藏属性和方法实现的细节,通过public.protected.private等限定类成员的访问权限,数据被保护在内部,只通过被授权的成员方法才可以操作,尽可能的对成员进行封装. public:方法或者属性在任何作用域下都可以访问到,而且是默认的,如果没有为一个属性或方法指定访问修饰符,它将是public. protected:本类和子类可以访问,外部对象不可以调用. private:只能在本类访问,子类与外部对象都不可能调用.经过private标记的方法或

随机推荐