Slide-卡盘效果
<div style="width:950px;height:705px;">
<div class="J_TWidget" data-widget-config="{"circular":true,"duration":0.5,"easing":"backBoth","activeTriggerCls":"selected","effect":"fade","interval":3,"navCls":"pan_nav","contentCls":"pan_content","autoplay":true}" data-widget-type="Slide">
<div class="pan_nav" style="float:left;width:238px;height:705px;">
<div class="fl1" style="width:238px;height:156px;background:url(//gdp.alicdn.com/imgextra/i4/799193263/TB28Vx6nVXXXXcuXpXXXXXXXXXX_!!799193263.jpg);">
<div class="J_TWidget" data-widget-config="{"trigger":".fl1","align":{"node":".fl1","points":["tl","tl"],"offset":[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="width:712px;height:705px;float:left;">
<div style="width: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 自定义值 设定倒计时最终样式
如: width: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
Slide-卡盘效果的更多相关文章
- 京东SDK模板卡盘效果实现代码
最近在做京东模板,因为是最新平台,好多功能都需要摸索,俺技术一般,摸索出一个简易的卡盘功能 ——————使用的是分类推荐模块哦! 本着共享的精神,俺将代码放到这儿了,各人请自便.(代码还不够完善, ...
- 为Zepto添加Slide动画效果
一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...
- 自己动手丰衣足食,为Zepto添加Slide动画效果
一.缘由 公司的移动端项目,采用zepto为主要框架,但是zepto毕竟是精简版的jquery,体积小了,功能自然没有这么强大,特别是动画和选择器这两块,需要我们自己去拓展. 在项目开发过程中,很多页 ...
- JQuery slideToggle 演示简单的 Slide Panel 效果。
------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- Jquery mobile 新手问题总汇
1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...
- HTML滚动字幕代码参数详解及Js间隔滚动代码
html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...
- [转载]Jquery mobile 新手问题总汇
原文链接:http://www.wglong.com/main/artical!details?id=4 此文章将会持续更新,主要收录一些新手比较常见的问题. 欢迎 向我推荐比较典型的常见问题,我会记 ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件
accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...
- HTML番外整理
经过一周的个人项目与一周的团体项目,我学到了一些有用的内容,特分享如下: 一.视频 1.对在线视频的添加 在各大网站打开一个视频,在下方的分享找到HTML代码,然后复制HTML代码到自己的代码中. 2 ...
随机推荐
- Web 项目中分享到微博、QQ空间等分享功能
Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...
- js中var self=this的解释
每个函数在定义被ECMAScript解析器解析时,都会创建两个特殊的变量:this和arguments,换句话说,每个函数都有属于自己的this对象,这个this对象是在运行时基于函数的执行环境绑定的 ...
- HTTP认证机制(翻译)
发现一篇介绍HTTP认证的好文章,就尝试翻译了一下,记录在下面.(翻译的很挫,哈哈哈) 原文: http://frontier.userland.com/stories/storyReader$215 ...
- Magento1.9批量修改产品 Attribute Set
今天修改产品时遇到这样一个需求:重新设置产品的 Attribute Set,使用的是Magento1.9系统,Magento提供这样一个插件 Flagbit Change Attribute Set: ...
- linux 搭建svn
1 安装SVN 官网下载:http://subversion.apache.org/packages.html SVN客户端:TortoiseSVN,官网下载:http://tort ...
- xml/map转换器,递归设计思路
xml/map转换器 图片:http://pan.baidu.com/s/1nuKJD13 应用场景,为什么要把xml转map?我直接用jdom,dom4j操作不行吗? 如果你了解模板引擎(像velo ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- 利用 PortableBasemapServer 发布地图服务
前段时间需要给自己的C/S系统加一个地图,但是没有数据,于是就想到了使用网上的切片地图,但是C/S系统又不能联网,于是就想本地发布切片服务来使用. 本来想用ArcGIS Server来发布从网上下载的 ...
- 附加数据库失败,sql2008,断电数据库日志受损
附加数据库失败,提示:无法在数据库 'DBNAME' (数据库 ID 为 7)的页 (1:210288) 上重做事务 ID (0:0) 的日志记录或者在重做数据库 'DBNAME' 的日志中记录的操作 ...
- 【译】RabbitMQ:工作队列(Work Queue)
在第一篇我们写了两个程序通过一个命名的队列分别发送和接收消息.在这一篇,我们将创建一个工作队列在多个工作线程间分发耗时的工作任务. 工作队列的核心思想是避免立刻处理资源密集型任务导致必须等待其执行完成 ...