滚动文本区域的设置

文章作者:w88手机版登录网络 上传时间:2019-08-29

leonaScroll-1.1最新版

leonaScroll-1.1.js

招待使用leonaScroll-1.1.js,如你在应用进程中开掘越多难题,款待指正!

更新:1.1版本

1、修复了眼下早先版本中的一些bug,比方无法自适应顾客的文本内容,css文件繁杂

2、顾客只需调用四个艺术即可使用该插件,不供给依据原先的class类名去丰盛和定义你的滚动条文本域及外围成分,显得更为自由

3、增设了滚动条宽度、上下微调按键中度,滚动文本区域的设置

4、增设了文件内容未超越时是或不是出示滚动条可选设置选项,如不设置,默以为不显得

5、增设了滚动文本宽度的可选设置选项,如不设置会自行为你适配到最棒宽度

运用办法:

1、创设好您的Html,援引jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件

2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件

3、属性表达:

speed 滚动速度,必须

scroll_text 滚动文本内容class,必需

sWidth 滚动条宽度,必需

updownH 上下微调按键中度,必须

scrollbar 文本内容未超越时是或不是出示滚动条,显示为false,不展现为true,可选,默以为true

text_width 滚动文本宽度,可选

leonaScroll-1.0仅供就学参照他事他说加以考察运用,该版本为自个儿学习时思路版,尚有不足,新本子修复了比比较多主题材料,但依旧存在着叁遍调用难点。可是已经有了缓和方案,只是本人比较赖,未有修复,等待1.2版本修复吗!哈哈!

当然要是有人利用后境遇bug只怕不便于的地点,接待提议,以便自身继续立异。

上学之余写的小插件,如有啥不足之处,还望见谅。

末段多谢在本插件开拓进度中,帮忙和平消除答过自个儿嫌疑的朋友。特别谢谢Delevin先生的鼎力解惑!

废话不说了,附js代码和下载地址

一、Html Css

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/mousewheel.js" type="text/javascript"></script>
<script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script>
<style type="text/css">
.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}
.left,.Explain,.Explain_text{ width:200px;}
.right,.usage,.usage_text{ width:700px;}
.center,.welcome,.welcome_text{ width:300px;}
.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}
.Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }
</style>
</head>
<body>
<div class="left">
<div class="Explain sss">
<div class="Explain_text">
leonaScroll-1.1.js
<br />介绍:是一款基于jquery框架,结合mousewheel插件实现的自定义滚动条
<br />(未超出可显示文本区域时,要求显示滚动条)
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!
<br />作者:leona
<br />发布时间:2016-6-16
<br />博客:<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br />(未超出可显示文本区域时,默认不显示滚动条)
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br />欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!
<br />更新:1.1版本
<br />1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂
<br />2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由
<br />3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置
<br />4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示
<br />5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度
<br />使用方法:
<br />1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件
<br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
<br />3、属性说明:
<br /> speed 滚动速度,必须
<br /> scroll_text 滚动文本内容class,必须
<br /> sWidth 滚动条宽度,必须
<br /> updownH 上下微调按钮高度,必须
<br /> scrollbar 文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true
<br /> text_width 滚动文本宽度,可选
</div>
</div>
</div>
<script type="text/javascript">
//滚动条调用方法
$(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false});
$(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 });
$(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });
</script>
</body>
</html>

二、Jquery

