HTML代码<div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">
<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
</div>
<div id="tbox">
<ul>
<li><a href="#tag_cmt">aaa</a></li>
<li><a href="#tag_about">bbb</a></li>
<li id="idea" onclick="javascript:window.open('#','_blank')"></li>
<li id="online_service" onclick="javascript:window.open('#','_blank')"></li>
</ul>
<dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
JS代码$("#tbox ul li").hover(function() {
$(this).css("background-color","#e2e2e2");
},function(){
$(this).css("background-color","#ffffff");
});
<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
</div>
<div id="tbox">
<ul>
<li><a href="#tag_cmt">aaa</a></li>
<li><a href="#tag_about">bbb</a></li>
<li id="idea" onclick="javascript:window.open('#','_blank')"></li>
<li id="online_service" onclick="javascript:window.open('#','_blank')"></li>
</ul>
<dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
JS代码$("#tbox ul li").hover(function() {
$(this).css("background-color","#e2e2e2");
},function(){
$(this).css("background-color","#ffffff");
});
解决方案 »
- 自适应高度的iframe放在表格里不能正常显示高度,请帮忙指点,谢谢!
- js判断表单checkbox问题,大家帮看看!
- 如何在网页链接中直接打开一个WINDOW识别后缀名的文件
- 修改页面js代码,重新打开ie,查看ie源代码,发现没有改动
- 正则问题,急啊
- 页面里面如果有APPLET为什么ONLOAD时候键盘无效呢?如何让它一开始键盘就好用呢?
- 框架里有子框架,如何利用主框架的某个页面,写入子框架里某个页面的文本框值
- 求教一个javascript
- 高手就来
- 怎样让网页一打开就像F11那样全屏显示
- javascript可以向服务器提交表单数据吗?
- javascript问题:为什么循环提交表单只能提交一次 而如果中间加上个alert阻断一会儿 就可以提交多次了
大概是这种效果。
滑动浏览器滚动条 出现bbb 时,悬浮框的bbb 能用:hover 背景色。请给出大概思路,或者直接贴代码。谢谢!
<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
</div>
<div id="tbox">
<ul>
</ul>
<dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
js:
$('#main').children().each(function(i,item){
$("#tbox").find('ul').append($('<li>').html($(item).html()));
});
$("#tbox ul li").hover(function() {
$(this).css("background-color","#e2e2e2");
},function(){
$(this).css("background-color","#ffffff");
});
你看这里能不能提供点思路
<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
</div>
<div id="tbox" style="position:fixed;bottom:0px;right:0px">
<ul>
<li><a href="#tag_cmt">aaa</a></li>
<li><a href="#tag_about">bbb</a></li>
<li id="idea" onclick="javascript:window.open('#','_blank')"></li>
<li id="online_service" onclick="javascript:window.open('#','_blank')"></li>
</ul>
<dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script>
var bTop, viewHeight, sTop, isStrict = document.compatMode == 'CSS1Compat';
$(function () {
bTop = $('#tag_about').offset().top;
viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight
$(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度
$(window).scroll(function () {
sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
$('#tbox li:eq(1)').css('background-color',sTop + viewHeight >= bTop?'#e2e2e2':'#ffffff');
});
});
</script>这种效果??
还有。开始应该 AAA灰的。
刚找到了这个效果。
看不懂源码shop.vip shop.com
<div id="tag_cmt" style="width:300px;height:25%; background:#669900;">aaa</div>
<div id="tag_about" style="width:300px;height:25%; background:#F90; margin:0 auto;">bbb</div>
<div id="tag_cmt1" style="width:300px;height:25%; background:#669900;">CCC</div>
<div id="tag_about1" style="width:300px;height:25%; background:#F90; margin:0 auto;">DDD</div>
</div>
<div id="tbox" style="position:fixed;bottom:0px;right:0px">
<ul>
<li><a href="#tag_cmt">aaa</a></li>
<li><a href="#tag_about">bbb</a></li>
<li><a href="#tag_cmt1">CCC</a></li>
<li><a href="#tag_about1">DDD</a></li>
<li id="idea" onclick="javascript:window.open('#','_blank')"></li>
<li id="online_service" onclick="javascript:window.open('#','_blank')"></li>
</ul>
<dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script>
var bTop, viewHeight, sTop, isStrict = document.compatMode == 'CSS1Compat';
$(function () {
aTop = $('#tag_cmt').offset().top;
bTop = $('#tag_about').offset().top;
cTop = $('#tag_cmt1').offset().top;
dTop = $('#tag_about1').offset().top;
//alert(bTop);
viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight
//alert(viewHeight );
$(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度
$(window).scroll(function () {
sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
$('#tbox li').css('background-color','#ffffff');
if(sTop + viewHeight > dTop){
$('#tbox li:eq(3)').css('background-color',sTop + viewHeight > dTop?'#e2e2e2':'#ffffff');
} else if(sTop + viewHeight > cTop && sTop + viewHeight <= dTop ){
$('#tbox li:eq(2)').css('background-color',sTop + viewHeight >= cTop?'#e2e2e2':'#ffffff');
}else if(sTop + viewHeight > bTop && sTop + viewHeight <= cTop){
$('#tbox li:eq(1)').css('background-color',sTop + viewHeight >= bTop?'#e2e2e2':'#ffffff');
}else if(sTop + viewHeight <= bTop){ $('#tbox li:eq(0)').css('background-color',sTop + viewHeight >= aTop?'#e2e2e2':'#ffffff');
}
});
});
</script>
<div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">
<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
<div id="Div1" style="width:1000px;height:1000px; background:#00f; margin:0 auto;">CCC</div>
<div id="Div2" style="width:1000px;height:1000px; background:#000; margin:0 auto;">DDD</div>
</div>
<div id="tbox" style="position:fixed;bottom:0px;right:0px"><ul></ul><dl>
<dd>xxx</dd>
<dd id="gotop"><a href="javascript:void(0)"></a></dd>
</dl>
</div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script>
var viewHeight,isStrict = document.compatMode == 'CSS1Compat'
, arrTops = [], i, nodeLength = 0, sTop, sBottom;
$(function () {
var ul = $('#tbox ul:eq(0)');
viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight
$('#main').children().each(function (i, el) {
arrTops[i] = { y: $(this).offset().top }; //记录对象y
arrTops[i].yb = $(this).outerHeight() + arrTops[i].y; //记录对象y+高度
ul.append('<li>' + this.innerHTML + '</li>');
});
nodeLength = ul.children().size();
$(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度
$(window).scroll(function () {
sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
sBottom = sTop + viewHeight;
for (i = 0; i < nodeLength; i++)
ul.children(':eq(' + i + ')').css('background-color'
, (sTop >= arrTops[i].y && sTop <= arrTops[i].yb)
|| (sBottom >= arrTops[i].y && sBottom <= arrTops[i].yb)
|| (sTop >= arrTops[i].y && sBottom <= arrTops[i].yb)
? '#e2e2e2' : '#ffffff');
});
$(window).trigger('scroll');
});
</script>