王志广的个人分享

js转动小箭头

admin发表于2013-04-10  5,217次浏览 标签: 

效果是默认小箭头朝下,当鼠标移动上去,小箭头朝上,并在下面出现弹出框的特效。但别忘了包含jquery类库。

<script>
$(function(){
$(“#hm_y”).bind(“mouseover”,function(){
$(“#flipCor”).addClass(“flipy”);
$(“#y_act”).removeClass(“displaynone”);
}).bind(“mouseout”,function(){
$(“#flipCor”).removeClass(“flipy”);
$(“#y_act”).addClass(“displaynone”);
});
});
</script>
<style>
.displaynone{display:none;}
.displayblack{display:black;}
.flipy{-moz-transForm:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);filter:FlipV;}
.cor{display:inline-block;margin-bottom:2px;border-width:4px 4px 0;border-style:solid dashed dashed;border-color:#C2C2C2 transparent transparent;}
.left{float:left;}
.right{float:right;}
#header{width:100%;height:45px;position:fixed;z-index:10;top:0px;background:#333;color:#fff;}
#header_main{width:960px;margin:0 auto;}
#hm_y{line-height:45px;}
#hm_y:hover{background:#1E1E1E;}
#y_con{padding:0 15px;cursor:pointer;}
#y_act{position:absolute;background:#fff;width:300px;padding-top:8px;}
.hm_bor{border:1px solid #CDCDCD;-webkit-box-shadow:0 0 8px #CDCDCD;-moz-box-shadow:0 0 8px #cdcdcd;box-shadow:0 0 8px #CDCDCD;color:#000;}
</style>
<div id=”header”>
<div id=”header_main”>
<div id=”hm_y”>
<div id=”y_con”><{$time}> <i id=”flipCor”></i></div>
<div id=”y_act”><div class=”hm_bor”>sfsdfsdfdssssssssssssssfssdfsfadsdfsdfadfsfegsfdjlsjfoheoifjlsdhnflsdjl<br />sssssddddddddd</div>
</div>
</div>
<div id=”hm_s”><a href=”#”>设为首页</a></div>
</div>
</div>

你可以发表评论引用到你的网站或博客,或通过RSS 2.0订阅这个日志的所有评论。
上一篇:
下一篇:
没有评论
我来说两句

  Ctrl+Enter