当前位置:首页 > 日记 > 正文

jQuery响应式圆形转盘基于特殊效果

jQuery响应式圆形转盘基于特殊效果
本文介绍了jQuery实现响应式圆形转盘基于特定的代码。分享给你供你参考。以下是如下:

运行效果的截图如下:
mislider是jQuery响应式圆形效果图图片轮播插件一个非常酷的效果,mislider插件有轮播图的特点:
简单的使用
在同一屏幕上支持多个旋转木马图形
转盘数字内容可能是单个图像或HTML复杂的内容。

响应设计
这很容易定制。
丰富的回调函数
跨浏览器,IE8浏览器支持+
介绍核心文件

mislider插件依赖一些插件。引入前,我们需要引入jQuery,html5shiv.js,mislider.min.js和mislider.min.css文件。

创建HTML


粉红色的水百合

池塘里的百合

注意:上面的类是没有必要的,如果没有写班级,插件会自动添加到相应的元素。默认情况下,使用插件结构序列表的轮播图,如果你使用不同的结构元素,请务必修改selectorslider和selectorslide选项。

编写js初始化插件

函数($){
VaR滑块=美元('。MIS阶段({ MiSlider)。
阶段的高度。选项:假整数或正整数。假是用最大高度滑动高度计算的。默认值:假
stageheight:380,
一次可见的幻灯片数量。选项:假整数或正整数。尽可能多的假配合。默认值:= 1
slidesonstage:假,
当前幻灯片的位置/在舞台上。选项:右,右''center ',默认:右
slideposition:'center,
开始滑动。选项: / the'beg ','mid终结,或滑数从1 - 1,2,3,默认:'beg等。
SlideStart:'mid,
当前幻灯片其他幻灯片的相对百分比缩放因子被缩小。-选项:正数100或更高。100无标度。默认:= 100
slidescaling:150,
滑动中心的垂直偏移量等于滑动高度的百分比。选项:正数还是负数。负价值=了。POS值=下降。= 0未偏移。默认值:0
offsetv:- 5,
中心幻灯片内容-布尔型。垂直/默认:false
centerv:真,
不透明的上一个和下一个/按钮导航时没有转变。选项:0到1之间的数字(透明)1 -(不透明)默认值:5。
navbuttonsopacity:1
});
});
注意:确保轮播图container.mis-stage jQuery选择器和相同名称的类HTML页面。

参数

函数($){
VaR滑块=美元('。MIS阶段({ MiSlider)。
图形转换动画速度
选项:正整数。以毫秒为单位。
速度:700,
两个过渡动画之间的暂停时间转盘图
毫秒。选项:在false,正整数。
假=自动播放/关闭,假不自动播放。
暂停:4000,
增量式图形/旋转木马
/ /自动播放和导航按钮。自动播放和导航按钮
正整数或负整数。选项:
正整数=幻灯片/左。左边是正的
向右滑动。/负负右
增量:1,
高度/旋转木马图形
假整数或正整数。选项:值:假整数还是正整数
假=高度计算/使用假设置自动计算高度
最大滑动高度的最大高度。
stageheight:假,
同时在屏幕上看到图片的旋转木马号码。
假整数或正整数。选项:值:假整数还是正整数
假尽可能多。虚假的适应性
slidesonstage:1,
无限循环连续运动-同向旋转图形
如果可能的话,幻灯片在一个方向上循环。
slidescontinuous:真,
左/中、右屏幕上的位置转盘图。
选项:左,'center。 /右。
slideposition:右,
/旋转木马开始播放位置。
选项:'mid,最终 / 'beg。
或幻灯片编号起始 / 1 - 1,2,等等。
SlideStart:'beg,
幻灯片宽度
假整数或正整数。选项:值:假整数还是正整数
false =宽度是最大宽度设置为false的最大值。
现有幻灯片宽度。
SlideWidth:假,
缩放因子-幻灯片/其他图片将相应减少。
当前幻灯片
幻灯片缩放。 /其他
正数100或更高。选项:
100 缩放。=没有
slidescaling:100,
垂直偏移幻灯片
滑动高度的百分比。
Positive or negative number. 选项:
负价值=了。POS 。
0 /偏移量。=没有
offsetv:0,
垂直中心的内容

centerv:假,
可用的起始/导航按钮

navlist:真,
箭头/导航按钮可用

NavButtons:真的,
已示出箭头/导航
在转换 /除布尔时。
NavButtonsShow:假,
导航/透明的箭头按钮
不转换时导航。按钮
选项之间的数字:0和1。
0(透明)- 1(不透明)。
navbuttonsopacity:0.5,
任意顺序的旋转木马图形

随机:假,
加载后的回调函数
幻灯片加载时。
slidesloaded:假,
在转换动画之前的回调函数
回调函数——在调用之前调用
幻灯片切换。
beforetrans:假,
在旋转图转换动画完成后的回调函数
回叫功能-呼叫结束
幻灯片转换。
aftertrans:假,
类/阶段元素名称
舞台元素。
classstage:'mis-stage,
将在元素名上加上滑块类的CSS类
到滑块元素。应用
classslider:'mis-slider,
CSS类,该类将是类上每个幻灯片元素的。
对每个幻灯片元素。应用
classslide:'mis-slide,
将类上的箭头导航按钮元素的CSS类。
到应用程序的父级
和下一个按钮导航元素。 / /预防和控制
ClassNavButtons:'mis-nav-buttons,
在点上将是类名导航按钮的CSS类
到应用程序的父级
列表导航元素
classnavlist:'mis-nav-list,
用于选择器的选择器用于选择传送带映射选择器。
滑块元素
在舞台/后代中
SelectorSlider:'ol,
用于选择器的选择器用于选择每个幻灯片选择器。
幻灯片元素
滑块的/后代
SelectorSlide:李'
});
});
以上是分享很酷的jQuery响应式圆形地图图片轮播插件mislider,希望我们能熟练使用mislider插件可以灵活应用于自己的作品。

