电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JS實現放大鏡效果

瀏覽:98日期:2024-04-19 09:30:55

JS實現放大鏡效果,供大家參考,具體內容如下

鼠標移到圖片上就可以放大一塊區域

代碼:

<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> #small{ width: 700px; height: 340px; position: absolute; left: 70px; top: 100px; } #small img{ width: 100%; height: 100%; } #mark{ width: 200px; height: 200px; background-color:white; position: absolute; opacity: 0.5; filter: alpha(opacity=50); left: 0px; top: 0px; display: none; } #big{ width: 400px; height: 400px; border: 1px solid black; left: 800px; top: 100px; position: absolute; overflow: hidden; display: none; } #big img{ width: 1400px; height: 680px; position: absolute; left: 0px; top: 0px; } </style> <script> window.onload = function(){ var oSmall = document.getElementById('small'); var oBig = document.getElementById('big'); var oMark = document.getElementById('mark'); var oBigImg = oBig.getElementsByTagName('img')[0]; oSmall.onmouseover = function(){ oMark.style.display = 'block'; oBig.style.display = 'block'; } oSmall.onmouseout = function(){ oMark.style.display = 'none'; oBig.style.display = 'none'; } oSmall.onmousemove = function(ev){ var e = ev || window.event; var l = e.clientX - oSmall.offsetLeft - 100; if(l <= 0){ l = 0; } if(l >= (700-200)){ l = 500; } var t = e.clientY - oSmall.offsetTop - 100; if(t <= 0){ t = 0; } if(t >= (340-200)){ t = 140; } oMark.style.left = l + ’px’; oMark.style.top = t + ’px’; /* 右邊圖片移動方向與左邊圖片方向相反且成倍數移動 */ oBigImg.style.left = l * -2 + ’px’; oBigImg.style.top = t * -2 + ’px’; } } </script> </head> <body> <div id='small'> <img src='http://www.hdgsjgj.cn/bcjs/地獄之門衛士 加里奧.jpg' alt='怎么回事'> <div id='mark'></div> </div> <div id='big'> <img src='http://www.hdgsjgj.cn/bcjs/地獄之門衛士 加里奧.jpg' alt='怎么回事'> </div> </body></html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 护栏打桩机-打桩机厂家-恒新重工| 粉丝机械,粉丝烘干机,粉丝生产线-招远市远东粉丝机械有限公司 | 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 实验室隔膜泵-无油防腐蚀隔膜泵-耐腐蚀隔膜真空泵-杭州景程仪器 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 冲锋衣滑雪服厂家-冲锋衣定制工厂-滑雪服加工厂-广东睿牛户外(S-GERT) | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 消电检公司,消电检价格,北京消电检报告-北京设施检测公司-亿杰(北京)消防工程有限公司 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 欧洲MV日韩MV国产_人妻无码一区二区三区免费_少妇被 到高潮喷出白浆av_精品少妇自慰到喷水AV网站 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 大鼠骨髓内皮祖细胞-小鼠神经元-无锡欣润生物科技有限公司 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | 水热合成反应釜-防爆高压消解罐-西安常仪仪器设备有限公司 | 成都热收缩包装机_袖口式膜包机_高速塑封机价格_全自动封切机器_大型套膜机厂家 | 湖南自考_湖南自学考试网 | 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 河南橡胶接头厂家,河南波纹补偿器厂家,河南可曲挠橡胶软连接,河南套筒补偿器厂家-河南正大阀门 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 江苏皓越真空设备有限公司 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 深圳侦探联系方式_深圳小三调查取证公司_深圳小三分离机构 | Copeland/谷轮压缩机,谷轮半封闭压缩机,谷轮涡旋压缩机,型号规格,技术参数,尺寸图片,价格经销商 CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 玻纤土工格栅_钢塑格栅_PP焊接_单双向塑料土工格栅_复合防裂布厂家_山东大庚工程材料科技有限公司 | 上海佳武自动化科技有限公司 | 武汉创亿电气设备有限公司_电力检测设备生产厂家 | 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | 北京律师事务所_房屋拆迁律师_24小时免费法律咨询_云合专业律师网 | 联系我们老街华纳娱乐公司官网19989979996(客服) | 游戏版号转让_游戏资质出售_游戏公司转让-【八九买卖网】 | 西安耀程造价培训机构_工程预算实训_广联达实作实操培训 | 书法培训-高考书法艺考培训班-山东艺霖书法培训凭实力挺进央美 | 儋州在线-儋州招聘找工作、找房子、找对象,儋州综合生活信息门户! | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 精密线材测试仪-电线电缆检测仪-苏州欣硕电子科技有限公司 | 钢制拖链生产厂家-全封闭钢制拖链-能源钢铝拖链-工程塑料拖链-河北汉洋机械制造有限公司 |