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 ...
随机推荐
- ecostore搜索注意事项
ecostore搜索时会把特殊字符转换为相应的文字 如 洋河480ml_52°天之蓝 进行html url编码时会把_(下划线)转换成%25xia%25(%25对应的ascii是%) 搜索时会把%.x ...
- egret dragonbones部件替换产生位移的解决方案
原理:使用Armature.getSlot("urpart").display.texture去替换骨骼纹理即可需要:1 骨骼动画导出的时候不要裁剪部件的透明区域,在导出设置里面设 ...
- JQuery中的mouseover和mouseenter的区别
mouseover和mouseout是一对:mouseenter和mouseleave是一对. 相同点:都是鼠标经过就触发事件 不同点: 给外盒子一个经过触发事件,但是mouseover会在鼠标经过外 ...
- spring3mvc与struts2比较
目前企业中使用SpringMvc的比例已经远远超过Struts2,那么两者到底有什么区别,是很多初学者比较关注的问题,下面我们就来对SpringMvc和Struts2进行各方面的比较: 1. 核 心控 ...
- ICE第四篇-----python版本
ice文件: module Modipplace { interface Ipplace{ string iptoplace(string s); }; }; ...
- php学习-数组(一)
数组函数可以对大量性质相同的数据进行存储,排序,插入及删除等操作. 学习任务: 声明数组,输出数组,遍历数组,查询数组中指定元素,获取数组中的最后一个元素. 删除数组中重复的元素.统计数组中元素的个数 ...
- 【亲测】Python:解决方案:Python Version 2.7 required, which was not found in the registry
好久不更新随笔了,今天因为数据可视化作业,想抓取一些人人网好友关系数据,于是开始尝试python,用到numpy模块,安装的时候提示: 'Python Version 2.7 required, wh ...
- UIImageView控件
UIImageView是用于显示图像的,在iOS开发中,我们无需专门去写什么代码,不需要检查设备的类型,只需要把1x.2x.3x的图像添加到项目中,图像视图会自动的在正确的时间加载正确的图像. (1) ...
- 企业证书APP发布流程 分类: ios相关 app相关 2015-06-10 11:01 212人阅读 评论(0) 收藏
企业发布app的 过程比app store 发布的简单多了,没那么多的要求,哈 但是整个工程的要求还是一样,比如各种像素的icon啊 命名规范啊等等. 下面是具体的流程 1.修改你的 bundle i ...
- nodejs抓取数据一(列表抓取)
纯属初学...有很多需要改进的地方,请多多指点... 目标是抓取58同城 这个大分类下的列表数据: http://cd.58.com/caishui/?PGTID=14397169455980.924 ...