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中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
随机推荐
- C# 实现客户端程序自动更新
看到一篇不错的帖子,可能以后会用到,果断收藏 文章来源 博客园jenry(云飞扬)http://www.cnblogs.com/jenry/archive/2006/08/15/477302.html ...
- spring使用jdbcTemplate和jdbcdaosupport和namedparameter
jdbcTemplate: 首先连接数据库 <!-- 导入外部文件 --> <context:property-placeholder location="classpat ...
- 前端用Request Payload方式请求后台
后台接收方式: InputStream inputStream = request.getInputStream(); byte[] buff = new byte[1024]; int len = ...
- python 学习 ［day8］class成员
一.类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对 ...
- 用SqlBulkCopy批量插入数据到SqlServer数据库表中
首先创建一个数据库连接类:SQLHelper using System; using System.Collections.Generic; using System.Linq; using Syst ...
- win10十周年更新后cent os 虚拟机无法连接到xshell
1.在vmware中打开编辑-->虚拟网络编辑器-->还原默认设置
- PHP操作Memcache基本函数
Memcache模块提供了于Memcached方便的面向过程及面向对象的接口,Memcached是为了降低动态web应用从数据库加载数据而产生的一种常驻进程缓存产品.Memcache模块同时提供了一个 ...
- boolean attribute(布尔值属性) attribute vs property
boolean attribute(布尔值属性) boolean attribute HTML - Why boolean attributes do not have boolean val ...
- Angular之Providers (Value, Factory, Service and Constant )
官方文档Providers Each web application you build is composed of objects that collaborate to get stuff do ...
- Android:自定义Dialog大小,显示圆角
经过测试,可以使用. ----------------------------------------------------------- AlertDialog.Builder builder = ...