这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这个是例如了 CSS 的 margin 负值和相对定位做的一个图片放大的效果。图片开始只是局部的,鼠标放上去显示整个图片。
- <!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=gb2312" />
- <title>无标题文档</title>
- <style>
- body{ font-size:12px; }
- ul,li,ol{ margin:0; padding:0; list-style:none; }
- .box{ margin:100px; clear:both; border:1px solid #000; }
- .box ul li{ list-style:none; float:left; width:60px; height:60px; margin-left:10px; text-align:center; border:1px solid #ccc; }
- .box ul li a{ display:block; background:#f2f2f2; width:60px; height:60px; overflow:hidden; }
- .box a img{ margin:-25px 0px 0px -25px; border:0; }
- .box a:hover{ width:105px; height:140px; border:4px solid #f2f2f2; margin:-40px -50px -80px -50px; padding:1px; position:relative; }/* 设置相对定位后才能盖住后面的层 */
- .box a:hover img{ margin:0; border:0; }
- .clear{clear:both;overflow:hidden;height:0;}
- </style>
- </head>
- <body>
- <div>
- <ul>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_17/1490193682_4071.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490193683_2391.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490193684_8234.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_5/1490193685_6864.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_5/1490193687_9990.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_15/1490193688_5338.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_12/1490193689_1454.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_6/1490193690_9309.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_12/1490193691_2144.jpg" widt="105" height="140" data-src="" ></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_1/1490193693_8761.jpg" widt="105" height="140" data-src="" ></li>
- </ul>
- <div></div>
- </div>
- </body>
- </html>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/288391.html