标签:style blog class code java ext javascript color width 2014 http
效果图:
1.当鼠标移动到超链接时,有提示框。
2..当鼠标移动到图片动画旋转
html:
<div id="jnNotice"> <div id="jnMiaosha"> <a href="#nogo" class="JS_css3"><img src="images/upload/20120216.jpg" alt="冬品清仓" /></a> </div> <div id="jnNoticeInfo"> <h2 title="最新动态">最新动态</h2> <ul> <li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li> <li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li> <li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li> <li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li> <li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li> <li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li> </ul> <br class="clear" /> </div> </div>
css:
/* 最新动态 */ #jnNotice{ float: left; height: 321px; overflow: hidden; width: 230px; } #jnMiaosha { float: left; height: 176px; margin-bottom: 10px; overflow: hidden; width: 230px; } .JS_css3 img { -webkit-transition:1s all; -moz-transition:1s all; -o-transition:1s all; transition:1s all; } .JS_css3:hover img { -webkit-transform:rotate(720deg); -moz-transform:rotate(720deg); -o-transform:rotate(720deg); transform:rotate(720deg); } #jnNoticeInfo { float: left; border: 1px solid #DFDFDF; height: 133px; overflow: hidden; width: 228px; } #jnNoticeInfo h2 { height: 23px; line-height: 23px; border-bottom: 1px solid #DFDFDF; text-indent:12px; } #jnNoticeInfo ul { float: left; padding: 6px 2px 0 12px; } #jnNoticeInfo li { height: 20px; line-height: 20px; overflow: hidden; } #jnNoticeInfo li a{ color:#666666; } #jnNoticeInfo li a:hover{ color: #008CD7; text-decoration: none; } /* 品牌活动 */
js:
$(function () { var x = 10; var y = 15; $("a.tooltip").mouseover(function (e) { this.myTitle = this.title; this.title = ""; var tooltip = "<div id = ‘tooltip‘>" + (this.myTitle !=null ?this.myTitle:"") + "</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { this.title = this.myTitle; $("#tooltip").remove(); }); });
【锋利的JQuery-学习笔记】Tootip(提示框),码迷,mamicode.com
标签:style blog class code java ext javascript color width 2014 http
原文地址:http://www.cnblogs.com/easy5weikai/p/3703093.html