javascript动态卷页、翻页或卷角jquery插件

javascript动态卷页、翻页或卷角jquery插件

  jQuery插件 page peel ,只需要几行javascript代码就能轻松实现动态卷页、翻页或卷角flash广告效果。配置参数如下,具体使用方法查看示例中的demo

var defaults = {

            // 卷页、翻页或卷角所在位置
           // 由于只制作了顶部右上角和底部左下角的flash效果,所有指定为flash时,只能有2个位置。
           // 为图片时,资源文件中只有顶部右上角的大图片和小图片,所以只有一个位置,不过稍微处理下就可以生成4个角的图片了
            hPosition: 'right', //水平位置,可以使用'left'或者 'right'
            vPosition: 'top', // 垂直位置,可以使用 'top' 或者 'bottom'

            // 是否使用flash效果,如果为false,这使用图片效果,没那么好
            flash: true,

            // 设置卷页、翻页或卷角最小化时的宽和高,以及不使用flash效果时显示的小图片
            smallWidth: 120,//默认宽,注意如果使用flash效果,不要更改这个值,因为flash卷角最小化时显示的效果大小为120x120,如果小于这个尺寸会显示不完flash
            smallHeight: 120,//默认高,注意事项同上
            smallBG: 'pp-src/smallBG.png',//不使用flash时可以配置这个项显示小图片,高和宽你的小图片要一致。如果为flash可以不配置此项或者保持默认

            // 设置卷页、翻页或卷角最大化时的宽和高,以及不使用flash效果时显示的大图片
            bigWidth: 500,//默认宽
            bigHeight: 500,//默认宽
            bigBG: 'pp-src/bigBG.png',//不使用flash时最大化显示的图片
            bigAd: 'pp-src/bigAd.jpg',//广告图片,仅flash:true时有用
            bigSWF: 'pp-src/page-peel-big.swf',//卷页、翻页或卷角最大化时显示的flash

            // 是否启用加载介绍动画,就是自动从最小化到最大化,然后最大化到最小化播放一次
            introAnim: false,//是否启用,默认不启用
            bigSWFIntro: 'pp-src/page-peel-big-intro.swf',//介绍动画地址,注意如果设置introAnim为true,需要配置这个,并且以后的动画效果还是这个,自动覆盖bigSWF配置的swf
            introWidth: 300,//介绍动画宽
            introHeight: 300,//介绍动画高
            
            // 点击卷页、翻页或卷角是打开的链接地址,设置为blank时则不弹出链接
            adLink: 'blank',//默认不弹出链接
            adLinkTarget: '_blank'//链接打开目标窗口
        };

 

插件来源:http://www.smple.com/pagePeel/

阅读(32)喜欢(0)不喜欢(0)64.03KB浏览器查看效果 点击下载