JavaScript 插件

2016-08-30 鲁鲁槟 1

一、jQuery 全国三级城市联动

1、方案一

①、页面预览

②、demo

③、下载:jQueryCity1.zip

2、方案一

①、页面预览

02.png

②、demo

③、下载:jQueryCity2.zip

二、jQuery 微信支付宝扫二维码打赏

1、介绍

jQuery 微信支付宝扫二维码打赏

2、演示(点击)

3、代码(点击)

<head>
    <title>jQuery微信支付宝扫二维码打赏</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" lay-src="jquery.min.js"></script>
    <link rel="stylesheet" href="reward.css">
</head>
<body>
    <div class="content">
        <p><a href="javascript:void(0)" onclick="rewardToggle()" class="reward" title="打赏,支持一下">打赏</a></p>
        <div class="hide_box"></div>
        <div class="reward_box">
            <a class="reward_close" href="javascript:void(0)" onclick="rewardToggle()" title="关闭"><img lay-src="img/close.jpg" alt="取消" /></a>
            <div class="reward_tit">
                <p>感谢您的支持,我会继续努力的!</p>
            </div>
            <div class="reward_payimg">
                <img lay-src="img/weipayimg.jpg" alt="扫码支持" title="扫一扫" />
            </div>
            <div class="pay_explain">扫码打赏,你说多少就多少</div>
            <div class="reward_payselect">
                <div class="pay_item checked" data-id="weipay">
                    <span class="radiobox"></span>
                    <span class="pay_logo"><img lay-src="img/wechat.jpg" alt="微信" /></span>
                </div>
                <div class="pay_item" data-id="alipay">
                    <span class="radiobox"></span>
                    <span class="pay_logo"><img lay-src="img/alipay.jpg" alt="支付宝" /></span>
                </div>
            </div>
            <div class="reward_info">
                <p>打开<span id="reward_pay_txt">微信</span>扫一扫,即可进行扫码打赏哦</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".pay_item").click(function() {
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid = $(this).attr('data-id');
            $(".reward_payimg img").attr("src", "img/" + dataid + "img.jpg");
            $("#reward_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
        });
        function rewardToggle() {
            $(".hide_box").fadeToggle();
            $(".reward_box").fadeToggle();
        }
    </script>
</body>

三、jQuery 邮箱自动补全插件

1、介绍

根据用户输入的邮箱,自动补全 @**.com

2、演示(点击)

3、代码(点击)

<style type="text/css">
#email{width:300px; height:20px; padding:8px; line-height:20px;align:center;margin:80px;border: 1px solid red}
</style>
<input type="text" name="email" id="email" />
<script lay-src="jquery.min.js"></script>
<script lay-src="mailCompletion.js"></script>
<script type="text/javascript">
var mail = new hcMailCompletion('email');
mail.run();
</script>

四、jQuery 星星评分效果

1、介绍

PC 版星星评分

2、演示(点击)

3、代码(点击)

<html>
<head>
<meta charset="utf-8">    
<script type="text/javascript" lay-src="jquery.min.js"></script>
</head>
<body>
    <div style="text-align: center;">
        <a href="javascript:click(1)"><img lay-src="img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a>
        <a href="javascript:click(2)"><img lay-src="img/star.png" id="star2" onMouseOver="over(2)" onMouseOut="out(2)" /></a>
        <a href="javascript:click(3)"><img lay-src="img/star.png" id="star3" onMouseOver="over(3)" onMouseOut="out(3)" /></a>
        <a href="javascript:click(4)"><img lay-src="img/star.png" id="star4" onMouseOver="over(4)" onMouseOut="out(4)"/></a>
        <a href="javascript:click(5)"><img lay-src="img/star.png" id="star5" onMouseOver="over(5)" onMouseOut="out(5)"/></a>
        <span id="message"></span>
    </div>
</body>
<script type="text/javascript">
var check = 0;//该变量是记录当前选择的评分
var time = 0;//该变量是统计用户评价的次数,这个是我的业务要求统计的(改变评分不超过三次),可以忽略


/*over()是鼠标移过事件的处理方法*/
function over(param){
    if(param == 1){
        $("#star1").attr("src","img/star_red.png");//第一颗星星亮起来,下面以此类推
        $("#message").html("很差");//设置提示语,下面以此类推
    }else if(param == 2){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#message").html("比较差");
    }else if(param == 3){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#message").html("一般");
    }else if(param == 4){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#star4").attr("src","img/star_red.png");
        $("#message").html("比较好");
    }else if(param == 5){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#star4").attr("src","img/star_red.png");
        $("#star5").attr("src","img/star_red.png");
        $("#message").html("很好");
    }
}
/*out 方法是鼠标移除事件的处理方法,当鼠标移出时,恢复到我的打分情况*/
function out(){
    if(check == 1){//打分是1,设置第一颗星星亮,其他星星暗,其他情况以此类推
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star.png");
        $("#star3").attr("src","img/star.png");
        $("#star4").attr("src","img/star.png");
        $("#star5").attr("src","img/star.png");
        $("#message").html("");
    }else if(check == 2){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star.png");
        $("#star4").attr("src","img/star.png");
        $("#star5").attr("src","img/star.png");
        $("#message").html("");
    }else if(check == 3){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#star4").attr("src","img/star.png");
        $("#star5").attr("src","img/star.png");
        $("#message").html("");
    }else if(check == 4){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#star4").attr("src","img/star_red.png");
        $("#star5").attr("src","img/star.png");
        $("#message").html("");
    }else if(check == 5){
        $("#star1").attr("src","img/star_red.png");
        $("#star2").attr("src","img/star_red.png");
        $("#star3").attr("src","img/star_red.png");
        $("#star4").attr("src","img/star_red.png");
        $("#star5").attr("src","img/star_red.png");
        $("#message").html("");
    }else if(check == 0){
        $("#star1").attr("src","img/star.png");
        $("#star2").attr("src","img/star.png");
        $("#star3").attr("src","img/star.png");
        $("#star4").attr("src","img/star.png");
        $("#star5").attr("src","img/star.png");
        $("#message").html("");
    }
}
/*click()点击事件处理,记录打分*/
function click(param){
    time++;//记录打分次数
    check = param;//记录当前打分
    out();//设置星星数
}
</script>
</html>

五、jQuery 密码强度检查插件

1、介绍

根据用户输入的密码,提示密码强度

2、演示(点击)


3、代码(点击)

<meta charset="UTF8">
<div style="padding:3px 15px">
    <input type="password" name="" id="pwd">
</div>
<div style="padding:3px 15px">
    <div id="showPwdCheckRes" style="display:none;"></div>
</div>
<script type="text/javascript" lay-src="jquery.min.js"></script>
<script type="text/javascript" lay-src="hcPwdCheck.js"></script>
<script type="text/javascript">
$('#pwd').hcPwdCheck('showPwdCheckRes');
</script>

六、jQuery 整屏滚动插件

1、介绍

PC 版本滚动换页,通常用于制作宣传网

2、演示(点击)


备注:图片压缩后的画质不堪入目。

3、代码(点击)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>整屏滚动</title>
<style>
*{margin:0px; padding:0px; font-size:14px; font-family:"Microsoft yahei"; color:#333;}
body{background-color:#FFFFFF;}
a{text-decoration:none; color:#333333;}
a:hover{text-decoration:underline;}
img{border:none; overflow:hidden;}
ul{list-style:none;}
.FL{float:left !important;}
.FR{float:right !important;}
#fullScreen{width:100%; height:200px; margin:0 auto; overflow:hidden;}
#fullScreen li{width:100%; color:#FFFFFF; font-size:38px; text-align:center;}
#fullScreen li *{color:#FFFFFF; font-size:38px; text-align:center; padding:0px 80px;}
#fullScreenPoint{width:28px; height:auto; position:fixed; z-index:9; right:10px; top:20px; padding:18px 0px; background:#6AC0BD; border-radius:28px;}
#fullScreenPoint div{width:15px; height:15px; margin:0 auto; border-radius:15px; background:#4A4A4A; margin-top:10px;}
.fullScreenPointSed{background:#E55001 !important;}
</style>
</head>
<body>
<div id="fullScreen">
    <ul>
        <li style="background:#69B076;">
            jQuery整屏滚动插件(请滚动鼠标滑轮体验)
        </li>
        <li style="background:#466F85;">
            修养的花儿在寂静中开过去了,成功的果子便要在光明里结实。 —— 冰心
        </li>
        <li style="background:#FF9D92;">
            <div>
                在任何一个成功的后面都有着十五年到二十年的生活经验,都有着丰富的生活经验,要是没有这些经验,任何才思敏捷恐怕也不会有,而且在这里,恐怕任何天才也都无济于事。 —— 巴甫连柯
            </div>
        </li>
        <li style="background:#ED8B4A;">
            只有登上山顶,才能看到那边的风光。
        </li>
    </ul>
</div>
<div id="fullScreenPoint"></div>
<script lay-src="http://libs.baidu.com/jquery/1.10.2/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" lay-src="hcFullScreen.js"></script>
<script type="text/javascript">
function hcFullSreenFunc(id){
    if(id == 2){
        $('#fullScreen li').eq(2).find('div').hide();
        $('#fullScreen li').eq(2).find('div').fadeIn(800);
    }
}
</script>
<script type="text/javascript">
$(function(){
    $('#fullScreen').hcFullScreen('fullScreenPoint', 'fullScreenPointSed');
});
</script>
</body>
</html>

七、JQuery 手写签名插件

1、介绍

使用插件 jSignature 进行手写签名生成图片

2、演示(点击)

02.gif

3、代码(点击)

<head>
    <style>
	html,body,#signature {
	    height: 60%;
	}
	#signature {
	    background: #eee;
	    width: 100%;
	}
	#text{
	    overflow: auto;
	}
	</style>
</head>
<body>
    <div id="signature"></div>
    <input type="button" onclick="getData()" value="获取数据">
    <input type="button" onclick="javascript: $signature.jSignature('reset');" value="重置">
    <div id="signimg"></div>
    <div id="text"></div>
    <script lay-src="jquery.min.js"></script>
    <script lay-src="jSignature.min.noconflict.js"></script>
    <script>
	var $signature = $("#signature").jSignature({
	    'height': '100%',
	    'width': '100%'
	});
	function getData() {
	    //获取数据
	    var data = $signature.jSignature('getData', 'default')
	    //图片展示
	    var img = new Image()
	    img.src = data
	    $('#signimg').html(img);
	    //将数据显示在文本框
	    $('#text').text(data)
	}
    </script>
</body>

八、hcZoom - 图片缩放插件、图片放大镜特效

1、介绍

HcZoom 是一款免费的、开源的图片缩放jQuery插件。具有以下特点:

  • 使用简单,只需简单的2行代码即可完成特效的编写。

  • 兼容 ie (6 及以上版本)、火狐、谷歌等各类浏览器。ietester 下i6有透明bug,在真实ie浏览器中无问题!

  • 核心属性可以通过hc_zoom 属性进行配置,方便、灵活。

2、演示(点击)

3、代码(点击)

<div class="small_img" style="width:358px; height:400px; float:left; border:10px solid #FFFFFF;"> 
<img lay-src="images/small.jpg" />
<img lay-src="images/large.jpg" style="display:none;" hc_zoom="auto_change:'false'"/>
</div>
<script lay-src="jquery.min.js"></script>
<script lay-src="hc_zoom.js"></script>
<script>
//请保证引用了jQuery.js
$(function()
{
    $('.small_img').hc_zoom();
});
</script>

4、hc_zoom属性设置规则

您可以通过设置大图的 hc_zoom 属性来设置缩放效果的相关属性,语法 
<img lay-src="images/large.jpg" style="display:none;" hc_zoom="属性:'取值'" /> 
注意取值需要用单引号引起来!!! 属性名称、作用、取值示例或范围介绍: 

position : 设置大图的展示位置,默认右侧展示,可以设置为 'left', 'right'。
margin : 设置大图的展示位置距小图的间距,可以设置为一个数字。
border : 放大镜的边框设置,可以设置的值: '5px solid #888888',一个完整的边框样式。
bg_color : 遮罩背景的颜色,默认 '#FFFFFF',可以设置成一个颜色编码 '#.....'。
opacity : 遮罩背景的透明度,默认 0.3,可以设置为 0.1 ~ 1 直接的数值。
large_border : 设置大图的边框,可以设置的值: '5px solid #888888',一个完整的边框样式。
auto_change : 是否开启鼠标滑轮滚动 默认 true,可设置的值 true false</p>

九、Lottery 幸运大转盘

1、介绍

使用插件 kinerLottery 轮盘抽奖

2、演示(点击)

02.gif

3、代码(点击)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>大转盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/kinerLottery.css">
</head>

<body>
    <h1><img lay-src="images/title.png" alt="" width="100%"></h1>
    <div style="width: 100%; position: relative; height: 99vw; margin-bottom: 30px;">
        <div id="box">
            <div class="outer KinerLottery KinerLotteryContent"><img lay-src="images/lotteryContent.png"></div>
            <!-- 大专盘分为三种状态:活动未开始(no-start)、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态,js会根据这3个class进行匹配状态 -->
            <div class="inner KinerLotteryBtn start"></div>
        </div>
    </div>
    <div>
        <span><a href="#" style=" color: #FFF">中奖记录</a></span>
    </div>
    <p><span><a href="#" style=" color: red">抽奖规则</span></p>
    <script lay-src="js/zepto.min.js"></script>
    <script lay-src="js/kinerLottery.js"></script>
    <script>
    /**
     * 根据转盘旋转角度判断获得什么奖品
     * @param deg
     * @returns {*}
     */
    var whichAward = function(deg) {
        if ((deg > 330 && deg <= 360) || (deg > 0 && deg <= 30)) { //10M流量
            return "三网通流量 10M";
        } else if ((deg > 30 && deg <= 90)) { //IPhone 7
            return "iPhone7";
        } else if (deg > 90 && deg <= 150) { //30M流量
            return "三网通流量 30M";
        } else if (deg > 150 && deg <= 210) { //5元话费
            return "话费5元";
        } else if (deg > 210 && deg <= 270) { //IPad mini 4
            return "ipad mini4";
        } else if (deg > 270 && deg <= 330) { //20元话费
            return "话费20元";
        }
    }
    var KinerLottery = new KinerLottery({
        rotateNum: 8, //转盘转动圈数
        body: "#box", //大转盘整体的选择符或zepto对象
        direction: 0, //0为顺时针转动,1为逆时针转动
        disabledHandler: function(key) {
            switch (key) {
                case "noStart":
                    alert("活动尚未开始");
                    break;
                case "completed":
                    alert("活动已结束");
                    break;
            }
        }, //禁止抽奖时回调
        clickCallback: function() {
            //此处访问接口获取奖品
            function random() {
                return Math.floor(Math.random() * 360);
            }
            this.goKinerLottery(random());
        }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
        KinerLotteryHandler: function(deg) {
                alert("恭喜您获得:" + whichAward(deg));
            } //抽奖结束回调
    });
    </script>
</body>

</html>

十、popup 弹窗插件

1、功能介绍

popup 是一款弹窗插件,可以弹出 alert、confirm、prompt等窗口。

2、演示(点击)

3、代码下载

十一、jQuery Jump To跳转到指定位置插件

1、功能介绍

jQuery Jump To 是一款页面内跳转插件。

2、演示(点击)

3、代码下载

十二、js联动选择插件mobileSelect.js

1、功能介绍

①、简介

一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

②、特性

  • 原生js移动端选择控件,不依赖任何库

  • 可传入普通数组或者json数组

  • 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择

  • 自动识别是否级联

  • 选择成功后,提供自定义回调函数callback() 返回当前选择索引位置、以及选择的数据(数组/json)

  • 每次手势滑动结束后,也提供一个回调函数transitionEnd() 返回当前选择索引位置、以及选择的数据(数组/json)

  • 能够在已经实例化控件后,提供update函数,传其他参数再次渲染

  • 提供重定位函数

2、使用方法

①、引入

<link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
<script lay-src="js/mobileSelect.js" type="text/javascript"></script>

②、快速入门

A 普通数组格式-非联动

<div id="day"></div>
<script type="text/javascript">
var mobileSelect1 = new MobileSelect({
    trigger: '#day', 
    title: '单项选择',  
    wheels: [
                {data:['周日','周一','周二','周三','周四','周五','周六']}
            ],
    position:[2] //初始化定位
});
</script>

B json格式-非联动

<div id="area"></div>
<script type="text/javascript">
var mobileSelect2 = new MobileSelect({
    trigger: '#area',
    title: '地区选择',
    wheels: [
                {data:[
                    {id:'1',value:'附近'},
                    {id:'2',value:'上城区'},
                    {id:'3',value:'下城区'},
                    {id:'4',value:'江干区'},
                    {id:'5',value:'拱墅区'},
                    {id:'6',value:'西湖区'}
                ]},
                {data:[
                    {id:'1',value:'1000米'},
                    {id:'2',value:'2000米'},
                    {id:'3',value:'3000米'},
                    {id:'4',value:'5000米'},
                    {id:'5',value:'10000米'}
                ]}
            ],
    callback:function(indexArr, data){
        console.log(data); //返回选中的json数据
    } 
});
</script>

C json格式-联动

<div id="area2"></div>
<script type="text/javascript">
  var addressLocation = new MobileSelect({
      trigger: '#area2',
      title: '地区选择-联动',
      wheels: [
                  {data:[
                      {
                          id:'1',
                          value:'附近',
                          childs:[
                              {id:'1',value:'1000米'},
                              {id:'2',value:'2000米'},
                              {id:'3',value:'3000米'},
                              {id:'4',value:'5000米'},
                              {id:'5',value:'10000米'}
                          ]
                      },
                      {id:'2',value:'上城区'},
                      {id:'3',value:'下城区'},
                      {id:'4',value:'江干区'},
                      {id:'5',value:'拱墅区'},
                      {id:'6',value:'西湖区'}
                  ]}
              ],
      position:[0,1],
      callback:function(indexArr, data){
          console.log(data); //返回选中的json数据
      } 
  });
</script>

3、参数和函数

11.png

注:回调函数中返回的参数含义如下

  • indexArr是当前选中的索引数组 如[0,0,1] 代表有三个轮子 选中的数据是第一个轮子的第0个数据、第二个轮子的第0个数据、第三个轮子的第1个数据

  • data是当前选中的json数据 如[{id:'1',value:'hello'},{id:'2',value:'world'}]

功能函数:

11.png

注:功能函数中需要传递的参数含义如下

  • sliderIndex 代表的是要修改的轮子的索引

  • posIndex 代表位置索引

功能函数demo:

<div id="day"></div>
var mySelect = new MobileSelect({
    trigger: '#day', 
    wheels: [
                {data:['周日','周一','周二','周三','周四','周五','周六']},
                {data:['08:00','09:00','10:00','11:00','12:00','13:00','14:00']}
            ],
    position:[1,1] //初始化定位 两个轮子都选中在索引1的选项
});
//----------------------------------------------
//进行基础的实例化之后,对实例用功能函数操作 
// mySelect.setTitle('啦啦啦(???????)'); 
// 设置控件的标题
// mySelect.updateWheel(0,['sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
// 更新第0个轮子的数据,数据变为英文的星期几
// mySelect.locatePostion(1,0);
// 重新定位第1个轮子的位置,将第1个轮子的第0个数据改为当前选中。
// (第1个轮子是指右边的轮子,左边的轮子是第0个)

4、代码下载

十三、jQuery UI 实例 - 排序(Sortable)

使用鼠标调整列表中或者网格中元素的排序。链接

十四、页面加载进度条 - pace

14.1、下载

链接

14.2、使用

<head>
  <script lay-src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

十五、select2

15.1、简介

select2是Jquery用来代替选择框的一种组件。 它让你可以定制下拉框,并且支持搜索、标记,远程数据源,无限滚动和其他更高级的功能。

15.2、下载

链接


暂时还没有评论,快来抢沙发吧~

发表评论

您需要登录后才可以评论。登录 | 立即注册
阅读 1107