導航:首頁 > 動漫圖片 > h5中滑鼠放在圖片上放大怎麼做
h5中滑鼠放在圖片上放大怎麼做
發布時間：2023-03-31 12:34:37Ⅰ 在html中怎麼實現滑鼠指向圖片時 有個放大鏡的圖標效果 還可以點擊圖片放大
你是要放大鏡效果吧，找JQ放大鏡效果，然後加到你的網頁中調用就可以了。
Ⅱ HTML5滑鼠放上去圖片變大怎麼寫
看完下面的代碼你就明白了，稍作刪改就是你要的效果
<!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=gb2312" />
<title>jQuery心型圖片牆滑鼠懸浮變大</title>
<style type="text/css">
*{padding:0; margin:0;}
ul,li{list-style:none;}
body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}
.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}
.heartPic ul{float:left;width:749px;}
.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
.heartPic ul li.on{z-index:99;}
.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}
.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
.heartPic .showDiv{display:block;}
</style>
</head>
<body>
<div class="heartPic">
<ul>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="亂肢/jscss/demoimg/201404/index_01.jpg" />
<p class="pTxt">可愛的女娃娃</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" />
<p class="pTxt">呆萌的小熊</p>
</div>
</li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" />
<p class="pTxt">卡哇伊的小熊</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" />
<p class="pTxt">女巫騎著掃帚</p>
</div>
</li>
<li></li>
</ul>
<ul>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" />
<p class="pTxt">女汪激娃娃</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" />
<p class="pTxt">星星可愛</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" />
<p class="pTxt">呆萌女</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" />
<p class="pTxt">狗狗</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" />
<p class="pTxt">綠樹</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" />
<p class="pTxt">粉愛粉愛的</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" />
<p class="pTxt">蠟筆小新</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" />
<p class="pTxt">震不碎的心</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" />
<p class="pTxt">很有意境</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" />
<p class="pTxt">櫻木花道最愛啊</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" />
<p class="pTxt">倆骷髏</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" />
<p class="pTxt">萌妹子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" />
<p class="pTxt">可愛的小狗</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" />
<p class="pTxt">夫婦倆白頭偕老</p>
</div>
</li>
</ul>
<ul>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" />
<p class="pTxt">刷子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" />
<p class="pTxt">偶的頭像</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" />
<p class="pTxt">樹葉子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" />
<p class="pTxt">星星</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" />
<p class="pTxt">淺色哦</p>
</div>
</li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" />
<p class="pTxt">太陽帥哥</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" />
<p class="pTxt">大笑臉</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" />
<p class="pTxt">企鵝</p>
</div>
</li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" />
<p class="pTxt">小兔子</p>
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".heartPic li").hover(function(){
$(this).addClass("on");
$(this).find("img").animate({"width":"200px","height":"200px"});
$(this).find("div").animate({"width":"200px","height":"200px"});
$(this).find(".pTxt").animate({"width":"200px","height":"20px"});
$(this).find("p").addClass("showDiv");
},function(){
$(this).animate({height:"100px"},100).removeClass("on");
$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
});
})
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>
Ⅲ 網站上當滑鼠經過一張圖片時圖片放大怎麼製作
給圖茄友片加一個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()"> 這樣就可以了。
Ⅳ 網頁上滑鼠移到圖片上圖片就放大的效果 要如何實現
用js，先是一個小圖片（縮略圖），onMouseOver時觸發js寫的Function，當然Function中是處理方法。這只是簡單思路，至於游畢怎麼寫網上有很多類似鋒磨答的代碼可以供銀慧你了，自己找找。
Ⅳ 在html5頁面中，一個div或者圖片，滑鼠移動上去的時候變大，移出的時候又變回原樣怎麼弄，
這里介紹兩種物則方式：
一：通過css樣式中的 ":hover"實現，代碼如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
div{
background:red;
width:200px;
height:200px;
}
div:hover{
background:red;
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>變大</div>
</body>
</html>
二：通過javascript方式實現，代碼如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<罩敏棚title>拿隱Document</title>
<style>
div{
background:red;
width:200px;
height:200px;
}
.divs{
background:red;
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>變大</div>
<script>
//首先獲取div元素
vardivs=document.getElementsByTagName('div')[0];
//滑鼠移入，將divs的className樣式賦給該標簽
divs.onmouseover=function(){
this.className="divs";
}
//滑鼠移出，將空的className樣式賦給該標簽
divs.onmouseout=function(){
this.className="";
}
</script>
</body>
</html>
Ⅵ 網頁中滑鼠停留圖片放大怎麼做
這個叢猛方法應該是很多的。這個效果的頌凳觸發應該是滑鼠的onmouseover事件，我只熟悉vbscript，所以可以通過下面方法：(pic_x.jpg為小圖，pic.jpg為原圖或大圖)
1。寫兩個個function
<script language="vbsript">
function fangda()
pic.innerhtml="<img src=pic.jpg>"
end funcation
function huanyuan()
pic.innerhtml=""
end function
</script>
2。<img src="pic_x.jpg" onmouseover="vbscript:fangda()" onmouseout="vbscript:huanyuan()">>
3。寫一個div
完整代碼如下：
<img src="lady1.jpg" width="50" height="50" onmouseover="vbscript:fangda()" onmouseout="vbscript:huanyuan()">
<div id="pic"滲櫻橋 style='position:absolute; z-index:20; '>
</div>
<script language="vbscript">
function fangda()
pic.innerhtml="<img src=""lady1.jpg"">"
end function
function huanyuan()
pic.innerhtml=""
end function
</script>
註：顯示控制可通過對div的調整來實現。
Ⅶ 滑鼠放在一張圖片上怎麼讓它放大
選擇橢圓工具繪制一個路徑橢圓（實心填充的）。
Ⅷ HTML中怎麼使滑鼠懸停在圖片上，使圖片變大求代碼解釋。
<!DOCTYPEhtml>
<head>
<script>
window.onload=function(){
varimg=document.getElementById("imgTest");
if(document.addEventListener){
img.addEventListener("mouseover",doMouseover,false);
img.addEventListener("mouseout",doMouseout,false);
}
elseif(document.attachEvent){
img.attachEvent("mouseover",doMouseover);
img.attachEvent("mouseout",doMouseout);
}
else{
img.onmouseover=doMouseover;
img.onmouseout=doMouseout;
}
}
functiondoMouseover(){
this.width=this.width*1.5;
this.height=this.height*1.5;
}
functiondoMouseout(){
this.width=this.width/1.5;
this.height=this.height/1.5;
}
</script>
</head>
<body>
<imgid="imgTest"src="img/barcode.jpg"/>
</body>
</html>
與h5中滑鼠放在圖片上放大怎麼做相關的資料
- 傷感女生流淚動漫圖片大全
- 情侶動漫背影圖片素描
- 校園圖片大全動漫圖片
- 微信頭像帥氣動漫頭像圖片大全
- 霸氣圖片男生圖動漫
- ps怎麼修改圖片大小3m以內
- 白衣少女動漫圖片
- 衣服噴繪圖片怎麼弄的
- 古代動漫長發女生圖片
- 男朋友結婚請柬怎麼寫範文圖片
- 邊牧圖片動漫
- 推文怎麼在圖片里插入文字
- 適合做頭像的動漫圖片
- word2010怎麼設置背景圖片
- 證件照怎麼批量改圖片大小
- 只有圖片怎麼上傳寶貝
- 動漫白圖片帶字圖片
- 動漫人物手繪教程圖片
- 怎麼往電腦裡面的圖片庫保存圖片
- 蔬菜怎麼畫簡筆畫圖片
- 動漫呆萌少女圖片大全
- 怎麼看早孕試紙圖片
- 藍願動漫圖片
- iphone怎麼傳圖片到手機
- 壁咚多的動漫圖片
- 微信怎麼查找群圖片
- 動漫書的圖片
- 中國眼睛動漫圖片
- 動漫污男污女圖片
- 修改的字怎麼融入圖片
- 動漫男生圖片帶翅膀
- 托下巴的動漫圖片
- 圖片傳輸慢怎麼辦
- ddf高清圖片怎麼打開
- 古裝動漫圖片大全唯美
- 一個人的動漫傷感圖片
- 動漫創意圖片
- 怎麼把word里的圖片
- 怎麼做沙包圖片
- 手機怎麼在圖片上添加文字
- 動漫百褶裙圖片
- 圖片怎麼加網址