<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 ...
随机推荐
-
Java内存模型深度解析:final--转
原文地址:http://www.codeceo.com/article/java-memory-6.html 与前面介绍的锁和Volatile相比较,对final域的读和写更像是普通的变量访问.对于f ...
-
sql sever跨数据库复制数据的方法【转】
1,用Opendatasource系统函数 详细的用法已经注释在sql代码中了.这个是在sqlserver到sqlserver之间的倒数据.2005,2008,2012应该都是适用的. --从远程服务 ...
-
网页倒计时,动态显示";&#215;&#215;年还剩&#215;&#215;天&#215;&#215;时&#215;&#215;分&#215;&#215;秒";
var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...
-
CentOS7安装Nginx-1.9.9+PHP5.6
linux系统CentOS7 Nginx 下载地址http://nginx.org/en/download.html wget下载路径http://nginx.org/download/nginx-1 ...
-
Myeclipse10编写jsp时出现 Multiple annotations found at this line:
今天,老师讲完课做了一个小练习,就是编写一个jsp页面.写完后,我发现少些了点东西,我准备使用<% %>添加是发现,报错了 Multiple annotations found at th ...
-
2013 ACM/ICPC Asia Regional Changsha Online&ndash;C (模拟)
题目描述 略... 题解 注意控制精度即可....变量全部定义成double,结果round就行....妈蛋....被这题目恶心死了.... 代码: #include <iostream> ...
-
Ajax访问PHP页面出现的跨域问题
1.跨域问题:简单来说就是A域名下的程序想从B域名下的文件里面获取信息(这句话是我上网看到的) 2.一般请求(本地测试): 请求页 响应页 这样做是没问题的. 但我如果将Ajax请求的url ...
-
关于极限精简版系统(RAMOS专用)的说明(FAQ)
关于极限精简版系统(RAMOS专用)的说明(FAQ) 对RAMOS-er来说,系统精简唯一的目的就是RAMOS,精简只为RAMOS而存在.我更喜欢听到大家把精简系统用于RAMOS,这里才应该是他的主战 ...
-
oracle锁表+解锁
一.锁表: LOCK TABLE tablename IN EXCLUSIVE MODE; 二.解锁 * 1.首先用dba账户登录数据库 * * 2.查出被锁定的对象 * select * from ...
-
elasticsearch自动按天创建索引脚本
elasticsearch保存在一个索引中数据量太大无法查询,现在需要将索引按照天来建,查询的时候关联查询即可 有时候es集群创建了很多索引,删不掉,如果是测试环境或者初始化es集群(清空所有数据), ...