您的位置:首页 > Web前端 > CSS

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

2016-08-18 16:33 351 查看
<script>
varnum=100;
for(vari=num-5;i<num+5;i++){
//console.log(typeof(i));
console.log("i");
}
</script>



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

<script>
varnum="100";
for(vari=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.5em0.6em;
text-shadow:01px0black;
box-shadow:-1px-1px1pxrgba(10,0,5,0.5),-1px1px1pxrgba(10,0,5,0.5),1px1px1pxrgba(10,0,5,0.5),1px-1px1pxrgba(10,0,5,0.5);
max-width:24em;
-webkit-transition:opacity0.05sease-out0.05s,transform0.1sease-out0.05s;
-o-transition:opacity0.05sease-out0.05s,transform0.1sease-out0.05s;
transition:opacity0.05sease-out0.05s,transform0.1sease-out0.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:opacity0.05sease-out0.05s,transform0.1sease-out0.05s,visibility0.01slinear0.15s;
-o-transition:opacity0.05sease-out0.05s,transform0.1sease-out0.05s,visibility0.01slinear0.15s;
transition:opacity0.05sease-out0.05s,transform0.1sease-out0.05s,visibility0.01slinear0.15s;
}

.wow-icon,.wow-item{
border-style:solid;
border-width:5px;
border-image:url(../img/wow-tooltip-border-2.png)5repeat;
border-radius:4px;
}


$wowIcons.on('mouseover.wow',function(e){
var$this=$(this);
var$html;
if(!lastHovered||!lastHovered.is($this)){
varid=$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');
});


上面JS部分就是鼠标事件

Handlebars.js模板引擎

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: