这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 JS DOM 实现鼠标滑动图片效果,只要将鼠标放上该商品的区域,原本折叠起来的商品便会自动展开,感兴趣的小伙伴们可以参考一下
经常,我们在浏览各种网页的时候,都会有各种动画效果展示,像下图所示的是很多网上商城常用的货品展示方式,同类的货品并排展现在窗口上,用户如果看中了哪一款商品想要查看详情的话,只要将鼠标放上该商品的区域,原本折叠起来的商品便会自动展开,详情便会展现在用户面前,而这一动画,就是利用了 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="slidlingdoors.js">
- </script>
- </head>
- <body>
- <div id="container">
- <img src="./images/door1.png" />
- <img src="./images/door2.png" />
- <img src="./images/door3.png" />
- <img src="./images/door4.png" />
- </div>
- </body>
- </html>
接着,我将大体的样式用了两个样式表修饰如下:
依次为
- 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 函数变量复杂,逻辑严谨,写代码时一定要谨慎小心
来源: http://www.phperz.com/article/17/0629/266626.html