jQuery手机下拉框select

收藏

本demo通过js更改html字体大小，使字体随浏览器窗口大小自适应。相关手机模板字体大小和图片响应式模板教程：http://www.erdangjiade.com/js/509.html

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

单个下拉框html模板

<div class="selects">
    <div class="selects_head">
        <a class="arrow"><img  src="images/arrow_bottom.png"></a>
        <span class='selected'>储蓄卡</span>
    </div>
    <div class="selects_other">
        <a href="javascript:" title="中国农业银行">
            <img src="images/zs1.png" />
        </a>
        <a href="javascript:"   title="中国建设银行">
            <img src="images/zs2.png" />
        </a>
        <a href="javascript:"   title="中国工商银行">
            <img src="images/zs3.png" />
        </a>
    </div>
</div>

下拉框样式

.selects {
	display: block;
	width: 70%;
	height: 1.6rem;
	line-height: 1.6rem;
	font-size: 0.8rem;
	color: #555;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 0.1rem;
	position: relative;
	margin:auto;
	padding:0 0 0 0.5rem;
}
.selects_other {
	position: absolute;
	left:-0.02rem;
	top:1.6rem;
	width:100%;
	display: none;
	z-index:999;
	border-top: 1px solid #ccc;
}
.selects a.arrow img {
	width:0.7rem;
	position: absolute;
	right:0.5rem;
	top:0.6rem
}
.selects_other a {
	border: 1px solid #ccc;
	border-top:none;
	display: block;
	width:100%;
	padding:0.1rem 0;
	text-indent: 0.5rem;
	height: 1.6rem;
	line-height: 1.6rem;
	background-color: #FFF
}
.selects_other a img {
	height: 0.8rem;
}

字体自适应

(function() {
    function sizeHtml() {
        window.mtSizeBase = $(window).width() / 16;
        window.mtSizeBase = window.mtSizeBase > 45 ? 45 : window.mtSizeBase;
        $("html").css("font-size", window.mtSizeBase + "px");
    }
    sizeHtml();
    $(window).resize(function() {
        setTimeout(function() {
            sizeHtml();
        }, 300);
    });
})();

下拉框select点击

//银行下来点击
$(".selects_other").children("a").click(function() {
    $(this).parents('.selects').find(".selected").text($(this).attr("title"));
    $(".selects_other").hide();
    $(this).parents('.selects').find(".selects_head img").attr("src", "images/arrow_bottom.png");
})
//头部点击 显示或隐藏下拉，并切换箭头图片
$(".selects_head").click(function() {
    if ($(this).parent().children(".selects_other").css("display") == 'none') {
        $(this).parent().children(".selects_other").show();
        $(this).find("img").attr("src", "images/arrow_top.png");
    } else {
        $(this).parent().children(".selects_other").hide();
        $(this).find("img").attr("src", "images/arrow_bottom.png");
    }
})