源码

首先看个列子:http://www.webhek.com/misc/impress-js昨天,我写了一些关于Impress.js的东西,对于创建在线的自我展示,这是一个非常不错的JavaScript库。由于是线上发布,所有有部分人问我怎么正确的使用它。因为没有在实际的项目页面设置帮助文档。这一篇文章将帮助你开始创建一个简单的幻灯片,但是之后你一定要完成它,可以用它来做很多酷炫的效果,唯一限制你的就是你的创造力。需求为了看到效果,请使用GoogleChromeorSafari(orFirefox10orIE10).Impress.js目前并不兼容早期的FirefoxorInternetExplorer版本。创建首先,要创建一个Web页面。我创建的页面如下:<!doctypehtml><html><head><title>ImpressTutorial</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"></head><body></body></html>在</body>之前添加impress.js文件,将Impress.js导入到你的项目中<scripttype="text/javascript"src="impress.js"></script>接下来创建一个id是impress的div容器包裹这个幻灯片,<divid=“impress”></div>创建幻灯片在个人展示中,你将看到创建一个幻灯片是如此的简单。每个幻灯片是一个class为step的div元素(被包裹在id是impress的容器内)(ps:<div>的id可有可无,当有id时url中的hash变化是随着id走;反之就是step-[num],如)<divclass="step">Myfirstslide</div>创建幻灯片的同时,要添加一些数据属性。下面是一些可用的数据属性:data-x=幻灯片的x坐标data-y=幻灯片的y坐标data-z=幻灯片的z坐标data-scale=通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍data-rotate=通过一个数字度数来确定旋转你的幻灯片data-rotate-x=为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)data-rotate-y=为3D用,这个数字度数是它应该相对y轴旋转多少度。(左摆/右摆)data-rotate-z=为3D用,这个数字度数是它应该相对z轴旋转多少度。让数据属性起作用接下来的幻灯片设置将引导你理解每一个数据属性从一个初始的幻灯片开始,这个幻灯片已将它data-x和data-y数据属性设置为0,所以会出现在页面的中间。<divclass="step"data-x="0"data-y="0">Thisismyfirstslide(显示的内容)</div>第二个幻灯片的data-x值为500、data-y值为0,活动的时候它将会向左平移(滑动)500px的地方。<divclass="step"data-x="500"data-y="-400">Thisisslide2</div>第三张幻灯片其data-x值不变,data-y位置为-400,这将会是从顶部400px处滑入屏幕。<divclass="step"data-x="500"data-y="-400">Thisisslide3</div>第四张幻灯片来个新花样,使用data-scale的值控制其缩放大小。data-scale=”0.5″表示着它应该是一半的尺寸,当它变成活动的演示时将通过必需的倍数调节所有幻灯片的缩放尺寸,从这一步绚丽开始起步<divclass="step"data-x="500"data-y="-800"data-scale="0.5">Thisisslide4</div>第五张幻灯片旋转属性允许你旋转一个幻灯片到当前视图,幻灯片5被设置旋转90度,视觉效果微叼哈<divclass="step"data-x="0"data-y="-800"data-rotate="90">Thisisslide5</div>第六张幻灯片开始3Dstyle,可为每个维度的轴指定旋转属性(x,y,z)。x轴是横轴,意思是你可使事物倾斜(正值)或向后(负值),y轴是竖轴,所以你可使事物向左摇摆(负值)或向右(正值),z轴是纵轴,这将是旋转的东西向上(负值)和向下(正值)。<divclass=“step”data-x=“-2600″data-y=“-800″data-rotate-x=“30”data-rotate-y=“-60″data-rotate-z=“90”data-scale=“4”>Thisisslide7andithasa3DtransitionANDascale.</div>对于不支持Impress.js的浏览器做降级处理在<divid=”impress”>之前添加如下一个div<divclass="no-support-message">Yourbrowserdoesn'tsupportimpress.js.TryChromeorSafari.</div>然后将下列样式添加到你的样式表中:.no-support-message{display:none;}.impress-not-supported.no-support-message{display:block;}impreess源码已经发布在GitHub上,地址:https://github.com/bartaz/impress.js官方demo地址:http://bartaz.github.com/impress.js

2013-4-7 2383 0
源码

用iframe调用分两种方法,一种是调用自己可控的网页,另一种是调用不可控的网页。如果是自己调用自己的,那我们直接用锚连接就可以。具体方法:<iframesrc=你的网址#锚点></iframe>这样就可以了。在这其中可以设置自己的样式大小和宽度。另一种是调用别人的网页,我们不可控,没办法加锚点,怎么办呢?我们用下面的方法。<IFRAMEvspace=300hspace=”300″src=”你的网址”frameBorder=0scrolling=nowspace=”200″></IFRAME>这里面的内容都是什么呢?vspace是垂直方向移动;向上移动100像素格式是vspace=-100hspace是水平方向移动;向左移动100像素格式是hspace=-100width和marginWidth都是嵌入框架的宽度height和marginheight都是嵌入框架的高度scrolling是,是否显示下拉标识,”no”是隐藏,”yes”是显示leftmargin是距离左端的距离topmargin是距离上端的距离js操作iframe的一些知识1.打印iframeeg.frameName.document.execCommand(‘print’);2.获取iframeeg.varifr_window=window.frames["frameName"];3.获取iframe中的元素eg1.将iframe中id为elementId的元素置为不显示:varifr_window=window.frames["frameName"];ifr_window.elementId.style.display=‘none’;eg2.获取iframe中id为listTable的表格varoTable=window.frames["myFrame"].document.all.listTable;4.隐藏或显示表格的某列js函数:functionsetHiddenOrShowCol(oTable,iCol,type){for(i=0;i<oTable.rows.length;i++){oTable.rows[i].cells[iCol].style.display=type;}}调用举例,将id为listTable的表格元素的第4列置为不显示:varoTable=window.frames["myFrame"].document.all.listTable;setHiddenOrShowCol(oTable,3,‘none’);调用举例2,将id为listTable的表格元素的第4列置为显示:varoTable=document.frames.myFrame.document.all.listTable;setHiddenOrShowCol(oTable,3,‘block’);JS部分是在网上看到的,还没试呢,我正在和同事商量用JS+CSS来空间,用iframe调用,看会不会更人性化,对浏览器的兼容性好点。有试过的也可以来分享分享啊。可能看到上面不是很清楚,下面有个列子,可以更清楚的查看:<IFRAMEwidth="1010"height="2870"src="http://www.xyxdxl.com/guestbook/"frameBorder=0scrolling=novspace=-380hspace=-240></IFRAME>上面的width,height为宽高,vspace为把网页上面的部分去掉380像素,hspace左边去掉240像素,得到网页。