導航:首頁 > 萬維百科 > 網頁設計圖片滑鼠移動圖片放大

網頁設計圖片滑鼠移動圖片放大

 發布時間：2020-12-05 08:56:17

1、HTML代碼移動滑鼠到圖片會變化是怎麼做的?

是滑鼠移來動到圖片源會變化還是滑鼠會變化？如果是滑鼠變化，需要用js控制。

如果是圖片變化，可以用css實現（圖片你自己換一下）：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

<style type="text/css">
a{display:block;width:200px;height:200px;background:url(1.jpg);}
a:hover{background:url(2.jpg);}

</style>

</head>

<body>
    <a href="###"></a>
</body>

</html>

2、在線急求!!!!網頁設計問題!滑鼠經過圖像變大

<img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-.gif"
style="cursor:pointer;"
onmouseover="this.style.width=274;this.style.height=92;" onmouseout="this.style.width=137;this.style.height=46;"
onclick="document.location.href('http://.baidu.com');"

/>

3、網站上當滑鼠經過一張圖片時圖片放大怎麼製作

給圖片加一來個onMouseOver和onMouseOut事件就可以做自到。 例： <script language=javascript> function ShowDiv(pic) { divPic.innerHTML="<img src="+pic+">"; divPic.style.display="block"; //還可以讓div跟著圖片所在的當前窗體位置居中，代碼略。 } function HideDiv() { divPic.style.display="none"; } </script> <div id="divPic"></div> <img src="1.jpg" width="150" height="120" onMouseOver="ShowDiv('1.jpg')" onMouseOut="HideDiv()"> 這樣就可以了。

4、網頁設計 滑鼠滑過 圖片自動放大怎麼做的代碼，或者如何做？

兩個方法：
1、用CSS，可以實現這種效果很簡單，但是不好看，：
容器寬高度設置為大圖片的寬高度，將圖片做成背景，在hover裡面寫個大圖的背景就行了，這樣挺難看的，從小圖變大圖沒有過度，一步到位；
2、用js做，不貼代碼了，你可以直接搜索js幻燈片效果代碼，站酷和阿里西西兩個網站都不錯，免費下載這些效果代碼的。

5、有網頁設計中當滑鼠移到時較圖片向前正向放大

把圖片copy作為連接<a href=""><img src=""/></a> ， css樣式里寫 a:hover{background-image:url(/../images/pp.jpg);}要是想兩張圖片相差很明顯，這個圖片所在的div要跟最大圖片尺寸相當，要不滑鼠移上去變大圖會把你的其他div或表格撐開的

6、網頁製作如何實現滑鼠經過圖片放大?

停止運動（運動可以用時間軸動畫完成），每個圖片上的按鈕元件透明度由0加到100。回
onpress的答時候，圖片的width（寬），height（高）參數加大，圖片就放大了。此時再加一個動作，當press，圖片大小回復到原大，圖片就縮小了。
這些動作的實現必須使用腳本。

7、網頁製作，滑鼠經過圖片變暗,點擊變大,圖標上浮，這是什麼特效

其實就是html裡面的a標簽的css屬性偽類，link、visited、hover、active；通過css可以實現的。

8、網頁製作滑鼠移動圖片怎麼設置彈出小提示？

滑鼠放上之後，出現圖片本身的文字說明。例如：

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

9、在網頁設計中怎樣編寫代碼實現當滑鼠移動到一張小圖片上,變成大圖片

?

與網頁設計圖片滑鼠移動圖片放大相關的知識