導航:首頁 > 萬維百科 > 網頁設計滾動滑鼠懸停

網頁設計滾動滑鼠懸停

發布時間:2020-12-15 19:51:52

1、製作一個包含一個按鈕的頁面,當滑鼠懸停(onMouseOver)在按鈕上時(JavaScript的使用)

<!doctype html>
<html>
  <head>
  <meta charset="utf-8"/>
  <title></title>
  <style type="text/css">

  </style>
  <script>
  function f1(){
   document.body.style.background="red";
  };
  function f2(){
   document.body.style.background = "#fff";
  };
  </script>
  </head>
  <body>
   <button onMouseOver="f1()" onMouseOut="f2()" >滑鼠懸停版事件權</button>
  </body>


</html>

2、如何製作正反都有的圖片 就是那種網頁上滑鼠懸停會翻轉的圖片

首先用像素好一點的手機把你的證件照正面反面都照一張,要清晰哦;

展開長圖
2/10
用QQ上的「我的設備」把你的照片傳到你的電腦上;

3/10
把它們另存到桌面上來;

查看剩餘1張圖
4/10
在你的電腦上下載一個美圖秀秀;

5/10
打開美圖秀秀,找到拼圖;

6/10
選擇我們放在桌面上的圖片;

7/10
這樣拼起來不正確怎麼辦,點擊版式;

8/10
找到上下均等的版式;

9/10
點擊圖片,為圖片調整位置

查看剩餘1張圖
10/10
為圖片調整好位置,保存到電腦上就好了。

3、網站設計css如何滑鼠懸停覆蓋另一張圖片

<div class="div">
<div class="img1 img">
    <img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy//pic/item/.jpg">
</div>
<div class="img2 img">
    <img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy//pic/item/.jpg">
</div>
</div>
<style>
.div{position:relative; width:800px; margin:auto;}
.img{position:absolute; z-index:0;}
.img2{left:150px; top:100px;}
.img1:hover{z-index:1;}
</style>

利用hover偽類就可以實現,自己再稍微修改下就可以了,解決請採納

4、在網頁製作中,怎麼把圖片應用為動態HTML效果?當滑鼠懸停時圖片1換成圖片2,要怎麼設置?

Dreamweaver中可以自動設置的
工具欄中 「插入」-「圖片對象」-「滑鼠經過圖片」
如果是用內CSS實現的話,可以在容需要設置動態效果的標簽中使用偽類:hover
具體怎麼用,就看你對CSS的掌握程度了。
PS:該方法不適用於IE6,其他的可以。
再有就是用JavaScript來實現了。
對於初學者的話,直接用Dreamweaver來實現比較容易。
後面兩種方法涉及到的東西比較多。

5、網頁設計中,怎麼才能讓滑鼠懸浮在圖標上面時,出特效文字說明?

用DREAMWEAVER時 點圖標 下面有屬性 在替換裡面輸入內容 就可以 這個替換就是 alt標簽
TITLE也可以給圖片加說明 性能上沒有ALT好 以前有些瀏覽器是不支持圖片加TITLE屬性的 給文字或者鏈接文字加說明用title標簽

不明白的再問我。。

6、網頁製作:如何實現滑鼠懸停時FLASH開始播放

你在Flash里做一個透明抄的按鈕,(也就是按鈕的前三禎都是空的,第四禎做一個與Flash文件同樣大的圖形做為映射感應區域)

然後,在按鈕上添加

on (rollOver) {
getURL("你的網址", "_blank");
}

rollOver表示滑鼠滑過

7、網頁製作 這樣使當滑鼠懸停時改變背景圖?

css方法:
html:
<img src="../img/1.jpg"/>
css:
img :hover{
background:url(../img/2.jpg);
}

8、如何在html網頁裡面製作滑鼠懸浮時字體有陰影的效果?

建議LZ將文字加工成圖片的形式,一種正常,一種帶陰影效果..將這兩張圖片分別做成滑鼠經過圖片就可以了..如果你明白CSS的話,也可以用CSS來對滑鼠經過狀態進行定義..如果不明白 直接在DW中執行 插入---圖像對象---滑鼠經過圖像..在彈出的對話框中設置滑鼠經過狀態的兩種狀態分別顯示的圖片就可以了!

9、dw製作的網頁在滑鼠懸停事件觸發不同內容

你寫的比較亂,你就是想做一個選項卡是嗎

.tab{font-size:12px;}
.tab ul , .tab ul li{margin:0;padding:0;}
.tab ul{diplay:block;height:31px;}
.tab ul li{float:left;list-style:none;width:50px;height:30px;text-align:center;line-height:30px;border:1px solid #999;margin:0 3px;border-bottom:none;cursor:pointer;}
.tab ul .hover{border-top:2px solid #f00;}
.content{border:1px solid #009;}

<div class='tab'>
<ul>
<li class="hover">房產</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div class="content" id="content">
<div>
<p>275萬購昌平鄰鐵三居 總價萬買一居</p>
<p>200萬內購五環三居 140萬安家東三環</p>
</div>
<div style='display:none;'>
<p>北京首現零首付樓盤 53萬購東5環50平</p>
<p>200萬內購五環三居 140萬安家東三環</p>
</div>
<div style='display:none;'>
<p>京樓盤直降5000 中信府 公園樓王現房</p>
<p>200萬內購五環三居 140萬安家東三環</p>
</div>
</div>
</div>

<script type="text/javascript">
var li = document.getElementsByTagName('li');
var div = document.getElementById('content').getElementsByTagName('div');
for(var i=0;i<li.length;i++){
li[i].atr=i;
li[i].onmouseover=function(){
//清除所有高亮和所有內容隱藏
for(var j=0;j<li.length;j++){
li[j].className='';
div[j].style.display='none';
}
//當前高亮顯示
li[this.atr].className='hover';
//當前內容顯示
div[this.atr].style.display='block';
}
}
</script>

10、關於網頁製作中懸浮窗在滑鼠在上面時停止的問題

<html>
<head>
<title>移動文字</title>
</head>
<body>
<MARQUEE onmouseover=this.stop() onmouseout=this.start() scrollAmount=1 direction=up>
文字從下向上移動,改成direction=left則左右向左移動 scrollamount=1 為速度,數字越大越慢
</MARQUEE>
</body>
</html>

與網頁設計滾動滑鼠懸停相關的知識