自从开始学习前端后,平时看到浏览器上的一些出彩的控件都想自己实现一下 O(∩_∩)O,不知大家有没有这个感觉。接下来就和大家分享一个,原控件来自百度翻译右下方,大家仔细找找应该能找到,如图所示:
感觉蛮有意思的,实现起来也不复杂,比较适合练手。好吧,废话不多说了,直接上代码吧。
html 代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8' />
- <title>
- zoom
- </title>
- <link rel="stylesheet" type="text/CSS" href="zoom.css" />
- </head>
- <body onload="zoom()">
- <div id='zoom'>
- <span title="分享.....">
- </span>
- <ul>
- <li title="QQ空间" class="li1">
- </li>
- <li title="腾讯微博" class="li2">
- </li>
- <li title="新浪微博" class="li3">
- </li>
- <li title="人人网" class="li4">
- </li>
- <li title="百度" class="li5">
- </li>
- <li title="豆瓣网" class="li6">
- </li>
- <li title="搜狐" class="li7">
- </li>
- <li title="开心网" class="li8">
- </li>
- </ul>
- </div>
- <script type="text/javascript" src="zoom.js">
- </script>
- </body>
- </html>
css 代码:
- *{
- margin:0px;
- padding:0px;
- }
- #zoom{
- position: absolute;
- top: 20px;
- right: 200px;
- border: 1px solid rgb(38,147,255);
- height: 40px;
- width: 40px;
- }
- #zoom > span{
- display: inline-block;
- position: absolute;
- top: 0px;
- bottom: 0px;
- left: 0px;
- width: 40px;
- background-image: url(sprite.png);
- background-repeat: no-repeat;
- background-position: -5px -7px;
- opacity: 0.8;
- filter:Alpha(opacity=50);/*IE78*/
- }
- #zoom ul{
- display: none;
- position: absolute;
- top: 0px;
- bottom: 0px;
- left: 50px;
- list-style: none;
- }
- #zoom ul li{
- display: inline-block;
- *display: inline;/*IE7*/
- *zoom:1;/*IE7*/
- *margin-left: 5px;/*IE7*/
- width: 16px;
- height: 16px;
- margin-top: 12px;
- background-image: url(sprite.png);
- background-repeat: no-repeat;
- }
- #zoom .li1{
- background-position: -57px -20px;
- }
- #zoom .li2{
- background-position: -77px -20px;
- }
- #zoom .li3{
- background-position: -98px -20px;
- }
- #zoom .li4{
- background-position: -119px -20px;
- }
- #zoom .li5{
- background-position: -140px -20px;
- }
- #zoom .li6{
- background-position: -161px -20px;
- }
- #zoom .li7{
- background-position: -182px -20px;
- }
- #zoom .li8{
- background-position: -203px -20px;
- }
#zoom li:hover{ cursor: pointer; opacity: 0.8; filter:Alpha(opacity=50);/*IE78*/ } #zoom span:hover{ cursor: pointer; opacity: 1; filter:Alpha(opacity=100);/*IE78*/ }
js 代码:
- var zoom = (function(){
- var zoomDom = document.getElementById('zoom'),
- state = {opened: false, onaction: false, length: 0},
- showSpan,
- ul;
- if (zoomDom.firstElementChild) {
- showSpan = zoomDom.firstElementChild;
- ul = showSpan.nextElementSibling;
- }else{ /*IE*/
- showSpan = zoomDom.firstChild;
- ul = showSpan.nextSibling;
- }
- /*兼容IE78的注册事件方法*/
- var addEvent = function(el, eventType, eventHandler){
- if(el.addEventListener){
- el.addEventListener(eventType, eventHandler,false);
- } else if(el.attachEvent){
- el.attachEvent('on' + eventType, eventHandler);/*IE78*/
- }
- };
- /*兼容IE的阻止默认事件方法*/
- var stopDefault = function(e){
- if(e&&e.preventDefault){
- e.preventDefault();
- } else {
- window.event.returnValue = false;/*IE*/
- }
- };
- /*展开控件*/
- var onOpen = function(){
- if(state.length>250){
- ul.style.display = 'inline-block';
- state.onaction = false; state.opened = true;
- }else{
- if(!state.onaction){ state.onaction = true;}
- state.length += 10;
- zoomDom.style.width = state.length + 'px';
- setTimeout(onOpen, 0)
- }
- };
- /*关闭控件*/
- var onCollapse = function(){
- if(state.length<41){
- state.onaction = false; state.opened = false;
- }else{
- if(!state.onaction){ state.onaction = true;}
- state.length -= 10;
- zoomDom.style.width = state.length + 'px';
- setTimeout(onCollapse, 0);
- }
- };
- /*点击触发按钮的回调*/
- var onSpanClick = function(e){
- stopDefault(e);
- if(!state.onaction){
- if(!state.opened){
- onOpen();
- }else{
- ul.style.display = 'none';
- onCollapse();
- }
- }
- };
- return function(){
- addEvent(showSpan, 'click', onSpanClick);
- };
- })();
下图是 css 中用到的图片(直接从百度翻译上截的图 ^_^):
大家下下来,改改名字放到根目录下就行了, 或者直接将 css 中两处:
- background-image: url(sprite.png);
改为:
- background-image: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
直接使用我上传的这个图片资源也是可以的(感谢强大的互联网 ^_^)。
接下来是我实现的效果展示:
接着说说,我在编写过程中的主要技术要点:
控件兼容到 IE7,手头没有 IE6,无法测试了,主要解决的兼容问题代码中都有标注。 采用了 css sprites 技术,大家应该已经发现了吧 ^_^,好技术就要用。
JS 中应用闭包,避免全局污染。
在 html 中 script 标签放到 body 底部,这种小细节俺也会注意到的(虽然都是本地资源╮(╯▽╰)╭)。 好吧,就是这些,不过这个小控件,还是有进一步完善的余地的,比如,可以使用 css3 属性来实现 div 的动态伸缩,可以将这个控件组件化,可以用 JQ 框架更加方便的实现(JQ 练手)等等。
来源: http://www.phperz.com/article/17/0415/272352.html