模拟购物网站商品放大镜实现
2015-12-16 10:52
651 查看
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>放大镜</title> <style type="text/css"> #div1 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; } #div1 .small_pic { width: 120px; height: 90px; background: #eee; position: relative; } #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; } #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;} #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } </style> <script type="text/javascript"> function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aTmp.push(aEle[i]); } } return aTmp; } window.onload=function () { var oDiv=document.getElementById('div1'); var oMark=getByClass(oDiv, 'mark')[0]; var oFloat=getByClass(oDiv, 'float_layer')[0]; var oBig=getByClass(oDiv, 'big_pic')[0]; var oSmall=getByClass(oDiv, 'small_pic')[0]; var oImg=oBig.getElementsByTagName('img')[0]; oMark.onmouseover=function () { oFloat.style.display='block'; oBig.style.display='block'; }; oMark.onmouseout=function () { oFloat.style.display='none'; oBig.style.display='none'; }; oMark.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; if(l<0) { l=0; } else if(l>oMark.offsetWidth-oFloat.offsetWidth) { l=oMark.offsetWidth-oFloat.offsetWidth; } if(t<0) { t=0; } else if(t>oMark.offsetHeight-oFloat.offsetHeight) { t=oMark.offsetHeight-oFloat.offsetHeight; } oFloat.style.left=l+'px'; oFloat.style.top=t+'px'; var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth); var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight); oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; }; }; </script> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" /></div> <div class="big_pic"><img src="http://www.codefans.net/jscss/demoimg/wall6.jpg" /></div> </div> </body> </html>
相关文章推荐
- 模拟购物网站商品放大镜实现
- 架构设计之异常处理(第一讲)
- 网站前端网页优化的原则(雅虎14条)
- 主流芯片架构向三大方向发展
- 项目讨论:本地手机经销商如何用移动网站开展本地营销?
- 期中架构心得
- 关于大型网站技术演进的思考(一)--存储的瓶颈(1)
- javascript实现网站加入收藏功能
- 网站流量变现最新方法 轻轻松松月入百万
- 免费的网站排名查询接口
- Android应用架构
- 商城网站物品五星好评的效果
- ExtJs——Ext基础架构--define定义一个类
- 部门考勤系统网站开发配置记录
- 三层架构:表示层-业务逻辑…
- 系统架构设计理论与原则
- 使用jsoup从网站抓取数据
- 微服务架构
- 电子商务网站的系统规划-1
- 电子商务网站专题页策划的6个必杀技