$.fn.extend({
generateUUID: function () {
//唯一ID数值生成
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d   Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
}); return uuid;
},
LeonaScroll: function (parameter) {
var Sname = $(this).selector;
return this.each(function () {
//变量声明
var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();
//添加滚动条Html
var scrollHTML = "";
scrollHTML  = "<div class='scroll_up leonaup"   index   "'></div>";
scrollHTML  = "<div class='scroll_cen leonacen"   index   "'><div class='scroll_button leonabutton"   index   "'></div></div>";
scrollHTML  = "<div class='scroll_down leonadown"   index   "'></div>";
$(elem).append("<div class='scroll leonas"   index   "'> "   scrollHTML   "</div>");
//添加滚动条CSS
var scrollStyle = "";
scrollStyle  = "body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }";
scrollStyle  = Sname   "{ position: relative; overflow-y: hidden; clear:none }";
scrollStyle  = parameter.scroll_text   "{width:"   (parameter.text_width === undefined ? (con_width - parameter.sWidth) : parameter.text_width)   "px; word-break: break-word; position: absolute; left: 0; top: 0; clear:both; }";
scrollStyle  = ".scroll { height:"   text_hidden   "px; float:right; }rn";
scrollStyle  = ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:"   parameter.sWidth   "px; }";
scrollStyle  = ".scroll .scroll_up, .scroll .scroll_down {height:"   parameter.updownH   "px; line-height: "   parameter.updownH   "px; color: #ffffff; font-size: 12px; font-weight: bold; background-image:url(/img/bw.png); background-color:#161515; background-repeat:no-repeat; cursor: pointer;}";
scrollStyle  = ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0; }";
scrollStyle  = ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }";
scrollStyle  = ".scroll .scroll_up:hover{background-position:0px -11px ; }";
scrollStyle  = ".scroll .scroll_down:hover{background-position:0px -31px ; }";
scrollStyle  = ".scroll .scroll_cen { height:"   (text_hidden - parameter.updownH * 2)   "px; background-color: #777676; position: relative; }";
scrollStyle  = ".scroll .scroll_cen .scroll_button { width:"   (parameter.sWidth - 2)   "px; margin: 0px 1px; background:url(/img/tiao.jpg) repeat-y 0 0; border-radius: 5px; position: absolute; cursor: pointer; }";
$("head").append("<style type='text/css'>"   scrollStyle   "</style>");
//变量声明
var text_show = $(celem).height(), scroll_b = $(".leonabutton"   index   ""), text_p = text_hidden / text_show, bH_max = $(".leonas"   index   " .leonacen"   index   "").height(), bH = text_p * bH_max;
if (parameter.scrollbar == true || parameter.scrollbar === undefined) {
if (text_p >= 1) $(".leonas"   index   "").css("display", "none"); else { $(".leonas"   index   "").css("display", "block"); scroll_b.css("height", bH   "px"); }
} else return;

//鼠标拖动div事件
var needMove = false, mouseY = 0;
scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
$(document).mouseup(function (event) { needMove = false; });
$(document).mousemove(function (event) {
if (needMove) {
var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
if (bH_Top <= 0) scroll_b.css("top", 0); $(celem).css("top", 0); return;
if (bH_Top >= bH_max - bH) scroll_b.css("top", bH_max - bH); $(celem).css("top", text_hidden - text_show); return;
scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
} return;
});
//定义上下滚动规则
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h  = parameter.speed; //调节滑动速度
if (direction == 1) { //up
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) {
scroll_b.css("top", 0); $(celem).css("top", 0);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top - h);
};
if (direction == -1) { //down
var Downing = bH_Top   h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
scroll_b.css("top", bH_max - bH);
$(celem).css("top", text_hidden - text_show);
if (timer == 2) clearInterval(goThread); //need timer
return;
}
scroll_b.css("top", bH_Top   h);
}
var textY = bH_Top / bH_max * text_show;
$(celem).css("top", -textY);
};
//上下微调按钮事件
function minTiao(minTB, d, t) {
var goThread = "";
minTB.mouseup(function () { clearInterval(goThread); });
minTB.mousedown(function () {
clearInterval(goThread);
goThread = setInterval(function () { goGun(d, t); }, 300);
});
minTB.click(function () { goGun(d); });
};
minTiao($(".leonaup"   index   ""), 1, 2);//up
minTiao($(".leonadown"   index   ""), -1, 2);//down
//滚轮事件
if (text_p < 1) {
$(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {
if (delta == 1) {//up
goGun(1, 0);
if (scroll_b.position().top != 0)
return false;
} if (delta == -1) {//down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});

如上所述是笔者给我们介绍的jQuery leonaScroll 1.1 自定义滚动条插件,希望对大家全数扶助,借使我们有别的难题接待给本身留言,小编会及时回复大家的!

您大概感兴趣的文章:

  • jQuery中Nicescroll滚动条插件的用法
  • jquery插件jquery.nicescroll完结图片无滚动条左右拖拽的法子
  • jQuery niceScroll滚动条错位难题的减轻措施
  • jquery滚动条插件jScrollPane的施用介绍
  • jQuery滚动条插件nanoscroller使用指南
  • 学习运用jquery iScroll.js移动端滚动条插件
  • jquery滚动条插件slimScroll使用形式
  • jQuery iScroll.js 移动端滚动条美化插件
  • jquery自定义滚动条插件示例分享
  • jquery滚动条插件(可以自定义)
  • jQuery滚动条美化插件nicescroll简单用法示例

本文由w88手机版登录-www.w88zhan.com-优德w88app官方登录发布于w88手机版登录网络,转载请注明出处:滚动文本区域的设置

关键词: