导航:首页 > 万维百科 > 网页设计鼠标移动显示

网页设计鼠标移动显示

发布时间:2020-10-20 09:51:57

1、在网页设计时,把鼠标指针移到标签按中,自动出现下拉选项,这是怎么做到的?

有个onmouse属性

2、网页设计中如何让字体的颜色随着鼠标的移动或者鼠标经过字体时而改变?

样式表的运用

中添加代码
a:link
{
//鼠标未经过时也就是网页显示的颜色
color:darkgreen;
text-decoration:none;//不显示下划线
}
a:hover
{
//鼠标经过时也就是点击时颜色
color:red;
position:relative;
top:1px;
//鼠标经过时让链接的文字上移一像素(动态效果就在这)
text-decoration:none;
}
a:visited
{
//鼠标经过后也就是点击链接后的颜色
color:blue;
position:relative;
top:1px;
text-decoration:none;
}

3、网页制作鼠标移动触发事件onmouseover

给图片或者元素加个ID,比如ID为element,并且该元素为定位元素,即有position属性。
var oElement = document.getElementById('element'); //获取该元素。
var iTop = oElement.offsetTop; //获取元素的TOP值。
var iNum = 5; //图片移动的距离
oElement.onmouseover = function (){
this.style.top = iTop + iNum; //如果上移,只需把加号改为减号即可。
}

不懂?下面追问。

4、网页制作鼠标移动图片怎么设置弹出小提示?

鼠标放上之后,出现图片本身的文字说明。例如:

<img src="这里是图片地址" alt="这里是文字说明">

这个现在不常用的。浏览器也不一定支持了。

那么第二种情况,就要用到JavaScript或者jQuery。JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。jQuery是一个轻量级的Javascript库。

例如如下代码(复制到到记事本保存为.html的后缀名即可预览):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生鼠标悬停图片文字动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}

#lanrenjia{ height:auto; width:820px;margin:100px auto; overflow:hidden;}
#lanrenjia ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}
#lanrenjia ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(
) repeat; font-size:12px; color:#fff;}
#lanrenjia ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}
#lanrenjia ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="lanrenjia">
<ul>
     <li>
         <a href="

         <div class="text">
            <b>菜单导航</b>
            <p>菜单导航栏目 - 是懒人之家下设的一个主要栏目,收集了大量互联网上的导航代码,内容涵盖量最广泛,最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>tab标签</b>
            <p>tab标签,是懒人之家下设的一个主要栏目,收集了大量互联网上的tab标签代码,内容涵盖量最广泛,最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>QQ在线客服代码</b>
            <p>在线客服 - 是懒人之家下设的一个主要栏目,收集了大量互联网上的在线客服代码,内容涵盖量最广泛,最实用</p></div>    
        </li>
        <li>
         <a href="

         <div class="text">
            <b>图片特效</b>
            <p>图片特效 - 是懒人之家下设的一个主要栏目,收集了大量互联网上的图片特效代码,内容涵盖量最广泛,最实用</p></div>    
        </li>
    </ul>
</div>
<script src="

<script>
$(function(){
$('#lanrenjia li').hover(function(){
$('.text',this).stop().animate({
height:'165px'
});
},function(){
$('.text',this).stop().animate({
height:'0'
});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>

5、网页制作鼠标移动触发事件onmouseover

给图片或者元素加个ID,比如ID为element,并且该元素为定位元素,即有position属性。
var
oElement
=
document.getElementById('element');
//获取该元素。
var
iTop
=
oElement.offsetTop;
//获取元素的TOP值。
var
iNum
=
5;
//图片移动的距离
oElement.onmouseover
=
function
(){
this.style.top
=
iTop
+
iNum;
//如果上移,只需把加号改为减号即可。
}
不懂?下面追问。

6、网页制作,一张图片,如何让鼠标移动到图片上面,可以显示文字

title属性可以实现简单的,不知道这个可以满足你的要求么?<img src="#" title="这个是文字提示" />

7、web网页设计问题,怎么设计出下图的效果,就是鼠标移上去就切换内容

我给你简单的写了例子,至于具体样式,你自己来写吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function meun(mun) {
var tab_name = document.getElementsByName("li");
for(var j=1;j<tab_name.length+1;j++){
for ( var i=1; i<=j; i++){
if ( i==mun ){
document.getElementById("right"+i).style.display="block";
document.getElementById("li"+i).style.color="#0ff";
}
else {
document.getElementById("right"+i).style.display="none";
document.getElementById("li"+i).style.color="#000";
}
}
}
}
</script>
<style>
.left_ul { float:left; width:200px;}
.left_ul li { height:30px; line-height:30px; text-align:center;}
.right1 { display:block; width:400px; float:left; height:200px; background:#999999;}
.right2 { display:none; width:400px; float:left; height:200px; background:#af6439;}
.right3 { display:none; width:400px; float:left; height:200px; background:#0ff;}
.right4 { display:none; width:400px; float:left; height:200px; background:#00f;}</style>
</head>
<body>
<ul class="left_ul">
<li name="li"><a href="#" onmousemove="meun(1)" id="li1">栏目1</a></li>
<li name="li"><a href="#" onmousemove="meun(2)" id="li2">栏目1</a></li>
<li name="li"><a href="#" onmousemove="meun(3)" id="li3">栏目1</a></li>
<li name="li"><a href="#" onmousemove="meun(4)" id="li4">栏目1</a></li>
</ul>
<div class="right1" id="right1">11111111111111111111111</div>
<div class="right2" id="right2">222222222222222222222</div>
<div class="right3" id="right3">3333333333333333333333</div>
<div class="right4" id="right4">44444444444444444444444444</div>
</body>
</html>

8、网页制作 如何让鼠标移到A图上,此处就变成B图

这个如果是用DW制作的话,挺简单就会实现的。只要做一个鼠标经过对象就可以了。我使用的是DWCS3的版本,具体的操作就是 “插入记录--图像对象--鼠标经过图像”

9、网页制作怎么实现鼠标进入下面出现下划线鼠标移开又没有呢?

label的鼠标事件:MouseEnter(鼠标进入是发生),MouseLeave(鼠标离开是发生)。具体好的效果可以在这两个事件里写详细代码。

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

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

与网页设计鼠标移动显示相关的知识