鼠标和导航的问题

libaisongtuye 2005-03-29 05:08:54
1。鼠标效果方面的，想要鼠标指针跟随效果，我的各页面调用统一CSS样式，怎么才能做到指针后面跟随文字或图片？？？
2。网页用表格控制居中显示，想要屏幕左侧显示动态的导航栏，随屏幕滚动而动，是用JS控制的，会的给些参考的代码或网址
...全文
89 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
libaisongtuye 2005-03-30
  • 打赏
  • 举报
 回复
to myvicy
我把你给的代码加到页面里了，刚打开时候是在鼠标后面显示，可当鼠标动了一会儿以后，鼠标后面的效果就成了跟鼠标隔了N行了，这是怎么回事？
哪位高手知道请帮忙！！
libaisongtuye 2005-03-30
  • 打赏
  • 举报
 回复
谢谢楼上，问题一已经解决，问题二还没有。
问题二：网页用表格控制居中显示，想要屏幕左侧显示动态的导航栏，随屏幕滚动而动，就象一些网站上那种上下滚动的浮动广告的效果，连接一张图片的，是用JS控制的，会的高手给些参考的代码或网址
libaisongtuye 2005-03-30
  • 打赏
  • 举报
 回复
问题2没干掉呢，我要网上找了些关于浮动广告效果的代码，那些网页上都说放在<body></body>之间即可运行，可我直接复制后并没有看到想要的浮动效果，仅仅是在网页上有个打叉的图片，并不随着网页上下移动而动，没看明白怎么运行的，高手有没有关于浮动广告方面的JS代码，直接保存成为一个文件，在想用到的页面用<script language="javascript" scr"*.js"><script>就可以直接用的，以前这种效果的代码我见过，可实在找不到了，下面的代码是大多数网站上给提供的浮动广告的参考代码，高手看看能不能用上，本问题解决马上结贴，
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
　　 initAd();//载入页面后，调用函数initAd()
　　 </SCRIPT>
　　 <script language="JScript">
　　 <!--
　　 function initAd() {
　　 document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后，广告层相对于固定后的y方向位置
　　 document.all.AdLayer.style.visibility = 'visible'//设置层为可见
　　 MoveLayer('AdLayer');//调用函数MoveLayer()
　　 }
　　 function MoveLayer(layerName) {
　　 var x = 600;//浮动广告层固定于浏览器的x方向位置
　　 var y = 300;//浮动广告层固定于浏览器的y方向位置
　　 var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;
　　 var y = document.body.scrollTop + y - diff;
　　 eval("document.all." + layerName + ".style.posTop = y");
　　 eval("document.all." + layerName + ".style.posLeft = x");//移动广告层
　　 setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()
　　 }
　　 //-->
　　 </script>
　　 <!--下面为一个ID为AdLayer的层（如ID名不为AdLayer，上面MoveLayer()内的AdLayer也要作相应修改），包括一张带链接的图片-->
　　 <div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'>
　　 <a href="http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
　　 </div>
myvicy 2005-03-29
  • 打赏
  • 举报
 回复
脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE TYPE="text/css">
<!--

BODY{
overflow:scroll;
overflow-x:hidden;
}

.s1
{
position : absolute;
font-size : 12pt;
color : blue;
visibility: hidden;
}

.s2
{
position : absolute;
font-size : 20pt;
color : red;
visibility : hidden;
}

.s3
{
position : absolute;
font-size : 16pt;
color : gold;
visibility : hidden;
}

.s4
{
position : absolute;
font-size : 14pt;
color : lime;
visibility : hidden;
}
-->
</STYLE>


第二步：把如下代码加入<body>区域中
<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>


<script language="javascript" type="text/javascript" class="s5">

var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function get_mouse(e)
{
x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
x += x_offset;
y += y_offset;
beam(1);
}

function beam(n)
{
if(n<5)
{
if(nav)
{
eval("document.div"+n+".top="+y);
eval("document.div"+n+".left="+x);
eval("document.div"+n+".visibility='visible'");
}
else
{
eval("div"+n+".style.top="+y);
eval("div"+n+".style.left="+x);
eval("div"+n+".style.visibility='visible'");
}
n++;
tmr=setTimeout("beam("+n+")",spd);
}
else
{
clearTimeout(tmr);
fade(4);
}
}

function fade(n)
{
if(n>0)
{
if(nav)eval("document.div"+n+".visibility='hidden'");
else eval("div"+n+".style.visibility='hidden'");
n--;
tmr=setTimeout("fade("+n+")",spd);
}
else clearTimeout(tmr);
}

// -->
</script>
myvicy 2005-03-29
  • 打赏
  • 举报
 回复
