此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player

魔快网络 - 建高品质的网站!
电话:(0)15011022561 苏玮
QQ:476289485
MSN:[email protected]
·[远程桌面控制]错误: 拒绝访问
·[菜单制作]css+js下拉菜单
·[定时关机命令]定时关机命令
·[远程桌面控制]远程桌面控制与IIS设置
·[导航菜单]横向导航菜单 2009-1-25
·[搜索引擎优化] 网站优化-url优化
·[网络营销方法] SEO讲座:关键词布局技巧

◇ 搜索引擎小偷程序初探

成品[朝阳区]
魔快网络:建最优品质的网站 公司建网站,网页设计、制作 技术支持电话:15011022561

首页->鼠标在图片上移动局部放大图片

鼠标在图片上移动局部放大图片

鼠标移动局部放大图片

<script language="JavaScript">
<!--
var srcX = 1024; //原图大小,可以任意设置
var srcY = 768;
var bigX = 300; //预览窗大小,可以任意设置
var bigY = 225;
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; //边框
window.onload=function (){
head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";
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;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
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="head"></div>
<div id="smallbox">
<img src="../Pictures/40fdb5e62a427c06b93820aa.jpg" name="smallpic" width="300"
height="300" border="0" id="smallpic" onmousemove="move(event)"
onmouseover="document.getElementById('bigbox').style.display='';
document.getElementById('view').style.display=''"
onmouseout="document.getElementById('bigbox').style.display='none';
document.getElementById('view').style.display='none'" /></div>
<div id="bigbox" style="display:none"><div id="bigpico">
<img src="../Pictures/40fdb5e62a427c06b93820aa.jpg" name="bigpic" width="300"
height="300" border="0" id="bigpic" /></div>
</div>
<div id="view" onmousemove="move(event) "style="display:none">
</div>


关闭窗口   

  魔快分站|信诚威|青风荷韵|泛亚西亚|北京隆腾展具制作|祥威胜|优仕配音|诚灵纺织|国顺广告材料|中国设计名站|北京朝阳做网站|北京建网站|北京做网站
©2002-  电话:010-69440493  QQ:476289485 手机:15011022561(苏先生)  Email:[email protected]
地址:北京市建国门外大街17号28号楼 华星擘达商务楼6层2602 做网站找魔快,建站快、优化好!MoKuai.Net