导航:首页 > 万维百科 > 网页设计鼠标特效代码

网页设计鼠标特效代码

发布时间:2020-09-18 18:15:22

1、网页设计,像这种网页鼠标划过红色部分,黄色部分的内容跟着变化,这种效果要怎么编写代码?求大神教,在

可以参照下面写法

.tabcontent .tabitem{display:none;}<div class="tab">
    <a class="tabs">第一个tab</a>
    <a class="tabs">第二个tab</a>
</div>
<div class="tabcontent">
    <div class="tabitem" style="display:block;">
        这是第一个tab要显示的
    </div>
    <div class="tabitem">
        这是第二个tab要显示的    
    </div>
</div>//用jq
$(".tab a").click(function(){
    $(".tabcontent .tabitem").eq($(this).index()).show().siblings().hide();
    $(this).addClass("on").siblings().removeClass("on");
})

2、网页制作鼠标特效拜托各位大神

星星跟随,你哪个要求太高! <html> <head> <title>网页特效|Linkweb.cn/Js|---围绕鼠标的七彩流星</title> </head> <body bgcolor="#000000" text="#000000"> <LAYER NAME="a0" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a1" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a2" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a3" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a4" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a5" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF00FF" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a6" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,1,1"> </LAYER> <LAYER NAME="a7" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffffff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a8" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#fff000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a9" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ffa000" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a10" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#ff00ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a11" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#00ff00" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a12" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#0000ff" CLIP="0,0,2,2"> </LAYER> <LAYER NAME="a13" LEFT="10" TOP="10" VISIBILITY="SHOW" BGCOLOR="#FF0000" CLIP="0,0,3,3"> </LAYER> <div id="starsDiv" style="position:absolute;top:0px;left:0px"><div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div><div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div><div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div><div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div></div><script LANGUAGE="JavaScript"> var Clrs = new Array(6); Clrs[0] = 'ff0000'; Clrs[1] = '00ff00'; Clrs[2] = '000aff'; Clrs[3] = 'ff00ff'; Clrs[4] = 'fff000'; Clrs[5] = 'fffff0'; var yBase = 200; var xBase = 200; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; var Xs = 200; var Ys = 400; if (document.layers) { window.captureEvents(Event.MOUSEMOVE); } if (document.all) { function MoveHandler() { Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt) { Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function Comet() { if (document.all) { yBase = window.document.body.offsetHeight / 4; xBase = window.document.body.offsetWidth / 4; } else if (document.layers) { yBase = window.innerHeight / 4; xBase = window.innerWidth / 4; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) { step = 3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai = 0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background = Clrs[c]; } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) { //number of NS layers! step = 6; var templayer = "a"+j; document.layers[templayer].top = Ypos + yBase*Math.cos((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor = Clrs[c]; } } currStep += step; setTimeout("Comet()", 5); } Comet(); // End --> </script> </body> </html> 星星
记得采纳啊

3、网页设计,用什么方法能做出这样的效果,就是鼠标经过的时候下面内容变换

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<style type="text/css">
         .box{width: 255px}
         .nav{padding-left: 0;margin-bottom: 0;list-style: none;height: 35px;}
         li{list-style: none; float: left; width: 80px;height: 35px;background: #ccc;margin-left: 2px;text-align: center;line-height: 35px;}
         .content {height: 100px;}
         .content div{width: 245px;height: 100px;background: #f2f2f2;display: none;}
         .content div.active{display: block;}
        </style>
        <div class="box">
         <div class="nav">
         <li>第一个</li>
         <li>第二个</li>
         <li>第三个</li>
        </div>
        <div class="content">
         <div class="active" style="background: #f09c36;">555</div>
         <div style="background: #adfc65;">666</div>
         <div style="background: #1ab394;">777</div>
        </div>
        </div>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"  charset="utf-8"></script>
     <script type="text/javascript">
     $('.nav li').hover(function(){
     var _this = $(this).index()
     $('.content').find('div').removeClass('active').eq(_this).addClass('active')
     })
     </script>
</body>

</html>

4、使用dreamweaver来制作网页的鼠标指针特效

语法是 cursor.url(xx.cur),xxx;

xxx 不可以随便输入,有些浏览器只认默认格式,例如 default help之类的鼠标特效名称。

ani不支持,是浏览器的问题,应该只有ie支持的。

5、求一个网页制作 鼠标放上出下拉菜单的效果代码

去懒人图库找吧 那里有很多

6、网页设计:鼠标特效代码 格式 放在哪个标记下 懂的来大神们帮帮忙

1.鼠标的特效一般情况下为了打开网页就取得效果,把代码存放在<head> </head>标签中,没有其他js代码时存放在body标签中间也无妨; 2.显示成文本 的情况应该是没有<script> </script>标签,或标签不全; 比如</script> 中的 "<" 或 ">" 写成了全角的 ;代码要在script标签中间才行;

7、请教网页设计高手鼠标特效代码代码求大神帮助

鼠标移上去就打开页面: 第一步:把如下代码加入<body>区域中 <SCRIPT Language="JavaScript">function winopen () {msg=open("update.htm","NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=260");}</SCRIPT> 第二步:把如下代码加入<body>区域中 <a href="链接地址" onMouseOver="winopen(); return true;"><IMG SRC="shu.gif" border="0"></a> 自动跳转的话这个度试看 <a href=" 链接地址" onMouseOver="指定页面"><IMG SRC="shu.gif" border="0"></a> 不行的话加我Q吧 我这个只是理论的写写 没实现过 你试试看吧

满意请采纳

8、网页制作。head里怎样加两段脚本代码,一段是状态栏特效,一段是鼠标特效。

鼠标特效<style type="text/css"></style>加到<head></head>之间就可以了,(加到script前面)
而鼠标特效的script, 直接把函数代码段加到你之前的已经写过的函数后就行了,把所有定义数据的var放到所以函数的最上边, 注意不要有重复的变量名,修改掉,就行了 网页的代码解析是逐行进行的,下面的函数使用到的变量,之前必须定义过.

实际上你这个就是CSS和JS的调用而已.开发都不会把这俩东西写在网页之内,都是直接创建CSS文件和JS文件,然后在网页中调用

9、网页设计中,怎样制作出链接的内容鼠标滑过就会动的那种效果

|你是说文字下陷那种效果?
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|---超链接陷下效果</title>
</head>

<body>

<style>
A:link,A:visited ,A:active {TEXT-DECORATION: none}
A:hover {text-decoration : none; position : relative; top : 1px; left : 1px}
</style>

<A HREF="http://linkweb.cn/js">来来,都到这里来……</A>

</body>

</html>

10、网页设计中 鼠标点击效果实现

<style> 
.black{color:black;font-weight:bold;}
a{color:blue;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>//载入JQ库 
<script>  
$("a").click(function(){
$("a").attr("href","#").removeClass("black");
$(this).removeAttr("href").addClass("black");
});</script>  
<a class="black">新闻</a> <a href="#" class="">网页</a> <a href="#" class="">知道</a> <a href="#" class="">百科</a>

与网页设计鼠标特效代码相关的知识