JS for循环有关变量类型的问题/魔兽世界样式的tooltip

93 阅读 0 评论 62 点赞

我是靠谱客的博主阔达胡萝卜，最近开发中收集的这篇文章主要介绍JS for循环有关变量类型的问题/魔兽世界样式的tooltip，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<script>
var num = 100;
for (var i=num-5;i<num+5;i++){
// console.log(typeof(i));
console.log("i");
}
</script>

这段代码控制台会输出10次i;

<script>
var num = "100";
for (var i=num-5;i<num+5;i++){
// console.log(typeof(i));
console.log("i");
}
</script>

因为"100" - 5是95，而"100" + 5是1005

这段代码会输出几百次i;是为什么？？区别仅仅是赋值给变量num的是字符串或数字

text-shadow的立体效果，opacity透明；

Jade,Ejs,Handlebars三种模板的对比；

Modernizr,Html5,Css3特性检测库

参考的代码

CSS部分：图标的出现，样式等

.wow-item {
position: absolute;
color: white;
background-color: rgba(10, 0, 5, 0.8);
font-family: "friz", serif;
font-size: 12px;
font-weight: normal;
padding: 0.5em 0.6em;
text-shadow: 0 1px 0 black;
box-shadow: -1px -1px 1px rgba(10, 0, 5, 0.5), -1px 1px 1px rgba(10, 0, 5, 0.5), 1px 1px 1px rgba(10, 0, 5, 0.5), 1px -1px 1px rgba(10, 0, 5, 0.5);
max-width: 24em;
-webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
-o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s;
}
.wow-item.hidden {
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
-webkit-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
-o-transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
transition: opacity 0.05s ease-out 0.05s, transform 0.1s ease-out 0.05s, visibility 0.01s linear 0.15s;
}
.wow-icon, .wow-item {
border-style: solid;
border-width: 5px;
border-image: url(../img/wow-tooltip-border-2.png) 5 repeat;
border-radius: 4px;
}

$wowIcons.on('mouseover.wow', function (e) {
var $this = $(this);
var $html;
if (!lastHovered || !lastHovered.is($this)) {
var id = $this.data('item-id');
$html = $(template(items[id]));
$body.find('.wow-item').remove();
$body.append($html);
$html.css({
left: e.clientX + 20,
top: e.clientY - 10
});
lastHovered = $this;
} else {
$html = $('.wow-item');
}
setTimeout(function () {
$html.removeClass('hidden');
}, 10);
$this.on('mousemove.wow', function (e) {
$html.css({
left: e.clientX + 20,
top: e.clientY - 30
});
});
});
$wowIcons.on('mouseout.wow', function (e) {
$body.find('.wow-item').addClass('hidden');
$(this).off('mousemove.wow');
});
$body.on('mouseover.wow', '.wow-item', function (e) {
});
$body.on('mouseout.wow', '.wow-item', function (e) {
$(this).addClass('hidden');
});