鼠标经过图片放大
日期：2014-05-16 浏览次数：20395 次
求助鼠标经过图片放大
当鼠标经过图片时,出现新的图片,新的图片大小比原图片大,并且能把原图片遮住.
也就是鼠标经过图片时以圆图片中心位置开始发大图片,鼠标离开后图片消失.
希望高手指点谢谢了
------解决方案--------------------
http://www.cssplay.co.uk/menu/lightbox2
这是个同时兼容IE5.5, IE6, IE7, Opera 8, Firefox 1.5等浏览器的符合标准的放大显示图片的例子。
------解决方案--------------------
写了一个带放大、缩小效果滴，L@_@K
<!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>
<title> zoom in image </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body style= "margin: 0px ">
<div style= "margin: 100px ">
<input type= "text " id= " " value= "my image " /> <br />
<input type= "image " id= "imgLogo " style= "border: 1px solid green " src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif " />
</div>
<script type= "text/javascript ">
<!--
var scale = 0.5;
var scaleInterval = 0.1;
var timeInterval = 10;
var iZoomInIntervalID = -1;
var iZoomOutIntervalID = -1;
var oImg = document.getElementById( "imgLogo ");
oImg.width = oImg.width * scale;
var oDiv;
var oLImage;
oImg.onmouseover = function() {
if (oDiv)
{
alert();
}
else
{
oDiv = document.createElement( "div ");
oLImage = document.createElement( "input ");
oLImage.type = "image ";
oLImage.src = this.src;
oDiv.appendChild(oLImage);
oLImage.extOriginalWidth = this.width / scale;
oLImage.extOriginalHeight = this.height / scale;
oLImage.extCurrentScale = scale;
oLImage.width = this.width;
oLImage.height = this.height;
oDiv.style.border = "1px dashed red ";
oDiv.style.position = "absolute ";
oDiv.style.posLeft = this.offsetLeft;
oDiv.style.posTop = this.offsetTop;
oDiv.style.zIndex = 100;
oDiv.onmouseout = function() {
iZoomOutIntervalID = window.setInterval(zoonOutImgage, timeInterval);
};
document.body.appendChild(oDiv);
iZoomInIntervalID = window.setInterval(zoonInImgage, timeInterval);
}
};
function zoonInImgage()
{
if (oLImage
&& Math.round(oLImage.extCurrentScale*100) < 100)
{
oLImage.extCurrentScale += scaleInterval;
oLImage.width = oLImage.extOriginalWidth * oLImage.extCurrentScale;
oLImage.height = oLImage.extOriginalHeight * oLImage.extCurrentScale;
}
else if (iZoomInIntervalID != -1)
{
window.clearInterval(iZoomInIntervalID);
iZoomInIntervalID = -1;
}
}
function zoonOutImgage()
{
if (oLImage
&& Math.round(oLImage.extCurrentScale*100) > scale*100)
{
oLImage.extCurrentScale -= scaleInt
当鼠标经过图片时,出现新的图片,新的图片大小比原图片大,并且能把原图片遮住.
也就是鼠标经过图片时以圆图片中心位置开始发大图片,鼠标离开后图片消失.
希望高手指点谢谢了
------解决方案--------------------
http://www.cssplay.co.uk/menu/lightbox2
这是个同时兼容IE5.5, IE6, IE7, Opera 8, Firefox 1.5等浏览器的符合标准的放大显示图片的例子。
------解决方案--------------------
写了一个带放大、缩小效果滴，L@_@K
<!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>
<title> zoom in image </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body style= "margin: 0px ">
<div style= "margin: 100px ">
<input type= "text " id= " " value= "my image " /> <br />
<input type= "image " id= "imgLogo " style= "border: 1px solid green " src= "http://www.csdn.net/ui/styles/public_header_footer/logo_csdn.gif " />
</div>
<script type= "text/javascript ">
<!--
var scale = 0.5;
var scaleInterval = 0.1;
var timeInterval = 10;
var iZoomInIntervalID = -1;
var iZoomOutIntervalID = -1;
var oImg = document.getElementById( "imgLogo ");
oImg.width = oImg.width * scale;
var oDiv;
var oLImage;
oImg.onmouseover = function() {
if (oDiv)
{
alert();
}
else
{
oDiv = document.createElement( "div ");
oLImage = document.createElement( "input ");
oLImage.type = "image ";
oLImage.src = this.src;
oDiv.appendChild(oLImage);
oLImage.extOriginalWidth = this.width / scale;
oLImage.extOriginalHeight = this.height / scale;
oLImage.extCurrentScale = scale;
oLImage.width = this.width;
oLImage.height = this.height;
oDiv.style.border = "1px dashed red ";
oDiv.style.position = "absolute ";
oDiv.style.posLeft = this.offsetLeft;
oDiv.style.posTop = this.offsetTop;
oDiv.style.zIndex = 100;
oDiv.onmouseout = function() {
iZoomOutIntervalID = window.setInterval(zoonOutImgage, timeInterval);
};
document.body.appendChild(oDiv);
iZoomInIntervalID = window.setInterval(zoonInImgage, timeInterval);
}
};
function zoonInImgage()
{
if (oLImage
&& Math.round(oLImage.extCurrentScale*100) < 100)
{
oLImage.extCurrentScale += scaleInterval;
oLImage.width = oLImage.extOriginalWidth * oLImage.extCurrentScale;
oLImage.height = oLImage.extOriginalHeight * oLImage.extCurrentScale;
}
else if (iZoomInIntervalID != -1)
{
window.clearInterval(iZoomInIntervalID);
iZoomInIntervalID = -1;
}
}
function zoonOutImgage()
{
if (oLImage
&& Math.round(oLImage.extCurrentScale*100) > scale*100)
{
oLImage.extCurrentScale -= scaleInt
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
