注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

幽狼De博客

记录成长中的点点滴滴

 
 
 

日志

 
 

js控制ul淘宝网较前端技术  

2009-07-22 16:51:57|  分类: DIV+CSS+JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://www.javaeye.com/topic/363095

1. 菜单一 | 菜单二 | 菜单三(demo1.zip )

 

代码结构:

Html代码
  1. <ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>  
<ul><li>菜单一</li><li>菜单二</li><li>菜单三</li></ul>

 通常我们会li加css

Html代码
  1. border-right:1px solid #000  
border-right:1px solid #000

 这样最后一个li也有右边框,是多余的,只能为最后一个li添加一个class来区分(左边框的情况类似)

 

 而demo1中我们为li加css

Html代码
  1. ul{overflow:hidden;}  
  2. ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}  
ul{overflow:hidden;}  ul li{float:left;list-style-type:none;border-left:1px solid #000;padding:0 20px;margin-left:-1px;}

ul的overflow:hidden和li的margin-left:-1px是为了让最左边li的左边框隐藏起来,这样每个li都可以用一样的样式,便于给li循环

 

2 .压缩图片

通常web页面中从后台传的图片和设计师设计的图片大小不一样,这个时候需要按照原图长宽的比例进行压缩,不能超过设计师设定的图片大小。

initial是原始图片大小;goal是压缩后的图片大小;max是最大值

当原始图片长宽有任意一个大于对应的最大值或者两个都小于最大值时对图片大小进行压缩

其它情况不压缩

 

Js代码
  1. function imgSize(element,maxWidth,maxHeight){  
  2.     $(element).each(function() {  
  3.         var initialWidth = $(this).attr("width");  
  4.         var initialHeight = $(this).attr("height");  
  5.         var goalWidth = initialWidth;  
  6.         var goalHeight = initialHeight;  
  7.         if (initialWidth > maxWidth || initialHeight > maxHeight) {  
  8.             if (initialWidth / maxWidth >= initialHeight / maxHeight) {  
  9.                 var goalWidth = maxWidth;  
  10.                 var goalHeight = (initialHeight * maxWidth) / initialWidth;  
  11.             }  
  12.             else {  
  13.                 var goalWidth = (initialWidth * maxHeight) / initialHeight;  
  14.                 var goalHeight = maxHeight;  
  15.             }  
  16.         }  
  17.         else if (initialWidth < maxWidth && initialHeight < maxHeight) {  
  18.             if (initialWidth / maxWidth >= initialHeight / maxHeight) {  
  19.                 var goalWidth = maxWidth;  
  20.                 var goalHeight = (initialHeight * maxWidth) / initialWidth;  
  21.   
  22.             }  
  23.             else {  
  24.                 var goalWidth = (initialWidth * maxHeight) / initialHeight;  
  25.                 var goalHeight = maxHeight;  
  26.             }  
  27.         }  
  28.         $(this).attr("width", goalWidth);  
  29.         $(this).attr("height", goalHeight);  
  30.     });  
  31. }  
function imgSize(element,maxWidth,maxHeight){      $(element).each(function() {          var initialWidth = $(this).attr("width");          var initialHeight = $(this).attr("height");          var goalWidth = initialWidth;          var goalHeight = initialHeight;          if (initialWidth > maxWidth || initialHeight > maxHeight) {              if (initialWidth / maxWidth >= initialHeight / maxHeight) {                  var goalWidth = maxWidth;                  var goalHeight = (initialHeight * maxWidth) / initialWidth;              }              else {                  var goalWidth = (initialWidth * maxHeight) / initialHeight;                  var goalHeight = maxHeight;              }          }          else if (initialWidth < maxWidth && initialHeight < maxHeight) {              if (initialWidth / maxWidth >= initialHeight / maxHeight) {                  var goalWidth = maxWidth;                  var goalHeight = (initialHeight * maxWidth) / initialWidth;                }              else {                  var goalWidth = (initialWidth * maxHeight) / initialHeight;                  var goalHeight = maxHeight;              }          }          $(this).attr("width", goalWidth);          $(this).attr("height", goalHeight);      });  }
 

3 .布局

(图一) (图二) (图三)

要实现如图的这种布局,可以用三个并列关系的div加上样式就可以实现

代码结构:

Html代码
  1. <div id="first"></div>    
  2. <div id="second"></div>    
  3. <div id="third"></div>  
<div id="first"></div>    <div id="second"></div>    <div id="third"></div>

这种代码结构非常灵活,可以仅仅通过样式达到多种布局效果

 

图一(demo3.1.zip)的css:

Html代码
  1. <style type="text/css">  
  2.     body{margin:10px;padding:0;}  
  3.     div{background:#ccc;}     
  4.     #first{float:left;width:100px; height:150px}     
  5.     #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}    
  6.     #third{margin-left:110px;_margin-left:107px; height:310px}  
  7. </style>  
  8. /*_margin-left:107px;为了ie6多出的3像素而写的hack*/   
<style type="text/css">   body{margin:10px;padding:0;}   div{background:#ccc;}      #first{float:left;width:100px; height:150px}      #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}     #third{margin-left:110px;_margin-left:107px; height:310px}  </style>  /*_margin-left:107px;为了ie6多出的3像素而写的hack*/   

图二(demo3.2.zip)的css

Html代码
  1. <style type="text/css">  
  2.     body{margin:10px;padding:0;}  
  3.     div{background:#ccc;}     
  4.     #first{float:left;width:100px; height:300px}     
  5.     #second{float:right;width:100px;height:300px}    
  6.     #third{margin:0 110px;_margin:0 107px; height:300px}  
  7. </style>  
  8. /*_margin:0 107px; 为了ie6多出的3像素而写的hack*/   
<style type="text/css">   body{margin:10px;padding:0;}   div{background:#ccc;}      #first{float:left;width:100px; height:300px}      #second{float:right;width:100px;height:300px}     #third{margin:0 110px;_margin:0 107px; height:300px}  </style>  /*_margin:0 107px; 为了ie6多出的3像素而写的hack*/ 

图三(demo3.3.zip)的css和js,鼠标hover时当前模块放大比例

Html代码
  1. <style type="text/css">  
  2.     body{margin:0;padding:0;}  
  3.     div{background:#ccc;position:absolute;}  
  4.     #first{width:100px; height:150px;top:10px;left:10px;}     
  5.     #second{width:100px;height:150px;top:170px;left:10px;}    
  6.     #third{height:310px;top:10px;left:120px;width:200px;}   
  7. </style>  
  8. <script type="text/javascript" language="text/javascript">  
  9.     function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)     
  10.         var obj=document.getElementById(id); // 获取元素对象值   
  11.         var dW=obj.clientWidth; // 获取元素宽度     
  12.         var dH=obj.clientHeight; // 获取元素高度         
  13.         obj.onmouseover=function(){ // 鼠标移入     
  14.             this.style.width=dW*x+"px"; // 横向缩放     
  15.             this.style.height=dH*y+"px"; // 纵向缩放     
  16.             this.style.backgroundColor="#f00"; // 设置调试背景     
  17.             this.style.zIndex=1; // 设置z轴优先     
  18.         }     
  19.         obj.onmouseout=function(){ // 鼠标移出,设回默认值     
  20.             this.style.width="";     
  21.             this.style.height="";     
  22.             this.style.padding="";     
  23.             this.style.backgroundColor="";     
  24.             this.style.zIndex="";     
  25.         }     
  26.     }  
  27. zoom("first",1.25,1.25);  
  28. zoom("second",1.25,1.25);  
  29. zoom("third",1.25,1.25);  
  30. </script>  
<style type="text/css">   body{margin:0;padding:0;}   div{background:#ccc;position:absolute;}   #first{width:100px; height:150px;top:10px;left:10px;}      #second{width:100px;height:150px;top:170px;left:10px;}     #third{height:310px;top:10px;left:120px;width:200px;}   </style>  <script type="text/javascript" language="text/javascript">   function zoom(id,x,y){ // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)       var obj=document.getElementById(id); // 获取元素对象值     var dW=obj.clientWidth; // 获取元素宽度       var dH=obj.clientHeight; // 获取元素高度         obj.onmouseover=function(){ // 鼠标移入        this.style.width=dW*x+"px"; // 横向缩放        this.style.height=dH*y+"px"; // 纵向缩放        this.style.backgroundColor="#f00"; // 设置调试背景        this.style.zIndex=1; // 设置z轴优先       }       obj.onmouseout=function(){ // 鼠标移出,设回默认值        this.style.width="";        this.style.height="";        this.style.padding="";        this.style.backgroundColor="";        this.style.zIndex="";       }      }  zoom("first",1.25,1.25);  zoom("second",1.25,1.25);  zoom("third",1.25,1.25);  </script>

 

4 .获取浏览器可见区域的宽高,通用方法:

Js代码
  1. //以下的方法对于很多浏览器都适用  
  2. function windowHeight() {  
  3.     var windowHeight;//最后传出的值  
  4.     if (self.innerHeight) { // 除了IE以外的浏览器  
  5.         windowHeight = self.innerHeight;  
  6.     }   
  7.     else if (document.documentElement && document.documentElement.clientHeight) { /* IE6 浏览器 */  
  8.         windowHeight = document.documentElement.clientHeight;  
  9.     }   
  10.     else if (document.body) { //其他版本的IE浏览器  
  11.         windowHeight = document.body.clientHeight;  
  12.     }  
  13.     return windowHeight;  
  14. }  
  15.   
  16. function windowWidth() {  
  17.     var windowWidth;//最后传出的值  
  18.     if (self.innerWidth) { // 除了IE以外的浏览器  
  19.         windowWidth = self.innerWidth;  
  20.     }   
  21.     else if (document.documentElement && document.documentElement.clientWidth) { /* IE6 浏览器 */  
  22.         windowWidth = document.documentElement.clientWidth;  
  23.     }   
  24.     else if (document.body) { // 其他版本的IE浏览器  
  25.         windowWidth = document.body.clientWidth;  
  26.     }  
  27.     return windowWidth;  
  28. }  
//以下的方法对于很多浏览器都适用  function windowHeight() {      var windowHeight;//最后传出的值      if (self.innerHeight) { // 除了IE以外的浏览器          windowHeight = self.innerHeight;      }    else if (document.documentElement && document.documentElement.clientHeight) { /* IE6 浏览器 */          windowHeight = document.documentElement.clientHeight;      }    else if (document.body) { //其他版本的IE浏览器          windowHeight = document.body.clientHeight;      }      return windowHeight;  }    function windowWidth() {      var windowWidth;//最后传出的值      if (self.innerWidth) { // 除了IE以外的浏览器          windowWidth = self.innerWidth;      }    else if (document.documentElement && document.documentElement.clientWidth) { /* IE6 浏览器 */          windowWidth = document.documentElement.clientWidth;      }    else if (document.body) { // 其他版本的IE浏览器          windowWidth = document.body.clientWidth;      }      return windowWidth;  }

 

5 .淘宝的简易框架(demo5.zip)

偶然的机会看到了淘宝的这个框架,写得很不错,玉伯的css也非常工整

圆角的切图也挺有意思的,值得我去学习效仿。

 

6 .滚动消息(demo6.zip)

上下往返滚动的消息一般常出现在公告栏或者新闻栏,以前比较喜欢用Marquee标签来实现,不过Marquee实现的滚动会有头尾不能连接起来而导致消息栏出现短暂的空白的缺陷,而且w3c也不支持Marquee标签。所以用js来实现更完美一些。

Js代码
  1. function scroll(element, delay, speed, lineHeight) {  
  2.     var numpergroup = 5;  
  3.     var slideBox = (typeof element == 'string')?document.getElementById(element):element;  
  4.     var delay = delay||1000;  
  5.     var speed=speed||20;  
  6.     var lineHeight = lineHeight||20;  
  7.     var tid = null, pause = false;  
  8.     var liLength = slideBox.getElementsByTagName('li').length;  
  9.     var lack = numpergroup-liLength%numpergroup;  
  10.     for(i=0;i<lack;i++){  
  11.     slideBox.appendChild(document.createElement("li"));  
  12.     }  
  13.     var start = function() {  
  14.          tid=setInterval(slide, speed);  
  15.     }  
  16.     var slide = function() {  
  17.          if (pause) return;  
  18.          slideBox.scrollTop += 2;  
  19.          if ( slideBox.scrollTop % lineHeight == 0 ) {  
  20.                 clearInterval(tid);  
  21.                 for(i=0;i<numpergroup;i++){  
  22.                     slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);  
  23.                 }  
  24.                 slideBox.scrollTop = 0;  
  25.                 setTimeout(start, delay);  
  26.          }  
  27.     }  
  28.     slideBox.onmouseover=function(){pause=true;}  
  29.     slideBox.onmouseout=function(){pause=false;}  
  30.     setTimeout(start, delay);  
  31. }  
  32. 四个参数分别是:操作对象, 停留时间,相对速度(越小越快),每次滚动多少(最好和Li的Line-height一致)。  
function scroll(element, delay, speed, lineHeight) {   var numpergroup = 5;   var slideBox = (typeof element == 'string')?document.getElementById(element):element;   var delay = delay||1000;   var speed=speed||20;   var lineHeight = lineHeight||20;   var tid = null, pause = false;   var liLength = slideBox.getElementsByTagName('li').length;   var lack = numpergroup-liLength%numpergroup;   for(i=0;i<lack;i++){   slideBox.appendChild(document.createElement("li"));   }   var start = function() {     tid=setInterval(slide, speed);   }   var slide = function() {     if (pause) return;     slideBox.scrollTop += 2;     if ( slideBox.scrollTop % lineHeight == 0 ) {      clearInterval(tid);      for(i=0;i<numpergroup;i++){       slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);      }      slideBox.scrollTop = 0;      setTimeout(start, delay);     }   }   slideBox.onmouseover=function(){pause=true;}   slideBox.onmouseout=function(){pause=false;}   setTimeout(start, delay);  }  四个参数分别是:操作对象, 停留时间,相对速度(越小越快),每次滚动多少(最好和Li的Line-height一致)。

 

  • 292c3b99-53c3-399d-9ae2-a324c52f83a1-thumb
  • 大小: 7.4 KB
  • 3132255c-86b2-37ec-9802-91a28b884dc8-thumb
  • 大小: 8.7 KB
  • F970cb0b-ae8a-3ebe-87de-bbe44812ec74-thumb
  • 大小: 8.6 KB
  • Ded4d21f-6999-39af-89b2-eb34d0a50ea6-thumb
  • 大小: 167.5 KB
  • D08b97ca-b025-30f3-b690-05551da0513d-thumb
  • 大小: 18.9 KB
声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。

  评论这张
 
阅读(1444)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017