鼠标滑过图片放大代码（鼠标经过放大图片）

本篇文章给大家谈谈鼠标滑过图片放大代码，以及鼠标经过放大图片对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、CSS3 实现鼠标滑过图片，block以中心为原点进行放大
• 2、html中图片以中心放大的代码
• 3、dreamweaver里一张图片怎么做鼠标经过出现大图?
• 4、如何制作鼠标经过图片放大的效果

CSS3 实现鼠标滑过图片，block以中心为原点进行放大

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现

CSS3的transform: scale()可以按比例放大或缩小block的功能。

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

dreamweaver里一张图片怎么做鼠标经过出现大图?

1.新建html文档。

2.在head里插入链接和图片样式，表示鼠标经过时图片放大，代码如下：

style type="text/css"

a #big{width:800px;height:480px}

a #big:hover {width:1200px;height:720px}

/style

3.在body里插入a href="#"img id="big" src="images/done.jpg" //a，表示设置一个有链接的图片，引用图片放大样式。

4.在IE里测试。鼠标离开时图片正常，鼠标经过时图片放大。

如何制作鼠标经过图片放大的效果

我用代码做了一个，步骤如下。

1 打开Flash8，新建Flash文档，ctrl+F8，新建影片剪辑元件，导入图片。

2 回到主场景中，把影片剪辑元件拖到舞台，在属性面板中，命名该影片剪辑的实例名称为pic_mc

3 选中第一帧，F9，打开动作面板，写上写下代码:

pic_mc.onRollOver = function() {

pic_mc._xscale = pic_mc._xscale+50；

pic_mc._yscale = pic_mc._yscale+50；

}；

pic_mc.onRollOut = function() {

pic_mc._xscale = pic_mc._xscale-50；

pic_mc._yscale = pic_mc._yscale-50；

}；

4 测试影片即可。

说明，代码中的“50”是放大的像素数，你可以根据实际情况修改，值越大效果越明显。还有，这是Action Script 2.0代码，直接在Flash 8运行是没问题的，如果在Flash CS3或者CS4版本，注意在新建Flash文档时，选择“Flash文件（2.0）”。

如果还有问题，可以加我。

关于鼠标滑过图片放大代码和鼠标经过放大图片的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。