网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery实现带水平滑杆的焦点图动画插件
内容
    这是一款很实用的jQuery焦点图动画插件，跟其他jQuery焦点图插件不同的是，它带有一个水平的滑杆，你可以通过滑动滑杆实现图片的切换，也可以通过点击图片来切换。这款焦点图是纯jQuery实现的，兼容性和实用性都还可以，而且也比较简单，很容易集成到需要的项目中去。
    效果展示如下所示：
    名单
    HTML代码
    <div id="wrapper">
    <ul id="flip">
    <li ><img src="1.png" /></li>
    <li ><img src="2.png" /></li>
    <li ><img src="5.png" /></li>
    <li ><img src="4.png" /></li>
    <li ><img src="3.png" /></li>
    </ul>
    <div id="scrollbar"></div>
    </div>
    CSS代码
    .ui-jcoverflip {
    position: relative;
    }
    .ui-jcoverflip--item {
    position: absolute;
    display: block;
    }
    /* Basic sample CSS */
    #flip {
    height: 200px;
    width: 630px;
    margin-bottom: 50px;
    }
    #flip .ui-jcoverflip--title {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    color: #555;
    }
    #flip img {
    display: block;
    border: 0;
    outline: none;
    }
    #flip a {
    outline: none;
    }
    #wrapper {
    height: 300px;
    width: 630px;
    overflow: hidden;
    position: relative;
    }
    .ui-jcoverflip--item {
    cursor: pointer;
    }
    body {
    font-family: Arial, sans-serif;
    width: 630px;
    padding: 0;
    margin: 0;
    }
    ul,
    ul li {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none;
    }
    #scrollbar {
    position: absolute;
    left: 20px;
    right: 20px;
    }
    jQuery代码
    jQuery( document ).ready( function(){
    jQuery( '#flip' ).jcoverflip({
    current: 2,
    beforeCss: function( el, container, offset ){
    return [
    $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
    $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
    ];
    },
    afterCss: function( el, container, offset ){
    return [
    $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
    $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
    ];
    },
    currentCss: function( el, container ){
    return [
    $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
    $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
    ];
    },
    change: function(event, ui){
    jQuery('#scrollbar').slider('value', ui.to*25);
    }
    });
    jQuery('#scrollbar').slider({
    value: 50,
    stop: function(event, ui) {
    if(event.originalEvent) {
    var newVal = Math.round(ui.value/25);
    jQuery( '#flip' ).jcoverflip( 'current', newVal );
    jQuery('#scrollbar').slider('value', newVal*25);
    }
    }
    });
    });
    以上代码是针对jQuery实现带水平滑杆的焦点图动画插件，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/14 11:35:59