脚本说明:
第一步：把如下代码加入<body>区域中
<STYLE TYPE="text/css">
<!--

BODY{
overflow:scroll;
overflow-x:hidden;
}

.s1
{
position : absolute;
font-size : 12pt;
color : blue;
visibility: hidden;
}

.s2
{
position : absolute;
font-size : 20pt;
color : red;
visibility : hidden;
}

.s3
{
position : absolute;
font-size : 16pt;
color : gold;
visibility : hidden;
}

.s4
{
position : absolute;
font-size : 14pt;
color : lime;
visibility : hidden;
}
-->
</STYLE>


第二步：把如下代码加入<body>区域中
<DIV ID="div1" CLASS="s1">*</DIV>
<DIV ID="div2" CLASS="s2">*</DIV>
<DIV ID="div3" CLASS="s3">*</DIV>
<DIV ID="div4" CLASS="s4">*</DIV>


<script language="javascript" type="text/javascript" class="s5">

var nav = (document.layers);
var tmr = null;
var spd = 50;
var x = 0;
var x_offset = 5;
var y = 0;
var y_offset = 15;

if(nav) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = get_mouse;

function get_mouse(e)
{
x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;
y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;
x += x_offset;
y += y_offset;
beam(1);
}

function beam(n)
{
if(n<5)
{
if(nav)
{
eval("document.div"+n+".top="+y);
eval("document.div"+n+".left="+x);
eval("document.div"+n+".visibility='visible'");
}
else
{
eval("div"+n+".style.top="+y);
eval("div"+n+".style.left="+x);
eval("div"+n+".style.visibility='visible'");
}
n++;
tmr=setTimeout("beam("+n+")",spd);
}
else
{
clearTimeout(tmr);
fade(4);
}
}

function fade(n)
{
if(n>0)
{
if(nav)eval("document.div"+n+".visibility='hidden'");
else eval("div"+n+".style.visibility='hidden'");
n--;
tmr=setTimeout("fade("+n+")",spd);
}
else clearTimeout(tmr);
}

// -->
</script>
myvicy 2005-03-29
  • 打赏
  • 举报
 回复
1、每页用统一的跟随js
2、
<script>
function FixY(){
if(ie){divid.style.top = document.body.scrollTop+10}
if(ns){divid.top = window.pageYOffset+10}
}

setInterval("FixY()",100);
</script>
<div id=divid>你的导航栏
</div>
adLockReadonly 2005-03-29
  • 打赏
  • 举报
 回复
做一个CUR文件，形状就是鼠标后面跟一个东西

在公共的CSS文件里面加上这个：

@media all{
* {cursor;url('你的CUR光标文件路径');}
}
js特效343例
JAVASCRIPT特效，用javascript分类实现各种特效，菜单类，鼠标类，图片类，导航类，键盘类等。对学习JS特效有很好的帮助。现在仍是免费送出。再次重申楼主观点：知识有价，奉献无价
经典网页特效500例打包下载
经典网页特效500例！绝对500例！ 经不经典你说了算！ 一起一直自己用，现在贡献出来！ QQ式的导航 经典实用的触发型导航菜单 菜单变换与拖动 三级下拉菜单（通用版） 鼠标触及带边框菜单 HTML输出下拉内容 判断输入是否填全 特定区域文字控制 自动跳转文本 限定选择文件的类型 大段文字的滚动处理 ............. .............
鼠标滚动导航变色
鼠标滚动导航变色 将导航栏固定定位，获取鼠标滚动值，鼠标滚动，导航栏颜色渐变，当鼠标向下滚动达到这个距离，颜色不再变
html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了，但是如何让我们的导航看起来生动，给用户一种很高大上的感觉，却需要我们好好设计一下。今天我给大家带来的是我自己在项目中用到的一个例子，当我们鼠标滑过导航栏时li下会出现一个下划线动画效果，一起看一下具体效果是什么样子的： jquery css实现鼠标滑过导航菜单栏动画效果是不是很牛掰的样子，不着急，源码马上呈上来：HTML代码 ...
CSS 二级导航的消失——在鼠标离开一级导航后、触碰二级导航前消失的问题解决方案
传送门Problem展示Problem描述一种可能的解决方案结语 Problem展示 这里放上 gif 图，如果你发现自己遇到的是这种情况，请移步 #一种可能的解决方案 Problem描述 场景： 二级导航制作 问题细节： 一级导航的 li 添加了 hover 效果，但是二级导航与一级导航的 li 存在间距，鼠标划过后，二级导航正常显示出来，但划出后迅速消失，形成一种“够不到”的感觉（其实...
ASP

28,405

社区成员

356,946

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章