导航:首页 > 动漫图片 > 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里的图片
- 怎么做沙包图片
- 手机怎么在图片上添加文字
- 动漫百褶裙图片
- 图片怎么加网址
- 黄衬衫怎么搭配图片
- 小清新男动漫图片大全
- qq图片怎么复制粘贴