Pages (21) « Prev 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next »

Flash电子杂志翻页组件FlippingBook

  记得还是06年上半年,也是我刚毕业那会儿,同事给我看了NewWebPick第三期,现在还记忆犹新,完美的翻书效果、视频、音乐、文字、动画、漂亮插画...当时觉得很兴奋,当然也不知道如何实现。

  其实NewWebPick绝对算是电子杂志的前辈,我想也有很多朋友和我一样,是被它她的完美所打动,大家对电子杂志的认识也应该从那个时候开始。

  

  目前制作电子杂志的方法很多,详情请参考电子杂志制作软件大全,当然这还只是06年的资料,以上方法虽然能够实现电子杂志的效果,但是我确实不敢恭维啊,效果太差,可控性太弱,完全的模板机制,还给你打上个版权之类的,实在是不能忍受...

  

  推荐一个吧,FlippingBook国外的组建,官网http://flippingbook.com/ 很好用,但前提条件是你得懂as2.0,因为你要进行二次应用开发。我觉得这个应该比NewWebPick的核心好或者NewWebPick本来就是用FlippingBook的组件。网络上有FlippingBook1.8.6版本提供下载,我看都是些免费版,功能很弱,核心代码大概只有2400行,官方上有最新的1.8.9版本,核心代码大概有4000行。当然效果也好多了,如果要购买的话,费用大概在1600RMB,我这里向大家提供1.8.6版本下载。 当然我并不推荐大家使用免费版,还是支持正版吧!

  

  下载FlippingBook翻页组件

解决"ie6下png透明图片"的兼容问题之js方法

IE6不支持PNG半透明图片的缺陷为web设计带来了极大的不便,之前曾经介绍过用滤镜+hack的方法实现显示PNG,不过实现起来相当繁琐。还有一种网上比较流行的方法,更加简便,下面详细介绍这种方法:

把以下代码保存为correctpng.js

function correctPNG()

{

 for(var i=0; i<document.images.length; i++)

 {

  var img = document.images[i]

  var imgName = img.src.toUpperCase()

  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

  {

  var imgID = (img.id) ? "id='" + img.id + "' " : ""

  var imgClass = (img.className) ? "class='" + img.className + "' " : ""

  var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "

  var imgStyle = "display:inline-block;" + img.style.cssText

  if (img.align == "left") imgStyle = "float:left;" + imgStyle

  if (img.align == "right") imgStyle = "float:right;" + imgStyle

  if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

  var strNewHTML = "<span " + imgID + imgClass + imgTitle

  + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

  + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

  img.outerHTML = strNewHTML

  i = i-1

  };

 };

};

if(navigator.userAgent.indexOf("MSIE")>-1)

{

window.attachEvent("onload", correctPNG);

};

在网页的头部引用一下

<SCRIPT language=JavaScript src="correctpng.js" type=text/javascript></SCRIPT>

使用的时候直接用img标签即可。

解决"ie6下png透明图片"的兼容问题之滤镜+hack方法

PNG ( Portable Network Graphics ) 格式的无损压缩和半透明特性对增强网页效果减少网页体积有着重要的作用,但由于 IE6 不支持 PNG,所以一直未能得到广泛的应用。虽然 IE7 已经支持 PNG,但目前 IE6 还是主流,怎么样让 IE6 也使用 PNG 呢?网上有相关的介绍,下面我也尝试做一下介绍,希望在表达上能更加通俗易懂。

IE5.5+ 的 AlphaImageLoader 滤镜为 PNG 提供良好的支持,虽然 IE5.0 无法支持,但毕竟是非常非常小的一部分,将来会更小,因此我们不考虑。

滤镜的语法:

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled, sizingMethod=sSize, src=sURL )

属性:

enabled: 可选项,布尔值(Boolean)。设置或检索滤镜是否激活。true | false

true: 默认值,滤镜激活。

false: 滤镜被禁止。

sizingMethod: 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

crop: 剪切图片以适应对象尺寸。

image: 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

scale: 缩放图片以适应对象的尺寸边界。

src: 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

使用方法:

html>body #png{background:url(images/bg.png) no-repeat;} /* FF,Opera */

*html #png{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="images/bg.png");background:none;} /* IE5.5+~IE7+ */

Firefox,Opera 支持 PNG ,使用“>”子选择器识别,而IE不识别该选择器(包括IE7)。

虽然 IE7 支持 PNG,但方便起见,还是采用滤镜,使用通配符“*”,该通配符只有 IE 才能识别。

不过使用该滤镜,区域内的超链接按钮等将会失效,解决办法?使用“position”使它们浮在上面。

解决"ie7打开页面有源文件但页面空白"的问题

问题:

我博客编码是utf-8的。有时候打开页面是一片空白,刷新一下又正常了,但查看源文件又是完整的。在ie6和firefox下都正常,但是在ie7下偶尔会出现这样的情况。

一开始我怀疑是IDC的问题,后来又想到了js、css、页面结构等。偶然间我想到了编码。毕竟编码的问题已经不是一两次找过我麻烦了。

解决:

<title>LC'BLOG</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

交换一下顺序
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>LC'BLOG</title>

原因:

为什么只有ie7会出现这样的问题呢?这是由于ie7解析网页编码时以html内的标签优先,而后才是http header内的讯息,而mozilla系列的浏览器则刚刚相反。

由于utf-8编码的页面为3个字节表示一个汉字,而普通的gb2313或big5是两个。页面输出时,由于上述原因,使浏览器解析、输出<title></title>的内容时,如果在</title>前有奇数个全角字符时,ie7把utf-8当作两个字节解析时出现半个汉字的情况,这时该半个汉字会和</title>的"<"结合成一个乱码字,导致ie7无法读完<title>部分,使整个页面为空百输出。而这个时候如果察看源文件的话,会发现实际上整个叶面全部已经输出了。

因此最简单的解决办法是在网页文件的<head></head>标签中一定要把字符定义<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />放在<title></title>之前。

实际上,其他编码版本的也存在类似的问题,只是我们大家的浏览器默认编码都是 GBK 所以更不容易被察觉罢了。

怎样写出优秀的代码?

不管你用什么语言进行开发,所有的优秀代码都会展示出共有的经典品质:简练,易于理解,模块化,层次性,设计良好,高效,优雅,并且清晰。

简练。这意味着能用五行代码解决的问题,绝不用十行代码。这也意味着,必须花费更多的精力来保证代码的简练,而不是生产令人费解的代码;这还意味着,你所厌恶的事情,是连篇累牍的开放性代码和函数。简练——即结构好,可执行,设计优秀——可以让你的代码更易于理解,也减少了错误的发生。

可读性强。正如其字,这说明你的代码应该更能让其他人看懂。要做到可读性强,就得多写注释,符合大众习惯,不要自作聪明地命名变量,比如说,用 taxrate 代替 rt 。

模块化。这意味,你得像宇宙的构成一样来开发程序。世界是由分子构成的,而这些分子又同原子,电子,核子,夸克,和连线 (如果你相信的话) 组成。类似的,优秀的程序也是由小模块建立成大的系统,而这些小模块又由更小的部分来组成。你完全可以只使用移动,插入和删除三个简单的应用,来编写一个文本编辑器。就像原子的构成方式一样,软件的组件也应该具有复用性。


Pages (21) « Prev 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next »