zoukankan      html  css  js  c++  java
  • Slide-卡盘效果

        <div style="950px;height:705px;">
            <div class="J_TWidget" data-widget-config="{&quot;circular&quot;:true,&quot;duration&quot;:0.5,&quot;easing&quot;:&quot;backBoth&quot;,&quot;activeTriggerCls&quot;:&quot;selected&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;interval&quot;:3,&quot;navCls&quot;:&quot;pan_nav&quot;,&quot;contentCls&quot;:&quot;pan_content&quot;,&quot;autoplay&quot;:true}" data-widget-type="Slide">
                <div class="pan_nav" style="float:left;238px;height:705px;">
                    <div class="fl1" style="238px;height:156px;background:url(//gdp.alicdn.com/imgextra/i4/799193263/TB28Vx6nVXXXXcuXpXXXXXXXXXX_!!799193263.jpg);">
                        <div class="J_TWidget" data-widget-config="{&quot;trigger&quot;:&quot;.fl1&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.fl1&quot;,&quot;points&quot;:[&quot;tl&quot;,&quot;tl&quot;],&quot;offset&quot;:[0,0]}}" data-widget-type="Popup" style="display:none;">
                             <img width="238" height="156" data-pinit="registered" src="//gdp.alicdn.com/imgextra/i1/799193263/TB2wF9CnVXXXXa6XXXXXXXXXXXX_!!799193263.jpg" />
                        </div>
                    </div>
                </div>
                <div class="pan_content" style="712px;height:705px;float:left;">
                    <div style="712px;height:705px;">
                         <img src="//gdp.alicdn.com/imgextra/i2/799193263/TB2j_qLnVXXXXXBXXXXXXXXXXXX_!!799193263.jpg" alt="" border="0" style="display:block;" />
                    </div>
                </div>
            </div>
        </div>
    
    
    配置参数    参数可选值    作用说明
    effect    none/fade/scrolly/scrollx
    (默认值:none)
    
    切换时的动画效果
    none, 最朴素的显示/隐藏效果
    fade, 可实现淡隐淡现的效果
    scrolly, 垂直滚动
    scrollx, 水平滚动
    
    easing    easeOutStrong/easeBoth    滚动的动画方方式
    countdown    true/false (默认值:false)    是否开启倒计时样式
    countdownFromStyle    自定义值    设定倒计时最终样式
    如: 15px 表示进度条最终宽度,可先在CSS里对样式进行定义
    
    navCls    自定义值    对其进行轮播的目标列表的class值
    contentCls    自定义值    轮播列表所对应的内容列表的class值
    delay    自定义数值 (默认值:1)    延迟加载时间
    .1 == 100ms
    
    triggerType    mouse/click<>
    (默认值:mouse)
    
    触发方式——
    mouse:鼠标经过触发
    click:鼠标点击触发
    
    hasTriggers    true/false (默认值:true)    是否设置触发点
    steps    自定义数值 (默认值:1)    切换视图内有多少个panels
    viewSize    自定义值    切换视图区域的大小。
    一般不需要设定此值,仅当获取值不正确时,用于手工指定大小
    
    activeIndex    自定义数值 (默认值:0)    默认激活的列表项
    activeTriggerCls    自定义值 (默认值:active)    默认激活列表项的class值
    duration    自定义值(默认值:0.5)    动画时长
    .1 = 100ms
  • 相关阅读:
    php实现多张图片打包下载
    bootstrap的简单学习
    接口的简单调用模式
    oracle 日期常用函數 (SYSDATE、日期格式)
    php通过ajax请求数据后台返回数据要求和前台解析
    jquery+ajax实现分页
    Fatal error: Call to undefined function curl_init()问题
    利用php比较精确的统计在线人数的办法
    sql服务器启动不了问题
    字符串字母大小写转换(10)
  • 原文地址:https://www.cnblogs.com/beata/p/5717506.html
Copyright © 2011-2022 走看看