本篇文章实现的是当光标放到特定a标签上,将显示一个圆形的图片背景,该特效可用于网站导航等,具体效果可看从下图看到:
HTML代码:
<div class="banner"> <div class="inside"> <a href="http://www.jquery001.com/"> <span>jQuery学习系列</span> <img class="pic_bg" src="pic01.jpg" alt="title #1"/> <img class="pic_shuoming" src="ziti.png" alt="jQuery" /> </a> </div> </div>
jQuery代码,高度位置初始化:
var i = 0; var j = 65; var m = 0; var arrTop = new Array(74, 71, 65, 50, 35, 14, -15); //初始化高度 $(".inside a").each(function () { //初始化位置 $(this).find("img").hide(); $(this).find("span").show(); i = i + 80; marginLeft = i + "px"; marginTop = arrTop[m] + "px"; m++; $(this).css({ "left": marginLeft, "top": marginTop }); });
引入easing 库:最专业的UI前端框架!
var easing = "easeInSine", //引入easing ui增加动感效果 duration = 200, animation = { width: 120, height: 120, marginLeft: -30, marginTop: -30 };