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

网页设计鼠标特效

发布时间:2021-03-14 11:46:15

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

<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>

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

鼠标移上去就打开页面: 第一步:把如下代码加入<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吧 我这个只是理论的写写 没实现过 你试试看吧

满意请采纳

3、网页设计特效??

能说的具体点吗?yahoo还是yahoo中国?什么栏目?

此为下拉式菜单,按钮为flash。
下拉式菜单的代码无须自己编写,有软件可以自动按要求生成,具体软件请去天空下载,地址:
http://www.skycn.com/sort/sort2010900_indate_DESC_1.html
FLASH按钮其实也是很简单的。下载个Macromedia Flash 自己去做一个就行了。

4、Dreamweaver网页制作如何在设计界面制作鼠标特效

鼠标特效最好利用FLANS制作,然后在Dreamweaver插入FLANS,利用代码做不到你想要的鼠标效果!

5、网页设计问题 鼠标经过图片效果

那样一个简单的效果 你写个JS 你麻烦不麻烦a:hover 不就可以了

6、这个网页里面的特效是怎么设计的? 用鼠标移动显示覆盖的效果!

用JQ写的代码,大体上就是鼠标移上去之后判断你的鼠标位置,然后显示第二张图片(也就是地震后的图片)的内容,基本上就是这个意思吧,你可以查看源里面的代码,写的挺简单的,不过真是好想法。
<script type="text/javascript" charset="utf-8">
jQuery(function(){

// Loop through all the sets of before and after pics
jQuery(".beforeafter").each(function(){

// Set the container's size to the size of the image
jQuery(this).width(jQuery(this).find("img[rel=before]").attr("width")).height(jQuery(this).find("img[rel=before]").attr("height"));

// Convert the images into background images on layered divs
jQuery(this).append("<div class='after'></div>").find(".after").css({"background": "url(" + jQuery(this).find("img[rel=after]").attr("src") + ")", "width": jQuery(this).find("img[rel=after]").attr("width") + "px", "height": jQuery(this).find("img[rel=after]").attr("height") + "px"});
jQuery(this).append("<div class='before'></div>").find(".before").css({"background": "url(" + jQuery(this).find("img[rel=before]").attr("src") + ")", "width": jQuery(this).find("img[rel=before]").attr("width") - 40 + "px", "height": jQuery(this).find("img[rel=before]").attr("height") + "px"});

// Add a helpful message
jQuery(this).append("<div class='help'>鼠标悬停图片上滑动观看</div>");

// Remove the original images
jQuery(this).find("img").remove();

// Event handler for the mouse moving over the image
jQuery(this).mousemove(function(event){

// Need to know the X position of the parent as people may have their browsers set to any width
var offset = jQuery(this).offset().left;

// Don't let the reveal go any further than 50 pixels less than the width of the image
// or 50 pixels on the left hand side
if ((event.clientX - offset) < (jQuery(this).find(".after").width() -50) && (event.clientX - offset) > 50) {
// Adjust the width of the top image to match the cursor position
jQuery(this).find(".before").width(event.clientX - offset);
}

});

// Fade out the help message after the first hover
jQuery(this).hover(function(){

jQuery(this).find(".help").animate({"opacity": 0}, 400, function(){ jQuery(this).find(".help").remove(); });

});

});

});

</script>

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

星星跟随,你哪个要求太高! <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> 星星
记得采纳啊

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

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

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

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

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