自己设计了一个wipebox 幻灯片

/**
* 简单幻灯片
* 作者:kurosaki
**/
var swipebox = {
<span style="white-space:pre">	</span>box:null,
<span style="white-space:pre">	</span>nowpage:1,<span style="white-space:pre">	</span>// 0 左 1  中  2 右
<span style="white-space:pre">	</span>nowindex:0,<span style="white-space:pre">	</span>//当前显示的数据下标
<span style="white-space:pre">	</span>elementArr:null,//所绑定事件的数组
<span style="white-space:pre">	</span>_dataArr:null,//数据 数组
<span style="white-space:pre">	</span>open:function(){
<span style="white-space:pre">		</span>box = $("<div id='box2016-panel'><div id='box-alpha'></div><div id='box-content'><span id='box-btn-prev' class='box-btn box-stoppop'>&lt;</span><span id='box-btn-next' class='box-btn box-stoppop'>&gt;</span>        <div id='box-top'></div>        <div class='box-body box-stoppop' id='box-centercontent'>中</div>        <div class='box-body box-stoppop' id='box-prevcontent'>左</div>        <div class='box-body box-stoppop' id='box-nextcontent'>又</div>        <div id='box-bottom'><a id='box-btn-exit' href='javascript:;' class=' box-btn box-stoppop'>×</a></div></div></div>");
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>*单击后隐藏上下边框,若被阻止冒泡,将不被执行
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find("#box-content").click(function(){
<span style="white-space:pre">			</span>$("#box-top").slideToggle("slow");
<span style="white-space:pre">			</span>$("#box-bottom").slideToggle("slow");
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>*阻止事件冒泡,用于阻止单击元素时触发到透明背景
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find(".box-stoppop").click(function(e){
<span style="white-space:pre">			</span>e.stopPropagation();
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>box.find("#box-btn-exit").click(function(e){
<span style="white-space:pre">			</span>$("#box2016-panel").fadeOut("slow",function(){
<span style="white-space:pre">				</span>$("#box2016-panel").remove();
<span style="white-space:pre">				</span>$("body").eq(0).css("overflow","auto");
<span style="white-space:pre">				</span>$("body").data("boxvar").nowpage=1;
<span style="white-space:pre">			</span>});
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>/**
<span style="white-space:pre">		</span>绑定上下页按钮事件
<span style="white-space:pre">		</span>prev 显示上一个
<span style="white-space:pre">		</span>next 显示下一个
<span style="white-space:pre">		</span>**/
<span style="white-space:pre">		</span>box.find("#box-btn-prev").click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>var nowpage = temp.nowpage;
<span style="white-space:pre">			</span>var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
<span style="white-space:pre">			</span>if(nowpage>0){
<span style="white-space:pre">				</span>temp.nowpage--;
<span style="white-space:pre">				</span>nowpage--;
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>temp.nowpage=2;
<span style="white-space:pre">				</span>nowpage=2;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>$(idarr[nowpage][0]).css({left:"-105%"});
<span style="white-space:pre">			</span>var nowpanel = $(idarr[nowpage][1]);
<span style="white-space:pre">			</span>nowpanel.animate({left:"10%"});
<span style="white-space:pre">			</span>$(idarr[nowpage][2]).animate({left:"105%"});
<span style="white-space:pre">			</span>//添加数据到当前页
<span style="white-space:pre">			</span>if(--temp.nowindex<0){
<span style="white-space:pre">				</span>temp.nowindex = temp.getData().length-1;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>nowpanel.html(temp.getData()[temp.nowindex]);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>//下一页
<span style="white-space:pre">		</span>box.find("#box-btn-next").click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>var nowpage = temp.nowpage;
<span style="white-space:pre">			</span>var idarr = [["#box-nextcontent","#box-prevcontent","#box-centercontent"],["#box-prevcontent","#box-centercontent","#box-nextcontent"],["#box-centercontent","#box-nextcontent","#box-prevcontent"]];
<span style="white-space:pre">			</span>if(nowpage<2){
<span style="white-space:pre">				</span>temp.nowpage++;
<span style="white-space:pre">				</span>nowpage++;
<span style="white-space:pre">			</span>}else{
<span style="white-space:pre">				</span>temp.nowpage=0;
<span style="white-space:pre">				</span>nowpage=0;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>$(idarr[nowpage][0]).animate({left:"-105%"});
<span style="white-space:pre">			</span>var nowpanel = $(idarr[nowpage][1]);
<span style="white-space:pre">			</span>nowpanel.animate({left:"10%"});
<span style="white-space:pre">			</span>$(idarr[nowpage][2]).css({left:"105%"});
<span style="white-space:pre">			</span>//添加数据到当前页
<span style="white-space:pre">			</span>if(++temp.nowindex>temp.getData().length-1){
<span style="white-space:pre">				</span>temp.nowindex = 0;
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>nowpanel.html(temp.getData()[temp.nowindex]);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">		</span>var elem = $(".swipebox");//查找使用此类的元素并为其绑定事件用于显示幻灯片
<span style="white-space:pre">		</span>this.elementArr = elem;
<span style="white-space:pre">		</span>$("body").data("boxvar",this);//将此对象存在BODY标签中
<span style="white-space:pre">		</span>elem.click(function(){
<span style="white-space:pre">			</span>var temp = $("body").data("boxvar");
<span style="white-space:pre">			</span>temp.nowindex = temp.elementArr.index($(this));<span style="white-space:pre">		</span>//得到当前点击对象序号
<span style="white-space:pre">			</span>var idarr = ["#box-prevcontent","#box-centercontent","#box-nextcontent"];
<span style="white-space:pre">			</span>temp.show();
<span style="white-space:pre">			</span>$(idarr[temp.nowpage]).html(temp.getData()[temp.nowindex]); //依据序号 将存储在elementData中的第(序号)个元素加载到当前面板
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span>click事件调用此方法用于显示
<span style="white-space:pre">	</span>**/
<span style="white-space:pre">	</span>show:function(){
<span style="white-space:pre">		</span>var temp = box.clone(true);
<span style="white-space:pre">		</span>$("body").append(temp);
<span style="white-space:pre">		</span>$("body").eq(0).css("overflow","hidden");//隐藏窗口滚动条
<span style="white-space:pre">		</span>temp.fadeIn("slow");
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>/**
<span style="white-space:pre">	</span>添加Next处理事件
<span style="white-space:pre">	</span>**/
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>setData:function(arr){
<span style="white-space:pre">		</span>if(arr instanceof Array)this._dataArr = arr;
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>getData:function(){
<span style="white-space:pre">		</span>return this._dataArr;
<span style="white-space:pre">	</span>}
};

上述代码 保存为 myswipebox.js

然后是 CSS文件 myswipebox.css

@charset "utf-8";
/* CSS Document */

#box2016-panel{
    position:fixed;
    height: 100%;
    width: 100%;
<span style="white-space:pre">	</span>top:0px;
<span style="white-space:pre">	</span>left:0px;
<span style="white-space:pre">	</span>display:none;
}
#box-alpha{
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>background-color:#000;
<span style="white-space:pre">	</span>filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
<span style="white-space:pre">	</span>opacity:0.5;
}
#box-content{
<span style="white-space:pre">	</span>position:relative;
<span style="white-space:pre">	</span>height:100%;
<span style="white-space:pre">	</span>width:100%;
}
#box2016-panel div.box-body{
<span style="white-space:pre">	</span>top:10%;
<span style="white-space:pre">	</span>height:75%;
<span style="white-space:pre">	</span>min-height:300px;
<span style="white-space:pre">	</span>width:80%;
<span style="white-space:pre">	</span>min-width:500px;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>z-index:99;
<span style="white-space:pre">	</span>background-color:#fff;
<span style="white-space:pre">	</span>-webkit-box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
    -moz-box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
    box-shadow: 0 1px 1px 1px #ccc, inset 0 1px 1px 1px white;
<span style="white-space:pre">	</span>padding:10px;
}
#box2016-panel div.box-body img{
<span style="white-space:pre">	</span>max-width:80%;
<span style="white-space:pre">	</span>max-height:300px;
<span style="white-space:pre">	</span>overflow:auto;
}
#box2016-panel div #box-top,#box-bottom{
<span style="white-space:pre">	</span>height:50px;
<span style="white-space:pre">	</span>width:100%;
<span style="white-space:pre">	</span>position:absolute;
    background-color: #0d0d0d;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000));
    background-image: -webkit-linear-gradient(#0d0d0d, #000000);
    background-image: -moz-linear-gradient(#0d0d0d, #000000);
    background-image: -o-linear-gradient(#0d0d0d, #000000);
    background-image: linear-gradient(#0d0d0d, #000000);
    -webkit-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    -moz-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);
    opacity: 0.95;
<span style="white-space:pre">	</span>vertical-align:middle;
<span style="white-space:pre">	</span>line-height:50px;
}
#box2016-panel div#box-top{
<span style="white-space:pre">	</span>top:0px;
}
#box2016-panel div#box-bottom{
<span style="white-space:pre">	</span>bottom:0px;
}
#box2016-panel #box-btn-prev,#box-btn-next{
<span style="white-space:pre">	</span>font-size:120px;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>font-family:'Cooper Black','Arial Black';
<span style="white-space:pre">	</span>z-index:30;
<span style="white-space:pre">	</span>color:#fff;
<span style="white-space:pre">	</span>position:absolute;
<span style="white-space:pre">	</span>display:block;
<span style="white-space:pre">	</span>cursor:pointer;
<span style="white-space:pre">	</span>text-shadow:3px 3px 4px #000000;
}
#box2016-panel #box-btn-exit{
<span style="white-space:pre">	</span>display:block;
<span style="white-space:pre">	</span>float:right;
<span style="white-space:pre">	</span>font-size:45px;
<span style="white-space:pre">	</span>font-weight:bold;
<span style="white-space:pre">	</span>font-family:'Arial Black';
<span style="white-space:pre">	</span>color:#fff;
<span style="white-space:pre">	</span>text-decoration:none;
<span style="white-space:pre">	</span>margin-right:25px;
}
#box2016-panel .box-btn:hover{
<span style="white-space:pre">	</span>color:#DFDFDF;
}
#box2016-panel #box-btn-prev{
<span style="white-space:pre">	</span>left:1%;
<span style="white-space:pre">	</span>top:40%;
}
#box2016-panel #box-btn-next{
<span style="white-space:pre">	</span>right:1%;
<span style="white-space:pre">	</span>top:40%;
}
#box2016-panel #box-centercontent{
<span style="white-space:pre">	</span>left:10%;
}
#box2016-panel #box-prevcontent{
<span style="white-space:pre">	</span>left:-105%;
}
#box2016-panel #box-nextcontent{
<span style="white-space:pre">	</span>left:105%;
}

然后jquery库 我用的1.7.2  版本 高低应该都无所谓吧

示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script language="javascript" src="myswipebox.js"></script>
<link href="myswipebox.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
body{
    background-color: #92F552;
	margin:0px;
	padding:0px;
	list-style:none;
	border-style:none;
}
div,ul,li{
	border-style:none;
}
input{
	height:40px;
	width:200px;
	font-size:30px;
}

</style>
</head>

<body>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
	swipebox.open();
	swipebox.setData(["测试内容1","测试内容2"]);
});
</script>
<input class="swipebox" type="button" value="按1钮"/>
<input class="swipebox" type="button" value="按2钮"/>
</body>
</html>

