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. Diagramming for WinForms 的安装和配置

    Diagramming for WinForms 是MindFusion公司推出的商业版通用流程图控件. 运行环境: WIN7 + .Net4.0 + Visual2010 试用版控件下载地址:htt ...

  2. 【微博SDK调用逻辑】微博SDK的调用逻辑,最好自己还是写一个例子,试一下!!!

    逻辑是这样的,谢谢给我讲东西的开发哥哥,嘻嘻~~~  1.点击微博登录,SDK会打开微博客户端,然后点击登陆(如果已经登录了会出现一个当前app跟微博交互的图片界面,然后提示“正在获取授权信息”,如果 ...

  3. Azure DW

    1. 安装环境a. 安装环境https://www.microsoft.com/web/downloads/platform.aspx b. InputImport-Module 'C:\Progra ...

  4. Ajax2

    一.完整版Ajax $.ajax({ url: "Ashxs/Login.ashx", data: { "name": name, "pwd" ...

  5. Selenium2+python自动化3-解决pip使用异常

    一.pip出现异常 有一小部分童鞋在打开cmd输入pip后出现下面情况:Did not provide a commandDid not provide a command?这是什么鬼?正常情况应该是 ...

  6. Nginx 获取真实 IP 方案

    问题根源: 基于七层的负载均衡系统,获取IP的原理都是通过XRI和XFF进行处理,从中选出“正常情况下”的源头IP,然而这两个Header都是普通的HTTP头,任何代理程序都可以轻易修改伪造它们,使得 ...

  7. IOS AFNetworking配置进IOS

    Prefix Header 中填入绝对路径 //PCH 里面加入这个写代码 #ifndef TARGET_OS_IOS #pragma mark ---------- for AFNetwork st ...

  8. hdu 1086 You can Solve a Geometry Problem too

    You can Solve a Geometry Problem too Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3 ...

  9. Jetty入门

    Jetty的入门 一.开发环境 Eclipse  4.3.1 Maven  3.1 Jetty  9.0.6.v20130930 Jetty的下载地址: http://download.eclipse ...

  10. SP_APPROVALSET_OVERTIME 插入單據

    CREATE OR REPLACE PROCEDURE SP_APPROVALSET_OVERTIME(VAPPLY_NO varchar2,VAPPLYKIND_NO varchar2,VFAC_N ...