超炫酷UI效果的jQuery滑块插件


这是一款超炫酷UI效果的jQuery滑块插件。该滑块插件采用响应式设计,基于svg,支持键盘操作,带有漂亮的半透明UI效果。

超炫酷UI效果的jQuery滑块插件

npm安装

npm install jquery.rsSliderLens --save

在页面中引入下面的文件。

<link rel="stylesheet" href="rsSliderLens.css" />
<script src="jquery.min.js"></script>
<script src="jquery.rsSliderLens.js"></script>

HTML结构

<section>
<p>Ruler slider</p>
<input type="range">
 
<p>Fixed ruler slider ranging from -100 to 100 with a step of 5</p>
<input type="range" min="-100" max="100" step="5">
 
<p>Content slider</p>
<span>This is the original HTML content</span>
</section>

初始化插件

$("input[type=range]").eq(0).rsSliderLens();
 
$("input[type=range]").eq(1).rsSliderLens({
paddingStart: .1,
paddingEnd: .1,
fixedHandle: true,
ruler: {
size: 6 // 600% of the slider width
}
});
 
$("span").rsSliderLens({
ruler: {
visible: false // hide the ruler, show the html content
}
});
1、本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系客服QQ27543711,我们将尽快处理。
2、如果在本站付款后未出现下载链接或者下载存在问题请联系客服。【客服QQ:27543711】
3、如果用户购买源码后且源码存在无法安装类根本性问题请联系客服进行退款。
4、【重要】添加客服QQ的时候麻烦备注下来意,防止误忽略。
汇码网 » 超炫酷UI效果的jQuery滑块插件