社区
JavaScript
帖子详情
求助鼠标经过图片放大
miefeng
2007-08-22 09:22:15
当鼠标经过图片时,出现新的图片,新的图片大小比原图片大,并且能把原图片遮住.
也就是鼠标经过图片时以圆图片中心位置开始发大图片,鼠标离开后图片消失.
希望高手指点谢谢了
...全文
5038
8
打赏
收藏
求助鼠标经过图片放大
当鼠标经过图片时,出现新的图片,新的图片大小比原图片大,并且能把原图片遮住. 也就是鼠标经过图片时以圆图片中心位置开始发大图片,鼠标离开后图片消失. 希望高手指点谢谢了
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
LG760526
2011-07-27
打赏
举报
回复
使用以下方法之一插入鼠标经过图像:
在“插入”栏的“常用”类别中,单击“图像”按钮,然后选择“鼠标经过图像”图标。“插入”栏中显示“鼠标经过图像”图标后,您可以将该图标拖到“文档”窗口中。
选择“插入”>“图像对象”>“鼠标经过图像”。
设置选项,然后单击“确定”。
图像名称 鼠标经过图像的名称。
原始图像 页面加载时要显示的图像。在文本框中输入路径,或单击“浏览”并选择该图像。
鼠标经过图像 鼠标指针滑过原始图像时要显示的图像。输入路径或单击“浏览”选择该图像。
预载鼠标经过图像 将图像预先加载浏览器的缓存中,以便用户将鼠标指针滑过图像时不会发生延迟。
替换文本 这是一种(可选)文本,为使用只显示文本的浏览器的访问者描述图像。
单击时,转到 URL 用户单击鼠标经过图像时要打开的文件。输入路径或单击“浏览”并选择该文件。
注: 如果您不为该图像设置链接,Dreamweaver 将在 HTML 源代码中插入一个空链接 (#),该链接上将附加鼠标经过图像行为。如果删除空链接,鼠标经过图像将不再起作用。
选择“文件”>“在浏览器中预览”,或按 F12。
在浏览器中,将鼠标指针移过原始图像以查看鼠标经过图像。
注: 不能在“设计”视图中看到鼠标经过图像的效果。
hanbing9122
2011-07-27
打赏
举报
回复
<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 400; //预览窗大小,可以任意设置
var bigY = 400;
var smallX = 300; //缩略图宽度
var smallY = srcY * smallX / srcX;
var viewX = bigX / srcX * smallX; //预览范围
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;//缩小比例
var border = 1; //边框
function myshow()
{
document.getElementById('bigbox').style.display = "block";
}
function myhide()
{
document.getElementById('bigbox').style.display = "none";
}
window.onload=function (){
smallpic.width=smallX;
smallpic.height=smallY;
bigpic.width=srcX;
bigpic.height=srcY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
bigbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
}
else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
bigbox.style.width=bigX;
bigbox.style.height=bigY;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
bigpico.style.marginLeft = - vX * bl
bigpico.style.marginTop = - vY * bl
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
img{display:block;}
#smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}
#head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}
//-->
</style>
<div id="smallbox"><img id="smallpic" src="/image/2.jpg" border="0" onmousemove="move(event)" onmouseout=)"></div>
<div id="bigbox"><div id="bigpico"><img id="bigpic" src="/image/1.jpg" border="0"></div></div>
<a href="#" onmousemove="myshow()" onmouseout="myhide()"><div id="view" onmousemove="move(event)"></div></a>
不知道为什么,这段代码只有FF能正常运行,IE里面有BUG
panyda
2010-07-30
打赏
举报
回复
是的,这抖动问题怎么解决呀??
Johan.
2009-10-14
打赏
举报
回复
学习
miefeng
2007-08-23
打赏
举报
回复
这效果存在问题.鼠标放上去一直在抖动
yixianggao
2007-08-22
打赏
举报
回复
写了一个带放大、缩小效果滴,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 -= scaleInterval;
oLImage.width = oLImage.extOriginalWidth * oLImage.extCurrentScale;
oLImage.height = oLImage.extOriginalHeight * oLImage.extCurrentScale;
}
else if (iZoomOutIntervalID != -1)
{
oDiv.style.display = "none";
oDiv.removeChild(oLImage);
oLImage = null;
document.body.removeChild(oDiv);
oDiv = null;
window.clearInterval(iZoomOutIntervalID);
iZoomOutIntervalID = -1;
}
}
//-->
</script>
</body>
</html>
miefeng
2007-08-22
打赏
举报
回复
谢谢楼上的
yiran5467
2007-08-22
打赏
举报
回复
http://www.cssplay.co.uk/menu/lightbox2
这是个同时兼容IE5.5, IE6, IE7, Opera 8, Firefox 1.5等浏览器的符合标准的放大显示图片的例子。
iSee视频监控 v5.2
回放时可进行
图片
抓拍功能,回放时文件备份功能、文件剪辑功能。 可进行远程监控,远程控制云镜、色彩、手动录像、布撤防、重启计算机等控制工作。 支持现今最大容量的硬盘,并支持安装多个大容量的硬盘。 ...
html
鼠标
移入
图片
放大
,大神
求助
,
鼠标
移入,
图片
放大
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 无标题文档 这个就是中间扩大的,
图片
地址换一下就可以
HTML中
鼠标
移入
图片
放大
怎么写,大神
求助
,
鼠标
移入,
图片
放大
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 无标题文档 这个就是中间扩大的,
图片
地址换一下就可以
【
求助
】自定义事件/
鼠标
滚轮滚动
放大
缩小
图片
,chrome下失效求解?
自定义事件/
鼠标
滚轮滚动
放大
缩小
图片
chrome下失效求解? 自定义事件/
鼠标
滚轮滚动
放大
缩小
图片
$(function(){ $('#img1').on('zoomIn',function(){ //缩小 $(this).css('width',200); }); ...
wex5 实战
图片
触摸
放大
移动插件easyzoom的使用与集成
遇到一个客户,让我做一个
图片
放大
,但是移动拖拽要定位精准。之前研究过一个hammer插件,多次尝试
放大
后的触摸点定位问题,始终无法解决。客户的需求可以理解,因为不是简单的
图片
介绍,而是复杂的工程图纸。最后...
JavaScript
87,916
社区成员
224,617
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章