鼠标滑上去后图片放大浮出效果的js代码（js鼠标移动图片放大原理）

本篇文章给大家谈谈鼠标滑上去后图片放大浮出效果的js代码，以及js鼠标移动图片放大原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、javascript怎么样让，鼠标指向图片，图片逐渐放大
• 2、我想用js写图片点击后放大的效果，怎么写，求助
• 3、网页上鼠标移到图片上图片就放大的效果 要如何实现
• 4、网页设计 鼠标滑过 图片自动放大怎么做的代码，或者如何做？
• 5、求助，怎么做鼠标经过图片上浮的特效，求大神或javascript代码，感激涕零！
• 6、在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

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写图片点击后放大的效果，怎么写，求助

html

    head

        meta charset="utf-8" /

        script type="text/javascript" src='jquery-1.8.0.js'/script

    /head

    body

        img id="img1" src="11.jpg" style="width:100px;height:150px" alt="" /

    /body

    script type="text/javascript"

            $(function(){

                $("#img1").click(function(){

                    var width = $(this).width();

                    if(width==100)

                    {

                        $(this).width(200);

                        $(this).height(300);

                    }

                    else

                    {

                        $(this).width(100);

                        $(this).height(150);

                    }

                });

            });

    /script

/html

网页上鼠标移到图片上图片就放大的效果 要如何实现

用js，先是一个小图片（缩略图），onMouseOver时触发js写的Function，当然Function中是处理方法。这只是简单思路，至于怎么写网上有很多类似的代码可以供你copy了，自己找找。

网页设计 鼠标滑过 图片自动放大怎么做的代码，或者如何做？

两个方法：

1、用CSS，可以实现这种效果很简单，但是不好看，：

容器宽高度设置为大图片的宽高度，将图片做成背景，在hover里面写个大图的背景就行了，这样挺难看的，从小图变大图没有过度，一步到位；

2、用js做，不贴代码了，你可以直接搜索js幻灯片效果代码，站酷和阿里西西两个网站都不错，免费下载这些效果代码的。

求助，怎么做鼠标经过图片上浮的特效，求大神或javascript代码，感激涕零！

/*如果用JS，事件是onmouseover*/

对象.onmouover = function(){

// 这里修改下图片的位置就可以了。

//但是css必须要有position定位才行。

}

/*CSS也可以办到，用:hover */

ul{list-style:none;}

li{background:#FC9;width:100px;height:30px;float:left;text-align:center;position:relative;}

li:hover{background:#CCC;left:-2px;top:-5px;color:#FFF;text-align:center; cursor:pointer}

li:active{font-weight:bold;background:#666;}

/style

ul

li选项一/li

li选项二/li

li选项三/li

li返回/li

/ul

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

鼠标滑上去后图片放大浮出效果的js代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js鼠标移动图片放大原理、鼠标滑上去后图片放大浮出效果的js代码的信息别忘了在本站进行查找喔。