當前位置:首頁 » 網頁前端 » 懸停圖片放大腳本
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

懸停圖片放大腳本

發布時間: 2023-05-13 18:05:54

1. c#滑鼠懸停在圖片上要圖片自動放大

用onmouseover事件解決

2. html滑鼠懸停左側縮小圖片放大到右邊

html滑鼠懸停左側縮小圖片放大到右邊
首先這是一張圖片在懸停時皮悄放大也就是改變大小(寬,高)實現的咐嘩。

2,一張圖片在放大的時候會根據燃簡渣其定位(如在div裡面的圖片會以div的左上角為基準擴大寬和高)來放大的,因此如果我們不去為圖片添加相對定位並且不去調節擴大後的位置,他的放大會是向一邊的,因此我們必須考慮其放大後的位置。

3,放大的效果是要用動畫實現的。

代碼:html>

嘗試
.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}

.pic{position:absolute;}

$(function(){

$w = $('.pic').width();

$h = $('.pic').height();

$w2 = $w + 20;

$h2 = $h + 20;

$('.pic').hover(function(){

$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);

},function(){

$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);

});

});

3. 跑馬燈似的圖片滾動代碼,如何做滑鼠onmouse的懸停放大代碼怎麼寫非要js或者css么

首先是必須要有js跟CSS配合起來的,當然兩者都不一定,例如js也可以實現動畫效果,只是麻煩,要簡單早談點直接用JQ裡面的animate()方法配合css控制動畫,又或者直接一點使用CSS3實現動畫,注意是css3,但就你的代碼寫的是走馬燈這種早就沒人用的寫法,目測你是個初學者,所以我的回答你並不會採納,因陸森碰為你看不懂,現在一般都用腳本寫輪播圖,沒人用走馬燈的了。
CSS3的懸停我可以寫給你,JQ目測寫出來對你也沒多大用處,到時還得綁定什麼的你一搞不出覺得我瞎說不採納我那更悲劇
給img標簽加上class或者給marquee加上class,否則怎麼搞,我這里就以直接春橋給img加上class="animate"寫給你了
.animate:hover{-webkit-transform:scale(1.25,1.25);transform:scale(1.25,1.25);box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;-ms-transition:all .4s;transition:all .4s;}
裡面的大小什麼都是可以控制的,包括時間,這些就拜託您上W3C看看,我已經打了很多東西了,你要有良心就採納,採納後可以追問,否則別追問我問題了哈,我是web前端,語氣有點叼,因為我被迫來問答里混,原諒我一個技術人員被叫來干這些鳥不拉屎的工作,所以帶點脾氣

4. 如何在firefox火狐瀏覽器中實現把滑鼠停在圖片上 圖片自動放大

您好!很高興為您答疑!

您可以使用油猴子greasemonkey腳本picViewer,這個腳本功能非常強大,可以在圖上顯示放大的按鈕。
您可以在火狐社區了解更多內容。希望我的回答對昌宏您有所幫助,如有疑孝或問,歡迎繼續在本平台巧迅伍咨詢。

5. 滑鼠懸停特效代碼怎麼寫,滑鼠放在小圖片上旁邊顯示一張大圖片

代碼有bug,修改後如下:

需要注意,拷貝下面這段代碼,保存為 html後綴名的文件;需要自己在相液燃同的目錄下,放置兩張圖片,小圖片.jpg 大圖片.jpg

效果如下圖:當滑鼠懸停在小圖片上面的時候,會顯示大圖片;滑鼠移出,隱藏大圖片。

問題:定位需要讀者自己去實現一下吧,偷懶了。感謝樓上分享!

<!doctypehtml>
<html>
<head>
<metacharset=utf-8>
</head>
<body>
你要顯示特效的html
<imgsrc="小圖片.jpg"width="200px"height="200px"id="littleimg"onmouseout="hoverHiddendiv()"onmouseenter="hoverShowDiv()"/>
<divstyle="width:200px;height:80px;border:1pxsolide#aaccff;display:none;"id="divHover">
大圖片顯示如下
<imgsrc="大圖片.jpg"width="500px"height="300px"id="bigimg"/>
</div>
<scripttype="text/javascript">
letdivHover=document.getElementById("divHover");
functionhoverShowDiv(){
console.log("顯示大圖片");
divHover.style.display="block";
divHover.style.top=document.getElementById("littleimg").style.top+10;
divHover.style.left=document.getElementById("littleimg").style.left+10;
}
functionhoverHiddendiv(){
console.log("顯示小圖片");
鬧配虛divHover.style.display="none";
賣核}
</script>
</body>
</html>

6. css代碼完成滑鼠懸停時,圖片邊框和大小的變化

變色:使css的動畫animate可以實現。
放大:使用css的過渡缺坦效果translate就可鍵笑以了實現
如果你要同時實現,那就都用animate,樣式代碼寫稿扮含在一起

7. PPT圖片如何點擊放大

PPT圖片如何點擊放大

在製作PPT的時候,通過一些簡單的動畫效果可以使內容更具有表現力,下面就介紹下PPT圖片如何點擊放大,希望對你有所鏈租幫助。

【方法1】超鏈接

其實這種方法與「把圖片分別插到多張幻燈片上」沒有實質性地差別,只不過是你在演講的時候別人看不出來罷了,但是一旦你把PPT分享給別人了,你就原形畢露了!好了,不說廢話了,來看教程。

下面是你的PPT頁面,你要實現點擊每一張圖片都能實現放大的效果。

操作步驟:

1.插入一張空白幻燈片,然後插入你想要點擊放大的圖片,調整圖片大小使其占滿整個頁面。