引用 mywipebox.js时会创建一个swipebox的对象

open方法会初始化界面,并给相应的按钮绑定事件

而需要弹出此box的元素 添加类

class="swipebox"

即可,要显示的数据用 swipebox.setData(参数)

此参数为一维数组内容什么都可以例如GIF

swipebox.setData(["<img src=‘test.gif‘/>","<img src=‘psb.jpg‘/>"]);

这个穿进去的内容最好自己设置过

也可以是

<div id="test" style="width:200px;height:200px;background-color:red;"></div>

swipebox.setData(["<img src=‘test.gif‘/>",$("#test")]);

对象总之设置的是html() 你懂的,原理很简单 就不多说

所以 内容框自己设计 限制大小,设置大小样式等再传进去显示

时间： 2024-11-07 01:52:40

自己设计了一个wipebox 幻灯片的相关文章

用antlr4来实现《按编译原理的思路设计的一个计算器》中的计算器

上次在公司内部讲<词法分析--使用正则文法>是一次失败的尝试--上午有十几个人在场,下午就只来了四个听众. 本来我还在构思如何来讲"语法分析"的知识呢,但现在看来已不太可能. 这个课程没有预想中的受欢迎,其原因可能是: 1.课程内容相对复杂,听众知识背景与基础差异比较大. 2.授课技巧不够,不能把复杂的知识简单化的呈现给基础稍差一点的人. 针对这两个可能的原因,我要尝试做出以下调整: 1.使用antlr来实现词法和语法的部分. 2.暂时把"编译"过程改为

