js制作ppt阅读文档类型
前几天开发中,客户要求在页面中展示一个类似ppt文档的一个东西,用轮播展示,但是有缩略图,和展示的大图,本想找些插件来做,后来想想,自己试下吧。。
有些简陋,但是能用,毕竟一行一行写的,留下来当笔记用吧。
下面是代码,有些粗糙[/害羞],但功能都有[/哈哈]
html部分
<div class="con">
<p id="big_img">
<img src="" />
</p>
<div class="wai">
<div class="wai_left"></div>
<div class="nei">
<ul class="ul_img">
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
</div>
<div class="wai_right"></div>
</div>
</div>
css部分
.con{
width:80%;
margin:0 auto;
border:1px solid #8F8F8F;
}
#big_img img{
width:100%;
height:500px;
}
.wai{
width:100%;
text-align:center;
height:100px;
position: relative;
}
.wai>div{
float:left;
}
.wai_left,.wai_right{
width:10%;
height:100px;
position: relative;
}
.wai_left:before{
content:"";
position: absolute;
left:20px;
top:25px;
width: 35px;
height: 35px;
border-left: 5px solid #B4B2B2;
border-top: 5px solid #B4B2B2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.wai_right:before{
content:"";
position: absolute;
right:20px;
top:25px;
width: 35px;
height: 35px;
border-right: 5px solid #B4B2B2;
border-bottom: 5px solid #B4B2B2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nei{
float:left;
width:80%;
height:100px;
overflow:hidden;
position: relative;
}
.ul_img{
overflow: auto;
position: absolute;
left:0;
right:0;
}
.ul_img li{
height:100px;
float:left;
text-align:center;
opacity: 0.5;
}
.ul_img li img{
width:95%;
height:91px;
border:2px solid transparent;
}
#back{
opacity: 1;
}
#back img{
border:2px solid red;
}
js部分
var Page = {
num: 0,
outWidth: 0,//获取外层框的宽度
singleWidth: 0,
len: 0, //获取移动框的个数
init: function () {
var self = this;
//初始化
self.outWidth = $(".nei").width();
self.singleWidth = self.outWidth/6;
$(".ul_img li").width(self.singleWidth + "px");//设置单个移动框的宽度
self.len = $(".ul_img li").length;
$(".ul_img").width(self.outWidth/6*self.len); //内层框宽度设置(单个移动框*个数)
//默认状态
$("#big_img").find("img").attr("src",$(".ul_img li").eq(0).find("img").attr("src"));
$(".ul_img li").eq(0).attr("id","back");
this.bind();
},
bind: function () {
this.imageZoom();
this.moveLeft();
this.moveRight();
},
imageZoom: function () {
// 点击小图赋值给大图
$(".ul_img li").on("click",function(){
$(this).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(this).find("img").attr("src"));
});
},
moveLeft: function () {
var self = this;
$(".wai_left").on("click",function(){
//限制移动到最左
if(self.num > 0){
self.num--;
$(".ul_img").animate({left:-self.singleWidth*self.num});
}
//选中框的下标--
var index = $("#back").index();
if(index > 0){
index--;
$(".ul_img li").eq(index).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(".ul_img li").eq($("#back").index()).find("img").attr("src"));
}else{
//选中框移动到最左时 再点击 回到第最后一个位置
$(".ul_img li").eq(self.len-1).attr("id","back").siblings().attr("id","");
$(".ul_img").animate({left:-(self.len-6)*self.singleWidth + "px"});
self.num = self.len-6;
}
});
},
moveRight: function () {
var self = this;
$(".wai_right").on("click",function(){
//页面能够显示完整的情况下 移动
if(self.num < self.len-6){
self.num++;
$(".ul_img").animate({left:-self.singleWidth*self.num});
}
//选中框的下标++
var index = $("#back").index();
if(index < self.len){
index++;
$(".ul_img li").eq(index).attr("id","back").siblings().attr("id","");
$("#big_img img").attr("src",$(".ul_img li").eq($("#back").index()).find("img").attr("src"));
}
//选中框移动到最后时 再点击 回到第一个位置
if(index == self.len){
$(".ul_img li").eq(0).attr("id","back").siblings().attr("id","");
$(".ul_img").animate({left:0});
self.num=0;
}
});
}
};
Page.init();
有些地方有用到JQ ,不能忘记引用
js制作ppt阅读文档类型的更多相关文章
- DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...
- doctype(文档类型)的作用是什么?转载
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. Document Type ...
- Babylon.js官方性能优化文档中文翻译
在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 ...
- Atitit.论垃圾文件的识别与清理 文档类型垃圾文件 与api概要设计pa6.doc
Atitit.论垃圾文件的识别与清理 文档类型垃圾文件 与api概要设计pa6.doc 1. 俩个问题::识别垃圾文件与清理策略1 1.1. 文件类型:pic,doc,v,m cc,isho pose ...
- js/css在html文档中的引用外部文件方式对比
包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- Doctype文档类型、作用及触发方式
Doctype文档类型 1) 该标签可声明三种 DTD 类型,分别表示严格版本.过渡版本以及基于框架的 HTML 文档. 2) HTML 4.01 规定了三种文档类型:Strict.Transit ...
- Umbraco文档类型定义多个template
利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...
- 彻底解决android读取中文txt的乱码(自动判断文档类型并转码
原文:http://blog.csdn.net/handsomedylan/article/details/6138400 public String convertCodeAndGetText(St ...
随机推荐
- Codeforces Round #364 (Div. 2) E. Connecting Universities (DFS)
E. Connecting Universities time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- mysql基础---日志文件
一 基本日志文件 MYSQL有不同类型的日志文件(各自存储了不同类型的日志),从它们当中可以查询到MYSQL里都做了些什么,对于MYSQL的管理工作,这些日志文件是不可缺少的. 1.错误日志(The ...
- unittest单元测试框架总结
unittest单元测试框架不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行,该测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果.今天笔者 ...
- Ketama Consisent Hash
问题描述 有一些目标节点 v1, v2...vn 需要一个算法,能够将任意key映射到目标节点中的一个vx 评价方式 1. 对于一个比较大的key集合,分布在各个目标节点的key的数量要尽可能均匀 2 ...
- mysql 插入数据后返回当前的自增ID方法
存储过程的写法: mysql>create procedure test( ->in username varchar(50), ->in password varchar(50), ...
- 解决SSh连接过慢
ssh 连接的时候特别慢 解决方法: 修改配置文件 /etc/ssh/sshd_config GSSAPIAuthentication yes --->no 81行左右 #UseDNS yes ...
- ios系统 ipa文件 打包流程详解 及 常见问题处理
注:先反省一下,原本打算一天一篇,每天进步一点点,但是最近变懒了,居然三天没有更新,在此告诫各位道友及我自己,程序员需戒欲,搞技术需持之以恒,不能三天打鱼,两天晒外. 现在步入主题,前段时间使用xco ...
- Undefined symbols for architecture i386: "_crc32", referenced from:——crc链接错误
有时候用别人的框架,你会碰到下面的错误,很是吓人,什么玩意,我怎么看不懂!!! Undefined symbols for architecture i386: "_RELEASE&quo ...
- sgu176 Flow Construction【有源汇有上下界最小流】
同样是模板题. 首先将有源汇转换为无源汇,假设原来的源汇为st,我们加入的源汇为ST,那么我们应该从t到s连一条流量为+∞的边,使原来的st满足收支平衡,退化为普通节点. 分离必要边和其他边,从S到T ...
- 从字符串拼接看JS优化原则
来自知乎的问题:JavaScript 怎样高效拼接字符串? 请把以下用于连接字符串的JavaScript代码修改为更高效的方式: var htmlString ='< div class=”co ...