鼠标经过局部放大代码（鼠标经过局部放大代码怎么设置）

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

本文目录一览：

• 1、在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）
• 2、跪求：鼠标经过图片在一块专门显示图片的地方放大些图片？
• 3、JS局部放大的代码如何编写
• 4、dreamweaver里一张图片怎么做鼠标经过出现大图?
• 5、用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果？

在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）

分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸。

具体代码实现如下：

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

扩展资料：

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

参考资料：

JavaScript官方API接口-GlobalEventHandlers.onmouseover

JavaScript官方API接口-GlobalEventHandlers.onmouseout

W3cSchool-JavaScript 事件参考手册

跪求：鼠标经过图片在一块专门显示图片的地方放大些图片？

脚本说明:

第一步：把如下代码加入body区域中

STYLE type=text/css#mglass {

LEFT: -2000px; POSITION: absolute; TOP: 50px

}

#thumb {

LEFT: -2000px; POSITION: absolute; TOP: 50px

}

#large {

LEFT: -2000px; POSITION: absolute; TOP: 50px

}

#framegif {

LEFT: -2000px; POSITION: absolute; TOP: 50px

}

.baseline {

COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT: 50px; POSITION: absolute; TOP: 260px

}

/STYLE

SCRIPT language=JavaScript

!-- Beginning of JavaScript -

var isNav, isIE

var offsetX, offsetY

var selectedObj

var enlargefactor=5

var largewidth = 455

var largeheight = 523

var largeleft = 250

var largetop = 30

var thumbwidth = Math.floor(largewidth/enlargefactor)

var thumbheight = Math.floor(largeheight/enlargefactor)

var thumbleft = 50

var thumbtop = 30

var mglasswidth = 32

var mglassheight = 32

var mglassleft = 120

var mglasstop = 110

var difleft= largeleft-thumbleft

var diftop= largetop-thumbtop

var clippoints

var cliptop = (thumbheight-mglassheight)*enlargefactor

var clipbottom = cliptop+(mglassheight*enlargefactor)

var clipleft =(thumbwidth-mglasswidth)*enlargefactor

var clipright = clipleft+(mglasswidth*enlargefactor)

if (parseInt(navigator.appVersion) = 4) {

if (navigator.appName == "Netscape") {

isNav = true

} else {

isIE = true

}

}

function setZIndex(obj, zOrder) {

obj.zIndex = zOrder

}

function shiftTo(obj, x, y) {

if (isNav) {

obj.moveTo(x,y)

} else {

obj.pixelLeft = x

obj.pixelTop = y

}

cliptop = (y-thumbtop)*enlargefactor

clipbottom = cliptop+(mglassheight*enlargefactor)

clipleft = (x-thumbleft)*enlargefactor

clipright = clipleft+(mglasswidth*enlargefactor)

if (document.all) {

clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

document.all.large.style.posTop=largetop-cliptop

document.all.large.style.posLeft=largeleft-clipleft

document.all.large.style.clip=clippoints

}

if (document.layers) {

document.large.top=largetop-cliptop

document.large.left=largeleft-clipleft

document.large.clip.left = clipleft

document.large.clip.right = clipright

document.large.clip.top = cliptop

document.large.clip.bottom = clipbottom

}

}

function setSelectedElem(evt) {

if (isNav) {

var testObj

var clickX = evt.pageX

var clickY = evt.pageY

for (var i = document.layers.length - 1; i = 0; i--) {

testObj = document.layers[i]

if ((clickX testObj.left)

(clickX testObj.left + testObj.clip.width)

(clickY testObj.top)

(clickY testObj.top + testObj.clip.height)) {

selectedObj = testObj

setZIndex(selectedObj, 100)

return

}

}

} else {

var imgObj = window.event.srcElement

if (imgObj.parentElement.id.indexOf("mglass") != -1) {

selectedObj = imgObj.parentElement.style

setZIndex(selectedObj,100)

return

}

}

selectedObj = null

return

}

function dragIt(evt) {

if (selectedObj) {

if (isNav) {

shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))

} else {

shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))

return false

}

}

}

function engage(evt) {

setSelectedElem(evt)

if (selectedObj) {

if (isNav) {

offsetX = evt.pageX - selectedObj.left

offsetY = evt.pageY - selectedObj.top

} else {

offsetX = window.event.offsetX

offsetY = window.event.offsetY

}

}

return false

}

function release(evt) {

if (selectedObj) {

setZIndex(selectedObj, 0)

selectedObj = null

}

}

function setNavEventCapture() {

if (isNav) {

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

}

}

function init() {

if (document.layers) {

document.large.left=largeleft

document.large.top=largetop

document.framegif.left=largeleft-3

document.framegif.top=largetop-3

document.thumb.left=thumbleft

document.thumb.top=thumbtop

document.mglass.left=mglassleft

document.mglass.top=mglasstop

document.large.clip.left = 0

document.large.clip.right = 0

document.large.clip.top = 0

document.large.clip.bottom = 0

setNavEventCapture()

}

if (document.all) {

document.all.large.style.posLeft=largeleft

document.all.large.style.posTop=largetop

document.all.framegif.style.posLeft=largeleft-3

document.all.framegif.style.posTop=largetop-3

document.all.thumb.style.posLeft=thumbleft

document.all.thumb.style.posTop=thumbtop

document.all.mglass.style.posLeft=mglassleft

document.all.mglass.style.posTop=mglasstop

document.all.large.style.clip="rect(0 0 0 0)"

}

document.onmousedown = engage

document.onmousemove = dragIt

document.onmouseup = release

}