相关文章

用PS制作漂亮的钻石效果字

用PS制作漂亮的钻石效果字

效果,漂亮,电脑软件,PS,本教程是介绍一个朋友给PS制作漂亮的菱形效果文字方法。教程产生的文本效果非常漂亮,难度也不是很大。建议大家一起学习。 如何使文本充满钻石,使文本更加丰富多彩Xiaobian today,我想和你分享创造美丽的钻石效果的教程…

如何修复已损坏的Word文件使用技巧

如何修复已损坏的Word文件使用技巧

文件,损坏,使用技巧,电脑软件,Word,在计算机工作中,人们经常不小心破坏单词,但这些文件有时需要使用。这也是非常重要的。应该怎么做下面是如何修复损坏的word文件。 如何修复丢失的word文件 第一步是找到任何未损坏的文件打开Word,选择在工…

如何快速插入编号和PowerPoint2007

如何快速插入编号和PowerPoint2007

教程,编号,页码,快速,电脑软件,当插入编号、时间和页码在PowerPoint2007,你把它一个一个的传统方式如果它仍然是正确的,那么我必须说,你必须提高水平。下面,教你一个快速的方式插入编号,时间和页码。 (1)启动PowerPoint2007,点击菜单栏--插入页眉和…

原型框架的详细解释

原型框架的详细解释

框架,解释,原型,详细,电脑软件,这里的原型不是Javascript编程中的原型(原型),而是Sam Stephenson编写的Javascript库,这是一个很棒的想法,与标准类库兼容,可以帮助程序员轻松构建具有高交互web2.0特性的富客户端页面。 许多人首先接触原型,从他们的$系列功能…

插画制作逼真的编织效果的车牌号码

插画制作逼真的编织效果的车牌号码

车牌,插画,逼真,号码,效果,本教程是向朋友介绍插画,创造真实的品牌效果。这是非常美丽的,很难创造。初学者很难学。 该教程教朋友使用插图制作逼真的编织效果。本教程的编织效果非常逼真,制作起来并不难,希望能与朋友分享。希望各位朋友喜欢本…

情人节单身个性签名个性签名

情人节单身个性签名个性签名

个性签名,情人节,单身,电脑软件,1、空白是因为,无法表达感情的话。 2,蹲在黑暗的墙角,悄悄地抹去我的眼泪的痛苦。 3,情人节是我们分手的日子。 4,我喜欢去悬崖边,沿着山脊蜿蜒的道路。 5,记得我去过的那一天,情人节快乐,我不开心,闭上眼睛,不记得哭了…

如何取消超链接的Excel电子表格Exc

如何取消超链接的Excel电子表格Exc

电子表格,超链接,取消,表格,电脑软件,在Excel表单中取消超链接的方法非常简单。我们只需要选择链接并右键单击,然后选择弹出式菜单,然后取消超链接。但是如果表中有很多超链接,我们如何取消它呢如果手动取消,那是浪费时间。什么样的好方法可以…

打开Excel提示符,了解如何不可读的

打开Excel提示符,了解如何不可读的

提示符,如何解决,可读,基础,内容,他们都打算去睡觉。一个好朋友给我发了一份Excel文件,向我求助。我打开它,发现我不可能读取内容和是否还原工作簿的内容。我不敢肯定,如果数据丢失,这将是很难解决的。 导致失败 (1)超链接形成的外部文档链接。 (2…

转移剪贴板任务窗格的方法在Word20

转移剪贴板任务窗格的方法在Word20

方法,教程,剪贴板,窗格,电脑软件,当我们用文字来书写、书写手稿和制作文件时,我们不可避免地会输入许多重复的句子和词。如果我们遇到这样的情况,我们必须每次都重复吗我们有什么好的方法或功能可以简化这一步骤吗 有方法。Word2003已经为方…

CorelDraw12基本图形创建和曲线编

CorelDraw12基本图形创建和曲线编

图形,方法,曲线,编辑,电脑软件,本教程介绍了CorelDRAW 12的基本图形绘制和曲线编辑方法的朋友。很适合初学者学习。 本教程介绍了CorelDRAW 12的基本图形绘制和曲线编辑方法的朋友。入门的内容比较初级,学习也不是很难。 下面是第3课的基本…

利用excel基础实现excel四行五功能

利用excel基础实现excel四行五功能

四行,功能,基础,电脑软件,excel,使用excel函数可以快速帮助我们找出我们想要的答案,但我们首先要学习如何使用它。以下小汇编的Excel四-五的函数的使用技巧,供您参考,希望您能获得! Excel四-众议院五-在功能: 语法:圆形(数量、num_digits)。 参数:…

非主流签名非主流最新

非主流签名非主流最新

非主流,最新,电脑软件,习惯了被爱,所以你不能允许背叛。为你的QQ选择一个非主流的签名。 1、分手了,不要跟我说不适合我TM火星人啊!地球不适合! 2,你不能主动,但我主动时你不要动。 3,我要为那些爱我的人感到骄傲,那些抛弃我的人感到遗憾,那些厌倦我…