首页澳门新葡亰官方网站 › 用 ezj 让 li 浮动遇边界不换行

用 ezj 让 li 浮动遇边界不换行

通过为 li 设置 float:left;,可以将 li 浮动,让一行显示多个 li,比 td
维护更方便。但它也有个与 td 不同的特性,就是 li 遇到 ul
宽度不够时,会显示在下一行,而 td 不会因 tr 宽度不够而到下一行去。

CSS 代码就不写了,我做了一个效果如下,鼠标移到小图上,大图滚动:

公告滚动显示插件,公告滚动插件

公告滚动显示插件(jQuery插件编写)

插件代码:

图片 1/** *
2014年11月13日 * 公告滚动显示插件 */ (function ($) { $.fn.scrollNews =
function (width) { if (this.find("li").length == 0) return; var ulWidth
= 0; var currentMarginLeft = 0; var scrollStart = true; //初始化div属性
this.parent().width(width); this.parent().css("overflow", "hidden");
//初始化ul属性 this.css("float", "left"); //初始化li属性 var
liMarginRight = 20; this.find("li").css("margin-right",
liMarginRight.toString() + "px"); this.find("li").css("float", "right");
//初始化ul宽度和当前的margin-left this.find("li").each(function () {
ulWidth += $(this).width() + liMarginRight + 1; }); this.width(ulWidth);
currentMarginLeft = width; this.css("margin-left", currentMarginLeft);
//滚动方法定义 var scroll = function (obj) { setInterval(function () {
if (scrollStart) { obj.css("margin-left", currentMarginLeft.toString() +
"px"); currentMarginLeft -= 1; if (currentMarginLeft < -ulWidth)
currentMarginLeft = width; } }, 50); }; //显示div
this.parent().css("visibility", "visible"); //调用滚动方法 scroll(this);
this.mouseover(function () { scrollStart = false; });
this.mouseout(function () { scrollStart = true }); }; })($); View Code

示例HTML代码:

图片 2 <div
style="float: right; margin-right: 10px; margin-top: 5px; font-size:
15px; visibility: hidden;"> <ul id="ulgg"> <!-- BEGIN
noticeList --> <li><a href="#{noticeLink}"><span
style="color:
#ff0000;">★#{notice.NoticeTitle}</span></a></li>
<!-- END noticeList --> </ul> </div> View Code

示例JS代码:

图片 3
$(function () { $("#ulgg").scrollNews(450); }); View Code

 

公告滚动显示插件(jQuery插件编写) 插件代码: /* ** 2014年11月13日*
公告滚动显示插件 */ ( function ($) { $.f...

横向滚动条怎么出来?很多人肯定以为是:overflow-x:scroll;当然这是可以的;

所以存在这么一种情况,在做横向无缝滚动时,我们希望将所有的 li
都做在一行,而我们又不知道 li 的实际个数,即无法确定 ul
的宽度,怎么办呢?

图片 4

我们来试一下
、、、

用 ezj 解决

代码如下:

.box{
width:300px;
height:200px;
margin:100px auto;
overflow-x:scroll;
overflow-y:hidden;
}
.box1{
width:600px;
height:200px;
background:#6f6;
}
<div class="box">
<div
class="box1">这是滚动条,这是滚动条,这是滚动条,这是滚动条,这是滚动条,这是滚动条,这是滚动条,
</div>
</div>

$(window).ready(function () { $("myUl").style.width = ($("myUl
<li").length * 140) + "px"; ezj.ext.scroll("productList", {
direction: "left", speed: "fast" }); });

<div class="gallery" id="galleryStage"> <ul class="grid">
<li><img src="img/gallery/1.jpg" alt="" /></li>
<li><img src="img/gallery/2.jpg" alt="" /></li>
<li><img src="img/gallery/3.jpg" alt="" /></li>
</ul> </div> <div class="galleryThumbnails"> <ul
class="grid" id="galleryController"> <li class="first
activeController"> <div class="img"><img
src="img/gallery/1_thumbnail.jpg" alt="" /></div> <div
class="text">云通科技<br />为您服务</div> </li>
<li> <div class="img"><img
src="img/gallery/2_thumbnail.jpg" alt="" /></div> <div
class="text">云通科技<br />为您服务</div> </li>
<li> <div class="img"><img
src="img/gallery/3_thumbnail.jpg" alt="" /></div> <div
class="text">云通科技<br />为您服务</div> </li>
</ul> </div> <script type="text/javascript"
src="/js/ezj_v2.9/ezj.js"></script> <script
type="text/javascript"
src="/js/ezj_v2.9/ext/scroll/ScrollBinder.js"></script>
<script type="text/javascript"> <!-- $(window).ready(function
() { var gallery = new ScrollBinder($("galleryStage"), "left", 250, 50,
0); var controllerItems = $("galleryController <li");
controllerItems.each(function (item, index) { item.mouseover(function
(item) { controllerItems.each(function (item) {
item.removeClass("activeController"); });
item.addClass("activeController"); gallery.start("screen", index, true,
true); }); }); }); //--> </script>

、、、
当然这样就可以了,我放出图片

myUl 为 ul 的 id,$("myUl <li").length 获取了 myUl 下实际有多少个
li,并乘以每个 li 的宽度 140,得 myUl 的实际宽度。

特点就是通过修改 CSS,可以实现各种样式的控制,使用了 ezj
框架:。

图片 5

ezj.ext.scroll 实现了向左无缝滚动,productList 为 ul 外层,且比 ul 窄的
div 的 id。

Paste_Image.png

官方网站

当然我说的肯定不是这儿简单的。
有的时候我们会遇到一行内有多个元素,如果元素足够多的话就会出现滚动条。
我们来试一试
、、、

转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=1057

上一篇:

下一篇:

相关文章