C++设计实现一个不能被继承的类

C++不同于Java,Java中被final关键字修饰的类不能被继承,C++能实现不被继承的类,但是需要自己实现. 为了使类不被继承,最好的办法是使子类不能构造父类的部分,此时子类就无法实例化整个子类.在C++中,子类的构造函数会自动调用父类的构造函数,子类的析构函数也会自动的调用父类的析构函数,所以只要把类的构造函数和析构函数都定义为private()函数,那么当一个类试图从他那儿继承时,必然会由于试图调用构造函数.析构函数而导致编译错误.此时该类即不能被继承. 但由此会造成一个问题,priv

界面设计：一个像素之差产生的距离（转）

当使用Opera浏览器测试手头上正在开发的一个网站时,我发现在激活浏览器中的标签页(tab)时遇到了很大的麻烦.我说的"激活"是指用鼠标点击浏览器的标签页标签(tab)时,标签页没反应,没有切换成当前激活页.我需要点击几次才能让我想要的该死的标签页切换出来. 点击标签页没反应的原因归咎于Opera浏览器标签页标签顶端的一个像素.先解释一下我的操作习惯,我是个懒惰的人,我不喜欢精确的将鼠标移动到浏览器标签页标签的正中间.然后点击激活它.我是喜欢将鼠标直冲向想要的标签页标签,一直冲到鼠标无

