導航:首頁 > 萬維百科 > 網頁設計滑鼠移動顯示

網頁設計滑鼠移動顯示

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

與網頁設計滑鼠移動顯示相關的知識