最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/js/8751.html 二当家的 2019-06-16 23:09浏览(29)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

超炫酷UI效果的jQuery滑块插件
分类:css3 > 进度条 难易:初级
查看演示 下载资源: 2

关注微信号获取此Demo视频教程:

下载资源 下载积分: 20 积分

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
    }
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/8751.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2