js+css实现select的美化效果

站长资源 2024/11/17 佚名

80 1538 80

相思资源网 Design By www.200059.com

先给大家看一看美化之后的效果图：

CSS：

.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: auto;
  background-color: #9f9;
  display: none;
  z-index: 9100;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}

JS：

//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }

    var div = select.next("div");
    var divText = div.find(".div-select-text");
    var divSelect = div.find(".div-select");
    var divArrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divSelectListIndex);

    function updateText(item) {
      divText.find("div").html(item.html());
    }

    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeClass("div-select-selected");
        item.addClass("div-select-selected");
        updateText(item);
        list.hide();
      });

      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedMark = list.find(".div-select-selected");
        selectedMark.removeClass("div-select-selected");
        selectedMark.addClass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        item.addClass("div-select-item-hover");
        updateText(item);
      });
    });

    list.mouseleave(function () {
      var selectedMark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedMark.addClass("div-select-selected");
        updateText(selectedMark);
      }
      selectedMark.removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
    });

    if (select.attr("width")) {
      divSelect.width(select.attr("width") - 2);
      divText.width(divSelect.width() - divArrow.width());
      if (select.attr("width") > list.width()) {
        list.width(divSelect.width());
      }
    }

    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").addClass("div-select-selected");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
      if (e.keyCode == 40) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.next(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:first");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(0);
        } else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() + nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        return false;
      }
      if (e.keyCode == 38) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.prev(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:last");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
        }
        else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() - nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        return false;
      }
      if (e.keyCode == 13) {
        var selectedItem = list.find(".div-select-selected");
        var value = selectedItem.attr("value");
        select.val(value);
        list.hide();
        select.change();
      }
    });

    divSelect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
      });

      if (list.css("display") == "none") {
        list.show();
      }
      else {
        list.hide();
      }

      list.css("top", divSelect.offset().top + divSelect.height() + 1);
      list.css("left", divSelect.offset().left);
      if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        list.width(divSelect.width());
      }

      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > list.height() - currentSelected.height()) {
        list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
      }
      return false;
    });

    $("html,body").bind("click", function () {
      list.hide();
    });
    list.click(function () {
      return false;
    });

    function initSelect() {
      list.find(".div-select-selected").removeClass("div-select-selected");
      var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchItem.length > 0) {
        matchItem.addClass("div-select-selected");
        updateText(matchItem);
      }
    }
    initSelect();
    select.change(function () {
      initSelect();
    });
  }); // $(".div-select-target").each
}

2、如何使用：

第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">

第2步、给select控件加上class="div-select-target" width="200"，其中class="div-select-target"是必须的，width="200"是可选的。完整HTML代码如下：


<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">

二、滚动条美化版：
CSS：




.div-select
{
  border: solid 1px #999;
  height: 40px;
  line-height: 40px;
  cursor: default;
}

