用 js 写了页面的调整js代码

例如:在一个页面中要想底部对齐的。本人对"div"的控制

比如:在一个div中用title还有描述"description"两部分,如果标题站得像素大了,显而易见描述部分就小了所以要写一个js 来控制。

下面是一个页面(在HMY项目中一个页面)我来总结一下

<script type="text/javascript">


    $(function(){
        $.post('getLoadDetroitCompanyItems.action',function(jsonObj) {        
            var items = jsonObj.ITEMS;
            for (var i=0; i < items.length; i ++) {
              var tmpul='';
                if ((i+1)%2!=0) {
                    tmpul="<li  class='li_left_style'>";
                } else if((i+1)%2==0){
                    
                 tmpul="<li  class='li_right_style'>";
                }
                if (items[i].imageURL == null || items[i].imageURL =='') {
                    
                    tmpul+= "<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' height='138px;' src='././images/profile_no_logo.gif'/></a></div>";
                } else {
            
                    tmpul+="<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' src='"+items[i].imageURL+"'/></a></div>";
                }

                  tmpul+=       " <div class ='li_left_div'>"+

                            //       这个蓝色的字体原来是<span class='spand_content_style1' id='"+i+"'>为了区别加了一个titleclass='title spand_content_style1'这样就唯一了
                                " <div class='title_wrap'><span class='title spand_content_style1' name='"+i+"'><a href='viewCompanyProfile.action?orgId="+items[i].url+" 'target='_blank'>"+items[i].title+"</a></span>"+
                                " <a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><span class='spand_content_style' >[ "+items[i].jobPositionCount+" Job Openings]</span></a></div>"+
                                " <div class='hr'><hr /></div>"+
                                " <div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"+
                                " </div>"+
                                " </li>";
                $("#portfolio_comp_hring").append(tmpul);                
            }
            resizeCompanyHeight();
        } );
    });
    
    
    function resizeCompanyHeight(){
        setTimeout(function(){

// 这是  <ul id="portfolio_comp_hring"> ul 的id  为“portfolio_comp_hring”。这个是 title<span ></span > 的id
            $("#portfolio_comp_hring .title").each(
                function(){

// 这个获取整个第一个<span>
                    var div = $(this);

// 获得name值,这个是name名称。也可以用id='"+i+"' 那就改 var currentId = div.attr("id");

//通过attr("name") 可以获得name 的值
                    var currentId = div.attr("name");

//   var currentId = div.attr("id");就是获取自增”i “的值

//关键的这个显示的<span></span>和<div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"是同一个

//因为我上面通过ajax 循环获取的值要通过id 或者class 判断唯一性
                    var forResizeCompanyId = "company_content_"+currentId;
                    resizeSpan(true, 24, div, forResizeCompanyId);                    
                }
             )
        },200);    
    }    
    
</script>
         <div style="height:550px;">

            <div style="height:514px;">    
                
                <ul id="portfolio_comp_hring">

                </ul>
                    
            </div>
            
    </div>

===========================================================================

function resizeSpan(isHeight, maxHeight, span,forResizeId) {
    setTimeout(function(){
        if (isHeight == null) {
            isHeight = true;
        }
        var divHeight =$("#"+forResizeId).height();

//为true;判断
        if (isHeight) {
            var spanhg = '';
            var span_height=span.height();
            if (span.height() > maxHeight) {

                newheight = span.height();
                spanhg= newheight-maxHeight;

                var tpheight='';
                if (spanhg < divHeight) {
                    tpheight = divHeight-spanhg;
                }else{
                    tpheight = 0;
                }
                $("#"+forResizeId).height(tpheight);
            }
        }else{
            alert("not implemented...");
        }
    },0);    
}

=================================8888888888888888888

//下面的js 是判断图片的大小来调整显示图片

function resizeImg(isHeight, maxLength, img) {
// 加载延长   setTimeout(function(){
        if (isHeight == null) {
            isHeight = true;
        }
        if (isHeight) {
            if (img.height() > maxLength) {
                // calculate new image dimensions
                newHeight = maxLength;
                newWidth = img.width() / (img.height() / maxLength);
                // set new image dimensions
                img.height(newHeight).width(newWidth);
            } else {
                // center the img
                if (img.height() > 1) {
                    img.css("margin-top", (maxLength - img.height()) / 2);
                    img.css("margin-bottom", (maxLength - img.height()) / 2);
                }
            }
        } else {
            if (img.width() > maxLength) {
                // calculate new image dimensions
                newWidth = maxLength;
                newHeight = img.height() / (img.width() / maxLength);
                // set new image dimensions
                img.height(newHeight).width(newWidth);
            }
        }
    },1000);    
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值