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. step6----->往工程中添加spring boot项目------->修改pom.xml使得我的project是基于spring boot的,而非直接基于spring framework

    文章内容概述: spring项目组其实有多个projects,如spring IO platform用于管理external dependencies的版本,通过定义BOM(bill of mater ...

  2. 调用xml文件的bean

    AcTest.class package com.zyz.db; import com.zyz.dao.PersonDao; import org.springframework.context.Ap ...

  3. Selenium2+python自动化13-多窗口、句柄(handle)

    前言 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 本篇以打开百 ...

  4. JS 菜单栏一直悬浮在顶部代码

    只需要把下面代码放到js中: $(function(){                //获取要定位元素距离浏览器顶部的距离         var navH = $(".menu&quo ...

  5. 理解AOP

    http://www.cnblogs.com/yanbincn/archive/2012/06/01/2530377.html Aspect Oriented Programming  面向切面编程. ...

  6. Spring IOC容器中注入bean

    一.基于schema格式的注入 1.基本的注入方式 (属性注入方式) 根据setXxx()方法进行依赖注入,Spring只会检查是否有setter方法,是否有对应的属性不做要求 <bean id ...

  7. mORMot使用基础

    mORMot 名称来自Marmot,对,土拨鼠,俗称旱獭,是一种生活在高寒山区的动物.多数都在白天活动,喜群居,善掘土,所挖地道深达数米,内有铺草的居室,非常舒适.通常洞穴都会有两个以上的入口,以策安 ...

  8. ListView中的item的按照和item点击事件并存

    整个xml文件的根元素如LinearLayout中添加属性android:descendantFocusability="blocksDescendants"

  9. Apache配置多域名 AH00548: NameVirtualHost has no effect and will be removed in the next release

    httpd-vhosts.conf 中首行 NameVirtualHost *:80 删除掉即可解决.

  10. networkx的绘图中文显示方块问题

    修改matplotlibrc文件 font.family : sans-serif #打开该选项 font.sans-serif : Microsoft YaHei , Bitstream Vera ...