atitit.自适应设计悬浮图片的大小and 位置



#--------最好使用relate定位..



中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:-15 负值,,



#--------悬浮位置top的问题,因为相对高度..

子能使用js解决,计算top负值..



function iniBonusPicPostion() {

    var mainmainxTop = $("#mainmainx").position().top;

    var mainxHeight = $("#mainmainx").height();

    var hamyarHit = 0.16 * mainxHeight;

    logx("--mainmainxTop n hit:" + mainmainxTop + "--" + mainxHeight);



 ///hamyarHit 走十 relateion时候儿的负值..

 //bonusPicTop 是绝对定位时候儿的top



    var bonusPicTop = mainmainxTop + mainxHeight - hamyarHit;

    logx("--bonusPicTop:" + bonusPicTop);

    $("#bonuspic").css("top", bonusPicTop);



}



作者 老哇的爪子 Attilax 艾龙,  EMAIL:1466519819@qq.com

转载请注明来源: http://blog.csdn.net/attilax





#-----使用绝对定位麻烦的多多...



a.遮罩左边文本的问题??



使用right:5% 解决,,不要使用left 55%的方式..jei个不太ok有时..



b.遮罩哈面儿文本的问题.



子能使用js 调整自动高度..自动缩写高度...



function iniBonusPicPositionNhit() {

    //ini bonus pic height if too lower

    var bonusPicTop = $("#bonuspic").position().top;

    var bnsPicBtm = bonusPicTop + $("#bonuspic").height();

    var btnDivO5_top = $("#btnDivO5").position().top;

    if (bnsPicBtm <= $("#btnDivO5").position().top) {

        logx("--bnsPicBtm no excel btm boder");

        return;

    }

    var excelHit = bnsPicBtm - btnDivO5_top;

    

    $("#bonuspic").height(btnDivO5_top - $("#bonuspic").position().top-2);

    //if ($("#topDivO5").height() - 5 >= excelHit) {

//

//        logx("--topDivO5 hit >> excelHit");

//        var topDivO5_hit = $("#topDivO5").height();

//        $("#topDivO5").height(topDivO5_hit - excelHit - 8);

//        iniBonusPicPostion();

//        return;

//    }

//    $("#topDivO5").height(5);

//    iniBonusPicPostion();

    



}

atitit.自适应设计悬浮图片的大小and 位置的更多相关文章

  1. css3-11 如何改变背景图片的大小和位置

    css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...

  2. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  3. 图片添加border 不占用图片的大小

    因为设计稿中的分割线大多分为两种情况:1.在图片右侧:2.在图片右侧+下方. 那么使用伪类before和after以及绝对定位很容易在不改变原布局的情况使图片按照设计稿输出和保留分割线. 例div.i ...

  4. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  5. 限制Xamarin获取图片的大小

    限制Xamarin获取图片的大小在App开发中,经常会使用网络图片.因为这样不仅可以减少App的大小,还可以动态更新图片.但是手机使用网络环境千差万别.当网络环境不是理想的情况下,加载网络图片就是一个 ...

  6. Atitit. Api 设计 原则 ---归一化

    Atitit. Api 设计 原则 ---归一化 1.1. 叫做归一化1 1.2. 归一化的实例:一切对象都可以序列化/toString  通过接口实现1 1.3. 泛文件概念.2 1.4. 游戏行业 ...

  7. Atitit.架构设计趋势 设计模式 ---微服务架构  soa

    Atitit.架构设计趋势 设计模式 ---微服务架构  soa 什么是微服务架构?1 .微服务与SOA的关系 :微服务架架构师面向服务架构(SOA)的一种特定实现1 微服务与康威定律2 微服务的一些 ...

  8. IOS中修改图片的大小:修改分辨率和裁剪

    在IOS开发中,经常有限制图片文件大小的,有的用户图片很大,导致上传时间慢,造成问题. 如:微信分享中,如果图片的大小好像大于50kbytes,就分享失败,而且没有任何提示. 所以,我添加了两个函数: ...

  9. atitit.api设计 方法 指南 手册 v2 q929.docx

    atitit.api设计 方法 指南 手册 v2 q929.docx atitit.api设计原则与方法 1. 归一化(锤子钉子理论)1 1.1. 链式方法2 1.2. 规则5:建立返回值类型2 1. ...

随机推荐

  1. php 处理别人直接丢过来的json字符串

    如果 json校验成功  出现莫名其妙的不能decode 就看下转义 最好是直接使用php定界符eof来赋值字符串

  2. bzoj 2152聪聪可可

    2152: 聪聪可可 Time Limit: 3 Sec  Memory Limit: 259 MB Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰 ...

  3. Prim算法和Kruskal算法(图论中的最小生成树算法)

    最小生成树在一个图中可以有多个,但是如果一个图中边的权值互不相同的话,那么最小生成树只可能存在一个,用反证法很容易就证明出来了. 当然最小生成树也是一个图中包含所有节点的权值和最低的子图. 在一个图中 ...

  4. php 下载图片 文件

    $file = dirname(dirname(__FILE__)) . $_GET['download']; //获取图片的绝对路径 header("Content-type: octet ...

  5. Python全栈之路6--正则表达式

    正则本身就是一门语言: 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串,在文本处理方面功能非常强大,也经常用作爬虫,来爬取特定内容,Python本身不支持正则,但是通过导入re模块 ...

  6. H5-杂七杂八的标签

    1.overflow:设置当内容超出父级的宽高尺寸设置时的处理方式 a.hidden:隐藏超出部分的内容 b.auto:如果内容没有超出,就正常显示,如果超出,就隐藏内容并提供滚动条,可以滚动显示超出 ...

  7. [Python] 关于64位机的numpy安装问题

    最近刚换成64位的系统,重新安装了win10,VS也从原来的2010变为了现在的2013. 利用原来32位电脑硬盘里的python2.7安装包安装,然后打算安装numpy. 上来碰到问题:在windo ...

  8. lock模拟CountDownEvent

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. VB6.0 调用存储过程

    最近有在做一个需求,需要在VB6.0中调用存储过程,整理了一下,供大家参考, 范例: Function callStoredProcedure(sEmployeeID As String, Optio ...

  10. EditText 焦点

    让EditText不自动获取焦点,只需要在EditText的父控件加上 android:focusable="true"android:focusableInTouchMode=& ...