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. 学习笔记008之Task

    栈 为后进先出 如何实现一个弹出窗体.

  2. SQL性能优化(Oracle)

    首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条记录, ...

  3. c++ 递归斐波那契算法及时间复杂度

    #include<iostream> int fib(int n){ ) return n; else ) + fib(n-); } int main(){ ;i<;i++){ st ...

  4. Unity3D手游开发日记(8) - 运动残影效果

    2D游戏的残影很简单,美术做序列帧图片就行了,那么3D游戏的残影美术做不了,得靠程序员动态创建模型来处理. 实现原理也很简单: 1.间隔一定时间创建一个残影模型 GameObject go = Gam ...

  5. as 和 is 区别

    as 将对象转换某类型,如果失败则返回null.is用来判断对象是否为某个类型,在判断过程中会对对象进行两次转换,而as只有一次转换,故as效率高.

  6. RecycleView在eclipse的初体验

    在sdk中找到v7包 \sdk\extras\android\support\v7\recyclerview 导入工程 Import\Android\Existing Android Code Int ...

  7. 由struts错误使用引发的漏洞,使用参数作为返回的文件路径或文件名,作为返回result 值

    该错误可以导致他人任意访问该路径下的任何文件. struts 文件 <?xml version="1.0" encoding="UTF-8" ?> ...

  8. listView获取item的Edit内容,listView中的edit内容在滚动时自动赋值了前面的内容

    Today I am going to explain how to create a ListView with EditText and why will we need a TextWatche ...

  9. Java—继承、封装、抽象、多态

    类.对象和包 1) 面向对象编程(Object Oriented Programming ,简称 OOP):20世纪70年代以后开始流行. 2) 结构化编程与面向对象编程的区别: A. 在结构化编程中 ...

  10. iOS删除本地文件

    以前在博客里记录的东西都是截屏,没有插入代码,今天进去一看,图片都不显示了,只好重新插入代码,发现以前写的文件操作这块,没有写本地文件删除这个功能,重新再记录一下 //需要删除文件的物理地址 NSSt ...