PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » js电子相册,jquery电子相册,电子相册制作,网页js电子相册

js电子相册,jquery电子相册,电子相册制作,网页js电子相册

此文被围观2078日期: 2012-09-10 分类 : 前端设计  标签:  ·······
在做项目“最妖精”的时候,要用到电子相册。在北京一网站上找到这样的效果,最后给扣了下来,记录在这里!

第一步下载所需要的js文件, 当然jquery肯定是要用到的。 <script type="text/javascript" src="/Public/Js/jquery-1.7.1.min.js"></script> //加载相册列表的 <script type="text/javascript" src="/Public/Js/jquery.jcarousel.pack.js"></script> //真正用到的是后面这两个js <script type="text/javascript" src="/Public/Js/swfobject.js"></script> //下面这个js是关键,里面包括了要加载的idflash的背景,还有swf的地址 <script type="text/javascript" src="/Public/Js/flippingbook.js"></script>   然后加载   <script type="text/javascript"> flippingBook.pages = ["http://www.adophper.com/20110602164132_147.jpg","http://www.adophper.com/20110602164134_600.jpg","http://www.adophper.com/20110602164136_905.jpg","http://www.adophper.com/20110602164138_861.jpg","http://www.adophper.com/20110602164141_805.jpg","http://www.adophper.com/20110602164143_448.jpg","http://www.adophper.com/20110602164145_383.jpg","http://www.adophper.com/20110602164149_826.jpg","http://www.adophper.com/20110602164152_973.jpg","http://www.adophper.com/20110602164154_154.jpg","http://www.adophper.com/20110602164200_567.jpg","http://www.adophper.com/20110602164202_625.jpg","http://www.adophper.com/20110602164204_653.jpg","http://www.adophper.com/20110602164214_780.jpg","http://www.adophper.com/20110602164216_556.jpg","http://www.adophper.com/20110602164221_955.jpg","http://www.adophper.com/20110602164226_875.jpg","/Public/Uploads/end.jpg"]; flippingBook.settings.bookWidth = 650; flippingBook.settings.bookHeight = 420; flippingBook.settings.pageBackgroundColor = "0xF8F8EF";//背景颜色 flippingBook.settings.backgroundColor = ""; flippingBook.settings.zoomUIColor = ""; flippingBook.settings.useCustomCursors = false; flippingBook.settings.dropShadowEnabled = false, flippingBook.settings.zoomImageWidth = 844; flippingBook.settings.zoomImageHeight = 1277; flippingBook.settings.downloadURL = ""; flippingBook.settings.flipSound = ""; flippingBook.settings.flipCornerStyle = "first page only"; flippingBook.settings.zoomHintEnabled = true;   // default settings can be found in the flippingbook.js file flippingBook.create(); </script>   请注意观察这些图片,最后一张是不一样的!   Html代码:   <div id="fbContainer"> <a class="altlink" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"> <div id="altmsg">Download Adobe Flash Player.</div> </a> </div>   注意:id="fbContainer"是关键哦!可以在flippingbook.js中修改   附件下载地址:js电子相册,jquery电子相册下载

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.