// - End of JavaScript - --

/SCRIPT

span id=thumbIMG name=thumbpic src="portrait2311.jpg" width=91

/span

span id=framegifIMG height=166 name=framepic src="frame2311.gif"

width=166 /span

span id=largeIMG name=largepic src="portrait2311.jpg" width=455

/span

span id=mglassIMG height=50 name=mglasspic src="mglass.gif"

width=50 /span

第二步：把body中的内容改为：

body bgcolor="#fef4d9" onload=init()

JS局部放大的代码如何编写

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "

html xmlns=" "

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titleMagnifier/title

style type="text/css"

#magnifier{

width:342px;

height:420px;

position:absolute;

top:100px;

left:250px;

font-size:0;

border:1px solid #000;

}

#img{

width:342px;

height:420px;

}

#Browser{

border:1px solid #000;

z-index:100;

position:absolute;

background:#555;

}

#mag{

border:1px solid #000;

overflow:hidden;

z-index:100;

}

/style

script type="text/javascript"

function getEventObject(W3CEvent) { //事件标准化函数

return W3CEvent || window.event;

}

function getPointerPosition(e) { //兼容浏览器的鼠标x,y获得函数

e = e || getEventObject(e);

var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));

var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

return { 'x':x,'y':y };

}

function setOpacity(elem,level) { //兼容浏览器设置透明值

if(elem.filters) {

elem.style.filter = 'alpha(opacity=' + level * 100 + ')';

} else {

elem.style.opacity = level;

}

}

function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值

for(var i in prop) {

if(i == 'opacity') {

setOpacity(elem,prop[i]);

} else {

elem.style[i] = prop[i];

}

}

return elem;

}

var magnifier = {

m : null,

init:function(magni){

var m = this.m = magni || {

cont : null, //装载原始图像的div

img : null, //放大的图像

mag : null, //放大框

scale : 15 //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决

}

css(m.img,{

'position' : 'absolute',

'width' : (m.cont.clientWidth * m.scale) + 'px', //原始图像的宽*比例值

'height' : (m.cont.clientHeight * m.scale) + 'px' //原始图像的高*比例值

})

css(m.mag,{

'display' : 'none',

'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽

'height' : m.cont.clientHeight + 'px',

'position' : 'absolute',

'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px', //放大框的位置为原始图像的右方远10px

'top' : m.cont.offsetTop + 'px'

})

var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //获取border的宽

css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]为浏览框

'display' : 'none', //开始设置为不可见

'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //原始图片的宽/比例值 - border的宽度

'height' : m.cont.clientHeight / m.scale - borderWid + 'px', //原始图片的高/比例值 - border的宽度

'opacity' : 0.5 //设置透明度

})

m.img.src = m.cont.getElementsByTagName('img')[0].src; //让原始图像的src值给予放大图像

m.cont.style.cursor = 'crosshair';

m.cont.onmouseover = magnifier.start;

},

start:function(e){

if(document.all){ //只在IE下执行,主要避免IE6的select无法覆盖

magnifier.createIframe(magnifier.m.img);

}

this.onmousemove = magnifier.move; //this指向m.cont

this.onmouseout = magnifier.end;

},

move:function(e){

var pos = getPointerPosition(e); //事件标准化

this.getElementsByTagName('div')[0].style.display = '';

css(this.getElementsByTagName('div')[0],{

'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px',

'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像

})

magnifier.m.mag.style.display = '';

css(magnifier.m.img,{

'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',

'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'

})

},

end:function(e){

this.getElementsByTagName('div')[0].style.display = 'none';

magnifier.removeIframe(magnifier.m.img); //销毁iframe

magnifier.m.mag.style.display = 'none';

},

createIframe:function(elem){

var layer = document.createElement('iframe');

layer.tabIndex = '-1';

layer.src = 'javascript:false;';

elem.parentNode.appendChild(layer);

layer.style.width = elem.offsetWidth + 'px';

layer.style.height = elem.offsetHeight + 'px';

},

removeIframe:function(elem){

var layers = elem.parentNode.getElementsByTagName('iframe');

while(layers.length 0){

layers[0].parentNode.removeChild(layers[0]);

}

}

}

window.onload = function(){

magnifier.init({

cont : document.getElementById('magnifier'),

img : document.getElementById('magnifierImg'),

mag : document.getElementById('mag'),

scale : 3

});

}

/script

/head

body

div id="magnifier"

img src="在这里输入你的照片源地址或链接 /

div id="Browser"/div

/div

div id="mag"img id="magnifierImg" //div

/body

注意粗体，关于标签我不太懂

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里测试。鼠标离开时图片正常，鼠标经过时图片放大。

用css怎么做DW5的当鼠标经过图片图片放大离开变回原形的效果？

1、假设图片外层DIV的class为pic，图片的大小是400*300，html代码可以写成下面这样:

divclass="pic"

imgsrc="abc.jpg"width="400"height="300"/

/div

2、如果希望鼠标经过时图片的尺寸变成600*450，那么在css里面只要这样定义就行了:picimg:hover{width:600px;height:450px}

3、这个代码在ie6下会不生效，因为ie6不支持除A标签外的其他元素的:hover伪类。如果要在ie6下兼容，只需要把div改成a标签，也就是在图片上加一个超链接，然后给它加上一个class即可。

鼠标

鼠标是计算机的一种输入设备，分有线和无线两种，也是计算机显示系统纵横坐标定位的指示器，因形似老鼠而得名"鼠标"(港台作滑鼠)。

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