js 实现图片的放大和缩小
<!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> html,body,ul{margin:0;padding:0;} ul{width:366px;position:relative;background:#666;height:500px;margin:0 auto;} li{width:100px;height:100px;border:1px solid #000;background:#CCC;float:left;margin:10px;display:inline;list-style:none;z-index:1;} </style> <script src='perfectMove.js'></script> <script> window.onload = function(){ var ul = document.getElementsByTagName('ul')[0]; var arrLi = ul.getElementsByTagName('li'); /*布局转换*/ var minZindex = 2; for(var i=0;i<arrLi.length;i++){ arrLi[i].style.left = arrLi[i].offsetLeft+'px'; arrLi[i].style.top = arrLi[i].offsetTop+'px'; } //这个不能偷懒,和上面不能合成一个循环 for(var i=0;i<arrLi.length;i++){ arrLi[i].style.position = 'absolute'; arrLi[i].style.margin = 0;/*offset的时候已经赋值过margin*/ } /*图片的缩放*/ for(var i=0;i<arrLi.length;i++){ arrLi[i].onmouseover = function(){ this.style.zIndex = minZindex++; perfectStartMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});/*margin = (变大的宽-原来的)/2*/ }; arrLi[i].onmouseout = function(){ perfectStartMove(this,{width:100,height:100,marginLeft:0,marginTop:0}); }; } }; </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业