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. Java interview Advanced

    1. Can you override private or static method in Java ? Read more: http://java67.blogspot.com/2012/09 ...

  2. 第一次正式小用Redis存储

    由于要做一个同一个页面上多种图表数据的下载,考虑到Azure上面的session很不稳定(可用Redis provider存储session,较稳定),故决定改为Azure支持的Redis,顺便也学习 ...

  3. linux 无法解压过大文件解决

    [root@vmbbak yum]# unzip RHEL_5.7\ x86_64\ DVD-1.zip error: Zip file too big (greater than 429495910 ...

  4. Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

    我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如L ...

  5. NGUI 使用UITable(或UIGrid)注意事项

    在ScrollView显示区域中,若Item数量不足以超出显示区域,有可能不是贴着ScrollView最边缘位置显示!这个时候可以按如下方法调整: 因为实际情况中,往ScrollView中添加Item ...

  6. 选择合适的String拼接方法(这篇博客是我抄的)

    package com.test; public class FreeFile { public static void main(String[] args) { // 加号拼接 String st ...

  7. STREAMS流机制

    STREAMS流机制 基本概念 STREAMS(流)是系统V提供的构造内核设备驱动程序和网络协议包的一种通用方法,对STREAMS进行讨论的目的是为了理解系统V的终端接口,I/O多路转接中poll(轮 ...

  8. Lua.LearningLua.5-document-for-luaL_findtable-function

    Learning Lua: 5 - Document for luaL_findtable() function 文档中没有找到luaL_findtable()函数的说明,这里尝试补充. LUALIB ...

  9. NC WebService接口开发流程

    一.定义类: 接口类 包定义在public下,接口类名为I开头,Service结尾 实现类 包定义在private下,实现类名以ServiceImpl结尾 VO类 若有VO类,也放在public下 U ...

  10. css 常用样式

    1. border-radius - 指定每个圆角 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值 ...