经常，我们在浏览各种网页的时候，都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，详情便会展现在用户面前，而这一动画，就是利用了DOM+JS结合来实现的，今天的小练习就是要实现这个效果。
首先，先将页面基本的框架用html实现，将四张图封装在了一个名为“container”的div块中
<!doctype html> <meta charset="UTF-8"> <html> <head> <title> 鼠标滑过页面自动变大 </title> <link rel="stylesheet" href="styles/reset.css" /> <link rel="stylesheet" href="styles/slidingdoors.css" /> <script src="/UploadFiles/2021-04-02/slidlingdoors.js">接着，我将大体的样式用了两个样式表修饰如下：
依次为
slidingdoors.css和reset.css: #container { height: 477px; margin: 0 auto; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; overflow: hidden; position: relative; } #container img { position: absolute; display: block; left: 0; border-left: 1px solid #ccc; }/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }接下来，就要实现滑动效果了，js代码如下：
window.onload=function(){ var box=document.getElementById("container"); var imgs=box.getElementsByTagName("img"); var imgwidth=imgs[0].offsetWidth; var exposewidth=160; var boxwidth=imgwidth+exposewidth*(imgs.length-1); box.style.width=boxwidth+'px'; function setImgPos(){ for(var i=1;i<imgs.length;i++) { imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px'; } } setImgPos(); var translate=imgwidth-exposewidth; for(var i=0;i<imgs.length;i++) { (function(i){ imgs[i].onmouseover=function(){ setImgPos(); for(var j=1;j<=i;j++) { imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px'; } }; })(i); } };弄好后的效果图如下：
遇到的问题：
1.图片复位函数中i、j变量傻傻分不清；
2.做出来的效果一张图片复位后把其余未复位图片都挡住了，主要是复位函数出了小问题。
经验：js函数变量复杂，逻辑严谨，写代码时一定要谨慎小心
以上就是本文的全部内容，希望对大家的学习有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。