atitit.自适应设计悬浮图片的大小and 位置
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 位置的更多相关文章
- css3-11 如何改变背景图片的大小和位置
css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...
- background-size (设置背景图片的大小)
设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...
- 图片添加border 不占用图片的大小
因为设计稿中的分割线大多分为两种情况:1.在图片右侧:2.在图片右侧+下方. 那么使用伪类before和after以及绝对定位很容易在不改变原布局的情况使图片按照设计稿输出和保留分割线. 例div.i ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- 限制Xamarin获取图片的大小
限制Xamarin获取图片的大小在App开发中,经常会使用网络图片.因为这样不仅可以减少App的大小,还可以动态更新图片.但是手机使用网络环境千差万别.当网络环境不是理想的情况下,加载网络图片就是一个 ...
- Atitit. Api 设计 原则 ---归一化
Atitit. Api 设计 原则 ---归一化 1.1. 叫做归一化1 1.2. 归一化的实例:一切对象都可以序列化/toString 通过接口实现1 1.3. 泛文件概念.2 1.4. 游戏行业 ...
- Atitit.架构设计趋势 设计模式 ---微服务架构 soa
Atitit.架构设计趋势 设计模式 ---微服务架构 soa 什么是微服务架构?1 .微服务与SOA的关系 :微服务架架构师面向服务架构(SOA)的一种特定实现1 微服务与康威定律2 微服务的一些 ...
- IOS中修改图片的大小:修改分辨率和裁剪
在IOS开发中,经常有限制图片文件大小的,有的用户图片很大,导致上传时间慢,造成问题. 如:微信分享中,如果图片的大小好像大于50kbytes,就分享失败,而且没有任何提示. 所以,我添加了两个函数: ...
- atitit.api设计 方法 指南 手册 v2 q929.docx
atitit.api设计 方法 指南 手册 v2 q929.docx atitit.api设计原则与方法 1. 归一化(锤子钉子理论)1 1.1. 链式方法2 1.2. 规则5:建立返回值类型2 1. ...
随机推荐
- 手把手教你用axis1.4搭建webservice(转)
1.先下载axis jar包:axis-bin-1_4.zip.下载地址: http://ws.Apache.org/axis/. 当然这个包其实是不全面的,像activation.jar之类的,完全 ...
- Linux档案与目彔的基本操作(查看与权限)
此文包含的命令: cd.pwd.mkdir.rmdir.rm.ls.cp.mv.cat.tac.more.less.head.tail.od.touch.umask.chattr.lsattr.fil ...
- Selenium2+python自动化17-JS处理滚动条
前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...
- XML文件操作(C#)
XML应用于Web开发的许多方面,常用于简化数据的存储和共享,它的设计宗旨是传输数据,而非显示数据.下面简单介绍一下C#是如何对XML文件进行读取的. 1.首先,建立XML对象并关联XML文件 str ...
- Scanf函数输入字符串
Scanf函数输入字符串 #define _CRT_SECURE_NO_WARNINGS //#pragma warning(disable:4996) #include <stdio.h> ...
- windows 硬盘格式不一样的文件移动 导致拒绝访问 权限丢失 0字节解决办法
解决此问题,必须关闭“简单文件共享”,然后获取文件夹的所有权: 1. 关闭“简单文件共享”: a. 单击“开始”,然后单击“我的电脑”. b. 在“工具”菜单上,单击“文件夹选项”,然后单击“查看”选 ...
- cocos2d-x 之 内存管理(5)
上一篇文件讲到了CCObject中实现的内存自动管理内存 下面介绍两个很重要的类,一个是内存池类 CCAutoReleasePool ,另一个类是内存池管理类 CCPoolManager 这两个类结合 ...
- c# (nop中)下拉列表(有外键)
第一种情况.view视图加载出来时就有值,实现步骤如下 1.在操作的界面Model中建立public List<SelectListItem> xxx(取名){ get; set; } 2 ...
- php使用openssl来实现RSA(非对称加密)
使用非对称加密主要是借助openssl的公钥和私钥,用公钥加密私钥解密,或者私钥加密公钥解密. 1.安装openssl和PHP的openssl扩展 2.生成私钥:openssl genrsa 用于生成 ...
- Java中this与super的区别【6】
若有不正之处,请多多谅解并欢迎批评指正,不甚感激.请尊重作者劳动成果: 本文原创作者:pipi-changing本文原创出处:http://www.cnblogs.com/pipi-changing/ ...