风讯官方论坛

首页 » FoosunCMS交流区 » Foosun4.x安装使用 » 类似这种鼠标左右移动就显示的则么做?
354939049 - 2008-6-17 09:34:00

 附件: 您所在的用户组无法下载或查看附件


SINA TV  /  演播室

鼠标移过去就显示那里的文章了,这种专业术语叫什么,或者大家告诉我怎么做也行,谢谢了
wjcreator - 2008-6-17 11:07:00
用JS可以实现
sicend - 2008-6-17 20:52:00
一般是用js加div来实现的,可以参考上例及网易首页相关代码。
hugesky - 2008-6-17 23:41:00
http://www.dqwl.net/index.html
你要的效果 是 这个样子吗

是的话
风讯这个群的共享里有 10665241
wjcreator - 2008-6-18 09:14:00
用js+div来做,到百度里面去搜索
yato - 2008-6-18 09:20:00
楼主试下以下方法,www.sure56.net首页有演示
CSS样式:
#test{ width: 424px; padding-bottom:5px; float:left; BORDER-RIGHT: #9fc3dd 1px solid; BORDER-TOP: #9fc3dd 0px solid; BORDER-LEFT: #9fc3dd 1px solid; BORDER-BOTTOM: #9fc3dd 1px solid}

/* 头部总体 css */
.ntab2-head {
clear:both; height: 25px; text-align: center;BACKGROUND: url(bg_type.gif); padding-top:3px; padding-bottom:0px; padding-left:30px;


/* 头部列表的 css */
.ntab2-head li {
float:left;width: 80px; cursor: pointer; font-size: 14px;line-height: 25px; list-style-type: none; color:#0870B1; font-weight:bold
}
.ntab2-head li.current {
background: #fff; color: #000; cursor: none;
}

/* 主体内容的 css? */
.ntab2-body {
text-align: left; width:410px; word-wrap: break-word; word-break: normal; line-height:25px; padding-bottom:0px;
}
.ntab2-body dl {
text-indent: 0px; margin: 0px; padding-bottom:0px; padding-left:0px; padding-right:5px; padding-top:5px; width:395px;
}
这些写在模板里:
<div id="test">
  <!-- 头部设定 -->
  <div class="ntab2-head">
    <li>今日更新</li>
    <li>广西</li>
    <li>国内</li>
    <li>国际</li>
  </div>
  <!-- 内容设定 -->
  <div class="ntab2-body">
    <dl>
    <LI>{FS400_首页最新}
    </dl>
    <dl>
      <li>{FS400_广西物流最新}
    </dl>
    <dl>
    <li>{FS400_国内最新}
    </dl>
    <dl>
    <li>{FS400_国际最新}
    </dl>
  </div>
</div>
<script language="javascript">ntab2_register('test', 4);</script>
这些写在<head></head>之间:
<SCRIPT>
<!--
function show_tbl(pre,n,select_n){
for(i=0;i<n;i++){
var tbl= document.getElementById(pre+i);
tbl.style.display="none";
if(i==select_n){
tbl.style.display="block";
}
}
}
-->
</SCRIPT>
<script language="javascript">
function ntab2_register(id, def)
{
var obj = document.getElementById(id);
if (!obj || !obj.hasChildNodes())
{
alert('ERROR: the object was not defined for #' + id + '#');
return;
}

// get head & body object
var head = null;
var body = null;
for (var i = 0; i < obj.childNodes.length; i++)
{
var node = obj.childNodes;
if (node.tagName == 'DIV')
{
if (node.className == 'ntab2-head')
head = node;
else if (node.className == 'ntab2-body')
body = node;
}
}
if (!head) { alert('ERROR: head elements was not found for #' + id + '#'); return; }
if (!body) { alert('ERROR: body elements was not found for #' + id + '#'); return; }

// set action & default
var items = head.getElementsByTagName('LI');
var datas = body.getElementsByTagName('DL');
if (items.length == 0) { alert('ERROR: empty set for head elements on #' + id + '#'); return; }
if (items.length != datas.length)
{
alert('ERROR: not equal between body.length and head.length for #' + id + '#');
return;
}

var total = items.length;
if (typeof def == 'undefined') def = 0;
else def = parseInt(def)%total;
if (def < 0) def += total;
for (var i = 0; i < total; i++)
{
datas.style.display = (i == def ? '' : 'none');
items.className = (i == def ? 'current' : '');
items.onmouseover = function() {
for (var k = 0; k < total; k++)
{
datas[k].style.display = (this == items[k] ? '' : 'none');
items[k].className = (this == items[k] ? 'current' : '');
}
}
}
}
</script>
yato - 2008-6-18 09:24:00
这个效果我也不知道是什么。反正都是自学的,你可以用DIV切换来搜索。
星空星愿 - 2008-6-20 11:48:00
鼠标滑动门效果
wjcreator - 2008-6-20 21:26:00
鼠标滑动门效果,可百度里面去搜索一下,有很多相关的资料可参考
1