IDDD 实现领域驱动设计－一个简单的 CQRS 示例

上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA.ES.Saga 等等,这些是实践 DDD 所必不可少的架构,所以,如果你不懂这些,是很难看懂上篇所提到的 CQRS Journey 和 ENode 项目,那怎么办呢?我们可以从简单的 Demo 一点一滴开始. 代码地址:https://github.com/yuezhongxin/CQRS.Sample 说明:一张很丑陋的

SQL On Hadoop 设计的一个基本原则是：将计算任务移动到数据所在的节点而不是反过来

3.1 数据本地化 SQL On Hadoop 设计的一个基本原则是:将计算任务移动到数据所在的节点而不是反过来.这主要出于网络优化的目的,因为数据分布在不同的节点,如果移动数据那么将会产生大量的低效的网络数据传输.数据本地化一般分为三种:节点局部性 (Node Locality), 机架局部性 (Rack Locality) 和全局局部性 (Global Locality).节点局部性是指将计算任务分配到数据所在的节点上,此时无需任何数据传输,效率最佳.机架局部性是指将计算任务移动到数据所在的

股市是上帝根据人性的弱点而设计的一个陷阱

有人说,股市是上帝根据人性的弱点而设计的一个陷阱,稍不留神,便可能马失前蹄.贪婪和恐惧是股市里最常见的两种情绪,简单地说,贪婪是过分地看多,恐惧是过分地看空.炒股就是和自己的人性的战争. 贪婪永远是排名第一的敌人 这届股民"太勇猛",火炕也要往里滚:明知欣泰要退市,还要"烧钱"赌一次:穿着貂皮走进去,赤身裸体爬出来! 人性的贪婪在股市里面表现的淋漓尽致,一只注定要退市且毫无翻身机会的股票,竟然在"垂死"之前,被万千股民反复炒作.他们买入的时候都坚

《中小学生Python编程入门指南》2.1 设计开发一个计算器

第二章 设计自己的第一个Python应用 1.1 设计开发一个计算器 这一节我们来尝试实现完成一个计算器的应用.毕竟我们是初学者,不可能做得那么完美,也不是真的需要实现,只是想借这一个应用的理解,我们带入一些python的教学和其他的计算机相关知识. 我们先想想,计算器我们需要什么功能?先不想象多么只能的计算器,我们要先实现简单的会加减乘除的就可以了.那么我们就知道了,计算器是要有会加减乘除计算的功能的.那除此之外呢?我们想一下计算的流程,其实就是三个部分组成:①输入.②计算.③输出.好,那我们

设计的一个网站的分布式架构

互联网的网站和大部分企业管理软件一样都是使用B/S架构模型,但是大型的公共网站B/S架构会更加复杂,对架构人员的要求更高,今天我想在自己博客里聊聊我设计的网站的B/S技术架构. 不管是B/S架构的企业管理系统还是网站技术架构可以抽象为如下简图: 在传统B/S架构的企业管理系统里,技术架构往往就是一个工程项目,各个逻辑分层都是该工程的业务逻辑模块.但是作 为提供公共服务的网站,由于用户群比较庞大,网站并发量高,需求变化大,变更频繁以及网站出于对安全的考虑,以上的逻辑分层在技术架构上的实现也就会复杂

接口设计的一个程序实例（宠物商店）

外延 以往写博客没有用那种目录的结构,今天终于会用了.如何使用目录结构请参照:目录结构的使用 实例要求 实现一个宠物商店,宠物商店的宠物可以有多种(数量由用户决定),试表示此种关系,并要求根据宠物的的关键字查找宠物的信息,所需要的宠物信息自行设计. 所用知识 接口,对象数组 实例分析 宠物信息可以自行设计,我们可以简单设计三个属性:名字.颜色.年龄 宠物的类别很多.所以宠物应该是一个标准(接口) 宠物商店有多种宠物,应该是一个宠物的对象数组 代码实现 interface Pet{ // 定义宠物