Bug(案例)图片的垂直出现隐藏
这个案例是一个出Bug的案例,很抱歉本人没有找到bug在哪,但是功能却实现了.
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} body {
background: #A9A9A9;
} #div {
width: 360px;
height: 90px;
background: #F0FFFF;
margin: 50px auto 0;
border: 1px solid #F5F5DC;
} #div a {
display: inline-block;
width: 50px;
height: 50px;
margin: 20px;
float: left;
background: #FFF8DC;
text-align: center;
opacity: 1;
color: #9c9c9c;
filter: alpha(opacity=30);
position: relative;
overflow: hidden;
/*200 40*4=160*/
/*50+40*/
} #div a i {
position: absolute;
top: 0;
left: 10px;
display: inline-block;
text-align: center;
opacity: 1;
filter: alpha(opacity=30);
} #div a p {
position: absolute;
top: 35px;
left: 12px;
}
</style>
<script src="changfunction.js"></script>
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//aLi为当前图片的集合
var aLi = $("div").getElementsByTagName("a"); for (var i = 0; i < aLi.length; i++) {
//当鼠标进入图片所在的标签触发事件
aLi[i].onmouseenter = function() {
//给每个a标签里面的i标签设为数组，并确定第一个为0
var imgThis = this.getElementsByTagName("i")[0];
//调用js隐藏图片
changeBtn(imgThis, {
top: -30,
opacity: 0
}, function() {
//当图片隐藏的时候设置图片的top值移动至下方
imgThis.style.top = 30 + 'px';
//console.log(top);
//重新调用js显示图片
changeBtn(imgThis, {
top: 0,
opacity: 100
});
});
}
} }
</script>
</head> <body>
<div id="div">
<a><i><img src="img/one.png" alt=""></i><p>一号</p></a>
<a><i><img src="img/two.png" alt=""></i><p>二号</p></a>
<a><i><img src="img/three.png" alt=""></i><p>三号</p></a>
<a><i><img src="img/three.png" alt=""></i><p>四号</p></a> </div>
</body> </html>
下面为引用的changefunction函数
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
//obj为当前的鼠标所指向的标签
//stChg为对应的变量样式
//chgWid为需要改变的值
//changeBtn(obj,{stChg1:chgWid1,stChg2:chgWid2},tog)
function changeBtn(obj, json, fn) {
//定义一个值，设定为真
var flag = true;
clearInterval(obj.timer);
obj.timer = setInterval(function() {
for (var stChg in json) {
//chg这个变量本来为长度，宽度，或者透明度什么的
//但是现在通过一个getStyle()函数来获取
var chg = 0;
//进入函数，需要先判定是否透明度样式
if (stChg == 'opacity') {
//为真，则执行parseFloat()此方法返回的是浮点数
chg = Math.round(parseFloat(getStyle(obj, stChg)) * 100);
} else {
//为假，则执行parseInt()此方法返回的是整数
chg = parseInt(getStyle(obj, stChg));
}
//判定初始值(chg)是否小于输入值(chgWid)
//speed = (json[stChg] - chg) / 10;
//speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (json[stChg] > chg) {
speed = 10;
} else {
speed = -10;
}
//console.log(speed);
if (chg == json[stChg]) {
//当有一个参数没有达到时候，flag就不会为真，往下继续执行自增自减
clearInterval(obj.timer);
} else {
//不等，则先进性判定样式是否为特殊样式opacity
if (stChg == 'opacity') {
//为真，对应其他浏览器，则执行(chg+speed)=当前样式的值+speed
//比如开始是(30+10),那么下一次就为(40+10)
obj.style.opacity = (chg + speed) / 100;
//为真，对应的ie浏览器，方法同上
obj.style.filter = 'alpha(opacity: ' + (chg + speed) + ')';
} else {
//为假则为普通样式取值，stChg为width时style[width]=style.width
obj.style[stChg] = chg + speed + 'px';
}
}
}
//当为真时，即所有参数都已经达到，则清楚定时器
/*if (flag) {
clearInterval(obj.timer);
//判断是否有回调函数
if (fn) {
fn();
}
}*/
}, 30);
}
//这个函数返回的是一个值，例如attr传参为width
//为真时obj.currentStyle[attr]=200
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
找出Bug所在欢迎联系我,不胜感谢
Bug(案例)图片的垂直出现隐藏的更多相关文章
- 如何让图片在垂直方向与 div的底部对齐 水平居中
需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...
- python 对图片做垂直投影
Python 对图片做垂直投影 本文利用opencv对图片进行垂直投影,做出垂直投影图,大体思路:打开图片,灰度化,二值化,按列进行统计,新建一个大小和原图一样的图片,按列进行填充: cv2.cv.G ...
- 用CSS3写的小案例-图片缩放隐藏内容显示
思路分析 (1).搭建界面 (2).鼠标移到图片的时候,放大显示 (3).鼠标移入到当前的li标签里面找到后面的div让其显示出来 <!DOCTYPE html> <html lan ...
- img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。
<a><img/></a> 这种结构有时候在界面预览的时候会出现一段多出来的高度.这个高度,一开始我很奇怪是什么原因产生的.鼠标移动到a标签上会有高度出现,一开始我 ...
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- oracle TBL$OR$IDX$PART$NUM BUG案例处理过程
通过AWR报告发现数据库cpu告警的问题,定位产生问题的sql语句 首先查看SQL的执行计划 ) FROM cmds.psn_cntr_holder a ,cmds.pol_attrib c ,cmd ...
- 一个bug案例分析
Bug描述: 某大型系统的一个提供基础数据服务的子系统A进行了一次升级.升级的内容为:优化了失败重传功能,在优化的同时,开发人员发现传输数据的时间戳精度只是精确到了秒,于是顺手把精度改成了1/100秒 ...
- JQuery - 垂直显示隐藏DIV
效果: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
- js中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
随机推荐
- SIGPIPE信号
#include <sys/types.h> #include <sys/socket.h> #include <netinet/in.h> #include &l ...
- 前端知识点-CSS相关知识点
1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(b ...
- Java 序列化 JDK序列化总结
Java 序列化 JDK序列化总结 @author ixenos Java序列化是在JDK 1.1中引入的,是Java内核的重要特性之一.Java序列化API允许我们将一个对象转换为流,并通过网络发送 ...
- SNMP概述–运维必知的协议基础
一.什么是SNMP? SNMP是 “Simple Network Management Protocol” 的缩写,中文意思是简单网络管理协议,它是由互联网工作小组在RFC1157中定义的应用层 ...
- linux挂载新硬盘
Linux添加新硬盘自动挂载硬盘的具体步骤 1.插入新硬盘,启动Linux服务器,使用fdisk -l 查看硬盘 #fdisk -l Disk /dev/sdb: 1000.2 GB, 1000204 ...
- eclipse 启动tomcat后 页面无法访问tomcat首页
在eclipse中新建tomcat7,完成后tomcat能够正常启动,但是浏览器问题localhost:8080访问不了. 解决方法如下: 双击eclipse中服务器中的tomcat 出现tomcat ...
- ****The Toy of Flandre Scarlet
The Toy of Flandre Scarlet Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%lld & ...
- [WPF] 为Style 里的button添加鼠标点击响应事件
一个TabControl, 用的是PagedTabControl style, 在style中有个button, button在style里已经写了click事件,但是现在还需要加上一段功能,就是在响 ...
- 1张图看懂RAID功能，6张图教会配置服务器【转】
RAID 包含一组或者一个集合甚至一个阵列.使用一组磁盘结合驱动器组成 RAID 阵列或 RAID 集.将至少两个磁盘连接到一个 RAID 控制器,而成为一个逻辑卷,也可以将多个驱动器放在一个组中.一 ...
- Javascript 数字保留2位小数
整理使用Javascript函数将数值保留两位小数: 1.num.toFixed(2) //进位 2.(Math.round(num * 100) / 100).toFixed(2) //进位 3.( ...