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中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
随机推荐
- metasploit nessus & db_autopwn
nessus官网:https://www.tenable.com/products/nessus-vulnerability-scanner 下载地址:https://www.tenable.com/ ...
- PAT乙级1004. 成绩排名 (20)
读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生的姓名 学号 成绩 第3行:第2个学生 ...
- iOS UIBezierPath类 介绍
使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和 ...
- （ASP.NET ）去除字符串中的HTML标签
string strDoContent = "执行增加<a href="/AdminCX/Admin_CompanyDetail.aspx?CompanyGuid=cd8e1 ...
- 【实验室笔记】C#的Socket客户端接收和发送数据
采用socket发送和接收数据的实验中,服务器采用的是网络助手作为模拟服务器端. 客户端程序流程: 应用的命名空间: using System.Net; using System.Net.Socket ...
- JS算法与数据结构之八皇后(晕晕)
算法核心思想 回溯算法 递归实现 程序实现 坐标系 循环递归 回溯 计数 收集位置 特效添加 <!DOCTYPE HTML> <html> <head> <m ...
- c# 索引器方法
索引器方法允许我们构建能够以类似访问数组的语法来访问内部子类型的自定义类型 在语法上索引器方法和属性的定义很类似,一样是使用get,set,不同的是索引器是使用this[]创建的. 一个简单的索引器代 ...
- Boolean对象 识记
Boolean 对象表示两个值:"true" 或 "false". 1.创建 new Boolean(value); //构造函数 返回 对象+返回值 Bool ...
- js检测文章敏感词
在一些博客或者论坛中,文章中的敏感词需要显示出来和高亮显示起到提示用户的作用.这个功能实现的方法有很多,下面是js的实现方式. //将文章中匹配到的敏感词罗列出来 <span style=&qu ...
- sql 针对多个id或名称的分割和组合
开发中经常遇到把多个id拼接在一起符号隔开传入数据库,那拆分呢就是个大事 SELECT nPushID INTO #temp FROM Table1 ), nCoulmn) SELECT * FROM ...