鼠标点击图片放大js(鼠标放在图片上图片放大)
javascript中如何实现当鼠标移到图片上时图片变大，移走后图片恢复原样
img id="1" src="./nylink.jpg" onmouseover="document.getElementById(1).style.width='250px';document.getElementById(1).style.height='500px';" onmouseout="document.getElementById(1).style.width='50px';document.getElementById(1).style.height='100px';" class="xuexi"/
主要是onmouseover事件，鼠标移到图片上，和onmouseout事件，鼠标离开图片时触发。
（急，高手）js鼠标点击图片放大后再点击关闭代码
你的代码看起来太让人痛苦了。。。所以直接说思路吧。
onlick函数里面判断一下点击状态就行了。
方法1：用一个变量来存，clicktime = 0，还没点击，clicktime =1 点了一次，clicktime =2 点了两次，所以通过clicktime 的值来判断图片应该放大还是关闭。
方法2：通过图片自身来判断，if(document.getElementByid(imgid).width==100)那么它就放大，if(document.getElementByid(imgid).width==500)那么它就关闭。style.display设置为none就行了
html中图片以中心放大的代码
html中图片以中心放大的代码如下：
div?style="?width:300px;?height:300px;margin-left:auto;
margin-right:auto;?overflow:hidden;?margin-top:100px;"
img?id="img"?onmouseover="bigger()"?onmouseout="smaller()"
src=""
style="cursor:pointer;width:300px;height:300px;
transition:all?1s?ease-out?0s;?perspective-origin:bottom;"/
script?type="text/javascript"
var?img?=?document.getElementById('img');
function?bigger(){
img.style.width?=?'400px';
img.style.height?=?'400px';
img.style.marginTop?=?"-50px";
img.style.marginLeft?=?"-50px";
}
function?smaller(){
img.style.width?=?'300px';
img.style.height?=?'300px';
img.style.marginTop?=?"0px";
img.style.marginLeft?=?"0px";
}
/script
扩展资料：
在html中用js实现鼠标指向图片时图片放大的效果的代码如下：
img id="img" onmouseover="bigger()" onmouseout="smaller()"
src="你的图片路径" style="width:100px;height:100px;" /
script type="text/javascript"
var img = document.getElementById('img');
function bigger(){??img.style.width = '400px';??img.style.height = '400px';?}
function smaller(){??img.style.width = '100px';??img.style.height = '100px';?}
/script
jsp如何实现用鼠标点击放大局部图片
在页面中加个层，点击图片时将图片地址再放到层中整个放大;
script
function clickImg(obj)
{
var dv=document.getElementById("div1");
dv.innerHTML="img src="+obj.src+" width=100 height=100 /";
}
/script
img src="address.jpg" width=10 height=10 onclick="clickImg(this)"/
div id="div1" style="position:absolute"
/div
javascript怎么样让，鼠标指向图片，图片逐渐放大
script type="text/javascript"
// ![CDATA[
var ImageScale = {};
// 下面的命名为了不影响其他的Js程序，固此使用匿名函数将其封装
(function() {
// 图片的宽度和高度的放大倍数
var IMG_MAX_WIDTH = 2, IMG_MAX_HEIGHT = 2;
// 图片放大时的动画速度(越大越慢)
var IMG_SCALE_SPEED = 20;
// 动画计时器
var ImgTimer = null;
// 记录原图片的大小
var sourceImgSize = {w:0,h:0};
// 鼠标经过图片的事件
ImageScale.imageMouseOver = function(img) {
var tagName = img.tagName.toLowerCase();
if(tagName == 'img') {
var w = parseInt(img.width);
var h = parseInt(img.height);
sourceImgSize['w'] = w;
sourceImgSize['h'] = h;
ImgTimer = setInterval(function() {
if(w = IMG_MAX_WIDTH * sourceImgSize['w'] || h = IMG_MAX_HEIGHT * sourceImgSize['h']) {
clearInterval(ImgTimer);
return;
}
// 图片以每 IMG_SCALE_SPEED 毫秒10像素的速度放大
h = parseInt(h * (w + 10) / w);
w += 10;
img.width = w;
img.height = h;
}, IMG_SCALE_SPEED);
}
}
ImageScale.imageMouseOut = function(img) {
var tagName = img.tagName.toLowerCase();
if(tagName == 'img') {
if(ImgTimer != null) {
clearInterval(ImgTimer);
ImgTimer = null;
}
img.width = sourceImgSize['w'];
img.height = sourceImgSize['h'];
}
}
})();
// 图片鼠标划过放大 测试
window.onload = function() {
var imgs = document.getElementsByTagName('img');
for(var i = 0, len = imgs.length; i len; i++) {
imgs[i].onmouseover = function() {
ImageScale.imageMouseOver(this);
};
imgs[i].onmouseout = function() {
ImageScale.imageMouseOut(this);
};
}
};
// ]]
/script
js鼠标点击图片放大后再点击关闭代码
这个就是做点击事件onclick，再定义一个全局变量，用来记录是第一次点击还是第二次点击图片。如：
var?flag=false;//用来记录是第一次点击还是第二次点击图片
function?check(){//处理函数
????if(flag==false){//第一次点击，放大图片
????????flag=ture;
????????//放大图片
????}else{//第二次点击，缩小图片
????????flag=false;
????}
}
最后再把check()方法绑定在图片标签上。img? onclick="check()"/