无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-05 23:22 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

弹性大小,高效的表格行背景隔行变色及选定高

这段JS放在head中

这里有一个小说明就是,是关于动态设置字体大小的函数,由于不考虑3D菜单的形式,我简单采用了余弦函数

两个div。
一个div为固定宽度 。在次div中内嵌一个div ,这个为数据列。

复制代码 代码如下:

具体实现时,为了不在整个菜单总高度中出现两个波峰而产生突兀感,事实上cos(x/K)中的K应该是一个与菜单条目数量以及最大字体值有关的函数,这里我简单设为了一个常量 。

复制代码 代码如下:

//点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i<sTable.rows.length;i ) //遍历除第一行外的所有行
{
if (sTable.rows[i] != target) //判断是否当前选定行
{
sTable.rows[i].bgColor = "#ffffff"; //设置背景色
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
}
else
{
sTable.rows[i].bgColor = "#d3d3d3";
sTable.rows[i].onmouseover = ""; //去除鼠标事件
sTable.rows[i].onmouseout = ""; //去除鼠标事件
}
}
}
//移过时tr的背景色
function rowOver(target)
{
target.bgColor='#e4e4e4';
}
//移出时tr的背景色
function rowOut(target)
{
target.bgColor='#ffffff';
}
//恢复tr的的onmouseover事件配套调用函数
function resumeRowOver()
{
rowOver(this);
}
//恢复tr的的onmouseout事件配套调用函数
function resumeRowOut()
{
rowOut(this);
}

完整的代码为

<div class=”box”>
<div class=”box-li”>
<ul>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<li>数据2</li>
<ul>
</div>
<div>
<span id=”next”>向右移动</span>
<span id=”pre”>向左移动</span>
样式表
.box{
float: left;
height: 93px;
width: 560px;
left:0px;
white-space:nowrap;
overflow:hidden;
position:relative /* 不加次属性在ie7中无法隐藏内容*/
}
.box-li{
float: left;
height: 90px;
left:0px;
position:relative;
white-space:nowrap;
clear: both;
}
.box-li ul{
width:100000px; /* 不加次数据IE中数据会自动换行*/
white-space:nowrap;
}
.box-li li{
margin-left:0px;
margin-right:0px;
float: left;
text-align:center;
width: 92px;
}
$(function () {
var $cur = 1; //初始化显示的版面
var $i= 6; //每版显示数
var $len = $('.box-li>ul>li').length; //计算列表总长度(个数)
var $pagecount = Math.ceil($len / $i); //计算展示版面数量
var $showbox = $('.box');
var $w = $('.box').width(); //取得展示区外围宽度
var $pre = $('#pre');
var $next = $('#next');
//向前滚动
$pre.click(function () {
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == 1) { //在第一个版面时,再向前滚动无动作 }
else {
$showbox.animate({
left: ' =' $w
}, 600); //改变left值,切换显示版面
$cur--; //版面累减
}
}
});
//向后滚动
$next.click(function () {
if (!$showbox.is(':animated')) { //判断展示区是否动画
if ($cur == $pagecount) { //在最后一个版面时,再向后滚动无动作 }
else {
$showbox.animate({
left: '-=' $w
}, 600); //改变left值,切换显示版面
$cur ; //版面数累加
}
}
});
});

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:弹性大小,高效的表格行背景隔行变色及选定高

关键词: 注册送体验金