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中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
随机推荐
- USACO 3.3 TEXT Eulerian Tour中的Cows on Parade一点理解
Cows on Parade Farmer John has two types of cows: black Angus and white Jerseys. While marching 19 o ...
- Spring Security（14）——权限鉴定基础
目录 1.1 Spring Security的AOP Advice思想 1.2 AbstractSecurityInterceptor 1.2.1 ConfigAttribute ...
- 导入导出Excel的Java工具类ExcelUtil
在编写ExcelUtil之前,在网上查了一些资料.java中用来处理Excel的第三方开源项目主要就是POI和JXL.poi功能强大,但是比较耗资源,对于大数据量的导入导出性能不是太好:jxl功能简单 ...
- lnmp一键安装包配置laravel项目
laravel一键安装包:https://lnmp.org/install.html 在server中加入 location / { try_files $uri $uri/ /index.php?$ ...
- javascript 私有方法的实现
原文地址: http://frugalcoder.us/post/2010/02/11/js-classes.aspx Classy JavaScript - Best Practices 11. F ...
- 微信超时5s，调用客服接口异步回复消息（PHP）
当用户触发事件,如果不能保证在5s内响应,可以先返回success,然后异步调用返回的信息.代码如下: // 立即返回(异步执行) ignore_user_abort(true);//start=== ...
- CSS3入门
CSS3 w3cschools css3 MDN英文 MDN中文 CSS3 is the latest evolution of the Cascading Style Sheets langua ...
- FileZilla客户端源码解析
FileZilla客户端源码解析 FTP是TCP/IP协议组的协议,有指令通路和数据通路两条通道.一般来说,FTP标准命令TCP端口号是21,Port方式数据传输端口是20. FileZilla作为p ...
- linux 安装mysql数据库
Ubuntu上安装MySQL非常简单,只需要打开终端,几条命令就可以完成. 1. sudo apt-get install mysql-server 2. apt-get isntall mysql- ...
- AMD规范
common.js主要语法就是 var math=require('math'); math.add(2,3); require()用于加载模块就行了. 二行math.add(2, 3),在第一行re ...