.div-select-text
{
  float: left;
  background-color: #fff;
  height: 100%;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-text > div
  {
    padding: 3px;
    line-height: 34px;
  }

.div-select-arrow
{
  background-color: #fff;
  float: right;
  width: 40px;
  height: 100%;
  color: #999;
  cursor: default;
}

  .div-select-arrow > div
  {
    border: solid 1px #999;
    margin: 2px;
    height: 34px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 34px;
    font-size: 22px;
  }

.div-select-list
{
  position: absolute;
  float: left;
  top: 100px;
  left: 100px;
  border: solid 1px #999;
  max-height: 300px;
  overflow: hidden;
  background-color: #9f9;
  display: none;
  z-index: 9100;
  font-size: 16px;
  font-family: 微软雅黑,雅黑;
}

  .div-select-list .div-select-item:nth-child(2n+1)
  {
    background-color: #fff;
  }

.div-select-item
{
  height: 50px;
  line-height: 50px;
  padding-left: 3px;
  padding-right: 3px;
  background-color: #f2f2f2;
  word-break: keep-all;
  overflow: hidden;
  cursor: default;
}

.div-select-item-hover
{
  background-color: #3399ff!important;
}

.div-select-selected
{
  background-color: #3399ff !important;
}

.div-select-list-scrollbar
{
  position: absolute;
  float: left;
  border: solid 1px #999;
  border-left: 0;
  background-color: #e8e8ec;
  width: 40px;
  height: 300px;
  display: none;
  cursor: default;
  z-index: 9101;
}

.div-select-scrollbar-up
{
  border-bottom: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}

.div-select-scrollbar-pos
{
  height: 220px;
}

  .div-select-scrollbar-pos > div:last-child
  {
    width: 40px;
    height: 20px;
    background-color: #cdcdcd;
  }

.div-select-scrollbar-down
{
  border-top: solid 1px #fff;
  height: 39px;
  font-size: 22px;
  line-height: 39px;
  color: #999;
  background-color: #cdcdcd;
  text-align: center;
}





JS：


//select美化
var divSelectListIndex = 0;

$(function () {
  initDivSelect();
});

//初始化select美化插件
function initDivSelect() {
  $(".div-select-target").each(function () {
    divSelectListIndex++;
    var select = $(this);

    if (select.css("display") == "none") {
      return;
    }
    else {
      select.css("display", "none")
    }

    if (select.next("div").find(".div-select-list").length == 0) {
      select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');
      $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');
    }

    var div = select.next("div");
    var divText = div.find(".div-select-text");
    var divSelect = div.find(".div-select");
    var divArrow = div.find(".div-select-arrow");
    var list = $(".div-select-list-" + divSelectListIndex);
    var scrollbar;
    var scrollbarPosTop;
    var scrollbarPos;
    var scrollbarScrollHeight;
    var scrollbarUp;
    var scrollbarDown;
    var itemHeight;
    var itemCount;
    var itemsHeight;
    var scrollFlag = false;

    function updateText(item) {
      divText.find("div").html(item.html());
    }

    select.find("option").each(function () {
      var option = $(this);
      var text = option.html();
      var value = option.attr("value");
      list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');
      list.find(".div-select-item:last").click(function () {
        var item = $(this);
        var value = item.attr("value");
        select.val(value);
        select.change();
        list.find(".div-select-selected").removeClass("div-select-selected");
        item.addClass("div-select-selected");
        updateText(item);
        list.hide();
        if (scrollbar) scrollbar.hide();
      });

      list.find(".div-select-item:last").mouseenter(function () {
        var item = $(this);
        var selectedMark = list.find(".div-select-selected");
        selectedMark.removeClass("div-select-selected");
        selectedMark.addClass("div-select-selected-mark");
        list.find(".div-select-item-hover").removeClass("div-select-item-hover");
        item.addClass("div-select-item-hover");
        updateText(item);
      });
    });

    list.mouseleave(function () {
      var selectedMark = list.find(".div-select-selected-mark");
      if (list.find(".div-select-selected").length == 0) {
        selectedMark.addClass("div-select-selected");
        updateText(selectedMark);
      }
      selectedMark.removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
    });

    if (select.attr("width")) {
      divSelect.width(select.attr("width") - 2);
      divText.width(divSelect.width() - divArrow.width());
    }
    else {
      divText.width(list.width());
    }

    div.keydown(function (e) {
      list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");
      list.find(".div-select-item-hover").addClass("div-select-selected");
      list.find(".div-select-item-hover").removeClass("div-select-item-hover");
      if (e.keyCode == 40) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.next(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:first");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(0);
        } else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() + nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        updateScrollbarPos();
        return false;
      }
      if (e.keyCode == 38) {
        var currentSelected = list.find(".div-select-selected");
        var nextSelected = currentSelected.prev(".div-select-item");
        if (nextSelected.length == 0) {
          nextSelected = list.find(".div-select-item:last");
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          list.scrollTop(list.find(".div-select-item").length * nextSelected.height());
        }
        else {
          nextSelected.addClass("div-select-selected");
          currentSelected.removeClass("div-select-selected");
          var i = 0;
          while (nextSelected.position().top < 0
            || nextSelected.position().top > list.height() - nextSelected.height()) {
            list.scrollTop(list.scrollTop() - nextSelected.height());
            if (i++ > 100) break;
          }
        }
        updateText(nextSelected);
        updateScrollbarPos();
        return false;
      }
      if (e.keyCode == 13) {
        var selectedItem = list.find(".div-select-selected");
        var value = selectedItem.attr("value");
        select.val(value);
        list.hide();
        if (scrollbar) scrollbar.hide();
        select.change();
      }
    });

    itemHeight = list.find(".div-select-item:first").height();
    itemCount = list.find(".div-select-item").length;
    itemsHeight = itemHeight * itemCount;
    if (itemsHeight > list.height()) {
      $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');
    }
    scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex);
    scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");
    scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");
    scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height();
    scrollbarUp = scrollbar.find(".div-select-scrollbar-up");
    scrollbarDown = scrollbar.find(".div-select-scrollbar-down");
    scrollbar.click(function () {
      return false;
    });
    scrollbarUp.click(function () {
      list.scrollTop(list.scrollTop() - list.height());
      updateScrollbarPos();
    });
    scrollbarDown.click(function () {
      list.scrollTop(list.scrollTop() + list.height());
      updateScrollbarPos();
    });
    scrollbar.mousedown(function () {
      scrollFlag = true;
    });
    scrollbar.mouseup(function () {
      scrollFlag = false;
    });
    scrollbar.mousemove(function (e) {
      if (scrollFlag) {
        var pos = e.pageY - scrollbar.offset().top - 50;
        if (pos <= scrollbarScrollHeight) {
          scrollbarPosTop.height(pos);
          list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));
        }
      }
    });

    function updateScrollbarPos() {
      scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));
      if (list.scrollTop() + list.height() == itemsHeight) {
        scrollbarPosTop.height(scrollbarScrollHeight);
      }
    }

    divSelect.click(function () {
      $("a").bind("click", function () {
        $("a").unbind("click");
        list.hide();
        scrollbar.hide();
      });

      if (list.css("display") == "none") {
        list.show();
        scrollbar.show();
      }
      else {
        list.hide();
        scrollbar.hide();
      }

      list.css("top", divSelect.offset().top + divSelect.height() + 1);
      list.css("left", divSelect.offset().left);
      var listOffsetTop = list.offset().top;
      if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {
        list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }
      if (list.width() < divSelect.width()) {
        if (!(itemsHeight > list.height())) {
          list.width(divSelect.width());
        }
        else {
          list.width(divSelect.width() - scrollbar.width());
        }
      }

      scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);
      scrollbar.css("left", divSelect.offset().left + list.width() + 1);
      scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1);
      if ($(window).scrollTop() + $(window).height() < listOffsetTop + list.height() + 2) {
        scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);
      }

      var currentSelected = list.find(".div-select-selected");
      if (currentSelected.position().top > list.height() - currentSelected.height()) {
        list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);
      }
      updateScrollbarPos();

      return false;
    });

    $("html,body").bind("click", function () {
      list.hide();
      scrollbar.hide();
    });
    list.click(function () {
      return false;
    });

    function initSelect() {
      list.find(".div-select-selected").removeClass("div-select-selected");
      var matchItem = list.find(".div-select-item[value='" + select.val() + "']");
      if (matchItem.length > 0) {
        matchItem.addClass("div-select-selected");
        updateText(matchItem);
      }
    }
    initSelect();
    select.change(function () {
      initSelect();
    });
  }); // $(".div-select-target").each
}



效果图：

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

js,css,美化select

标签：

js,css,美化select

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“js+css实现select的美化效果”

暂无js+css实现select的美化效果的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

js+css实现select的美化效果

js,css,美化select

jquery zTree异步加载、模糊搜索简单实例分享

基于jQuery Ajax实现上传文件

评论“js+css实现select的美化效果”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

友情链接