2.回到原來的頁面,選中相應的小圖片,單擊滑鼠右鍵,選擇「超鏈接」——「本文檔中的位置」,然後找到剛才已調整圖片大小的幻燈片。

3.這個時候點擊幻燈片中的小圖,就可以實現放大的效果,但是這並沒有完成。我們還需要再回到原來的畫面上,所以我們要給「大圖」也設置超鏈接,實現點擊它回到原來頁面的效果。具體方法同步驟2相同,我就不羅嗦了。

同理可以設置其它兩張圖片的效果!

【方法2】插入演示文稿

這里要將的方法就有點高級了,也是我最喜歡的一種方法。

再來看這張頁面,我們需要實現點擊每一張圖片都能放大的'效果。

來看步驟吧!

1.先新建一張空白的幻燈片

2.依次選擇「插入」——「對象」——「Microsoft powerpoint演示文稿」,這個時候我們看到原來的頁面上又插入了一張新的空白幻燈片。

3.在步驟2的基礎上,選擇「插入」——「圖片」,我們可以看到這張新空白幻燈片中就插入了一張圖片。

4.調整圖片的位置,使圖片置於幻燈片的中央。(PS:藉助「網格和參考線」)

5.放映幻燈片,查看效果

這租喚中種方法實際上是在幻燈片中插入了另一個演示文稿,這樣既可以很方便地實現了圖片放大的效果,又避免了使用多張幻燈片,並且這些彰顯了你的PPT功底!

【方法3】觸發器

納尼?觸發器是什麼東東?完全沒聽過呀!不要緊張,觸發器就像一個電源開關,打開它你的屋子裡就充滿了光亮,關上它就是一片漆黑,僅此而已!

來看教程

1.新建一張空白幻燈片,插入圖片。在圖片下面插入兩個矩形框,調整矩形框的填充顏色,並分別輸入「放大」和「縮小」。

2.選擇要放大的圖片。依次選擇「動畫」——「添加動畫」——「強調」——「放大/縮小」。在動畫「效果選項」中選擇「較大」。然後選擇「觸發」,在「單擊」菜單下選擇「矩形1」

3.調整出來「動畫窗格」,再次選擇該圖片,然後依次選擇「添加動畫」——「強調」——「放大/縮小」。在動畫「效果選項」中選擇「較小」。然後選擇「觸發」,在「單擊」菜單下選擇「矩形2」

4.放映幻燈片,依次單擊「放大」、「縮小」查看效果。

拓展知識:ppt動畫效果:滑鼠懸停移開圖片自動放大縮小

具體操作方法如下:

(1)打開PPT,在第一頁中插入一張圖片。然後按【Ctrl+Shift+D】組合鍵,復制一張幻燈片。

(2)選擇第二張幻燈片中的圖片,按住【Ctrl+Shift+Alt】鍵的同時,滑鼠拖動圖片,將圖片等比例放大。

(3)選擇第二張幻燈片,然後點擊【切換】-【切換到此幻燈片】-【平滑】動畫效果,為其添加平滑效果。

(4)選擇第一張幻燈片,在【切換】-【計時】組中取消勾選「單擊滑鼠時」復選框。

(5)再次選擇第一張幻燈片中的圖片,點擊【插入】-【鏈接】-【動作】按鈕。

(6)打開「操作設置」對話框,選擇「滑鼠懸停」選項卡,選中「超鏈接到」單選按鈕,在其下拉列表中選擇「幻燈片...」選項。

(7)彈出「超鏈接到幻燈片」對話框,在「幻燈片標題」列表框中選擇「幻燈片2」,然後單擊「確定」按鈕。

(8)選擇第一張幻燈片,然後點擊【切換】-【切換到此幻燈片】-【平滑】動畫效果,為其添加平滑效果。

(9)選擇第二張幻燈片,點擊【插入】-【形狀】按鈕,選擇「矩形」選弊山項,繪制一個與頁面相同大小的無邊框白色矩形,然後右鍵,選擇「置於底層」命令,將矩形放於圖片下方。

(10)保持矩形的選中狀態,點擊【插入】-【鏈接】-【動作】按鈕。

(11)打開「操作設置」對話框,選擇「滑鼠懸停」選項卡,選中「超鏈接到」單選按鈕,在其下拉列表中選擇「幻燈片...」選項。

(12)彈出「超鏈接到幻燈片」對話框,在「幻燈片標題」列表框中選擇「幻燈片1」,然後單擊「確定」按鈕。

;

8. 如何在網頁上實現滑鼠懸停使圖片放大功能,好像java的class可以,不知道怎麼實現的呢

這有一個例子,你可以參考一下:
html顯示原始圖片
<a href="../images/4.jpg" class="preview" title="瘋狂滑雪"><img src="../images/4s.jpg" /></a>
<a href="../images/photo_1.jpg" class="preview" title="奧運吉祥物"><img width="100" height="75" src="../images/photo_1_small.gif"/></a>
以下是jQuery實現圖片預覽的主要過程。

hover()事件
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
程序中首先找到鬧帆銀預覽圖片,游標移動到某個圖片上時,將此圖片的預覽圖片添加到body中,將id命名為preview。preview開始是不可見的,.css()為圖片指液宴定了位置,.fadeIn()最終顯示預覽圖片。當游標離開圖片時,將添加的預覽圖片使用remove()方法移除。
使用mousemove()方法移動滑鼠時移動預覽
最後,當滑鼠在圖片上移動時,應該使用mousemove()方法將圖片預覽也進行轎慎移動。

$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
jQuery實現圖片預覽的完整代碼
this.imagePreview = function(){
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"
+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};