jQuery图片弹性变大变小
本篇文章实现的是当光标放到特定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
- };
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。