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");
});
解决方案 »
- js跨域操作窗口出错误的问题
- 【EXT-UploadDialog相关】求UploadDialog的各种参数解释
- 改变ie打印设置
- 免费提供Iron gothic 字库
- 继续求助啊!! JS限定区域!!
- jquery+js如何删除div下重复的代码串,只保留1条,并总结共多少条?
- 如何获取DIV中的js代码的点击事件
- JavaScript标准(ECMA-262)中文版哪里有?
- 如何选中下拉框的某一value值(下拉框的选中问题)
- 为什么src调用总是不成功??
- 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>