導航:首頁 > 萬維百科 > 網頁設計滑鼠特效代碼

網頁設計滑鼠特效代碼

發布時間: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>

與網頁設計滑鼠特效代碼相關的知識