最近做了一个仿win8的磁铁效果
使用seajs封装模块,,并且通过传参做到通用。
js代码如下:
//@charset "utf-8" define(function(require,exports,module){ function initCt(wrapSelectStr,wrapInner,topValue,into) { $(wrapInner).mouseover(function(){ $(this).attr("notMoveFlag", 1); $(this).find(into).show(); }); $(wrapInner).mouseout(function(){ $(this).attr("notMoveFlag", 0); $(this).find(into).hide(); }); // 设置每一秒随机移动某个磁贴 setInterval(function(){ // 随机获取某个class=wrap的div var wrap = $(wrapSelectStr); var wrapLen = $(wrapSelectStr).length; var index = Math.floor(Math.random() * wrapLen); var randomWrap = wrap.eq(index); // 调用移动事件 tileMove(randomWrap,wrapInner,topValue); }, 1000); } function tileMove(wrap,wrapInner,topValue) { var wrapInner = wrap.find(wrapInner); // 获取wrapInner的高度 var wrapInnerHeight = wrapInner.height(); // 不移动磁贴标签不为1的时候才移动 if (wrapInner.attr("notMoveFlag") != 1) { // 如果top为auto,则设置移动一个磁贴的高度 if (wrapInner.css("top") == 'auto') { var top = "-" + topValue + "px"; } else { // 如果移到了最后一个磁贴,移动到第一个磁贴 if (wrapInnerHeight <= -parseInt(wrapInner.css("top")) + topValue) { var top = "0px"; // 移动一个磁贴 } else { var top = (parseInt(wrapInner.css("top")) - topValue) + "px"; } } //使用animate事件使得磁贴向上移动 wrapInner.animate({ top : top }, 500); } } exports.initCt=initCt; });
html结构:
页面调用seajs
<script src="dist/sea.js"></script> <script type="text/javascript"> seajs.use("./js/tile.js",function(ex){ ex.initCt(".adv-out",".adv-list","130",".into"); }); </script>
<div class="adv-out"> <div class="adv-list"> <a href="#" class="adv-pic chance"> <h2 class="adv-title yahei">投资机会深度挖掘</h2> <p class="adv-text">明星分析师随时待命,不再错过任何热点!</p> <div class="into yahei">点击进入</div> </a> <a href="#" class="adv-pic chance2"> <h2 class="adv-title yahei">投资机会深度挖掘</h2> <p class="adv-text">美国白宫向三一重工下了总计285亿美元的水稻收<br />割机订单...</p> <div class="into yahei">点击进入</div> </a> </div> </div> <div class="adv-out"> <div class="adv-list"> <a href="#" class="adv-pic report"> <h2 class="adv-title yahei">投资策略报告</h2> <p class="adv-text">同花顺首席分析师<br />亲自撰写每周一期,<br />让您投资不再迷茫!</p> <div class="into yahei">点击进入</div> </a> <a href="#" class="adv-pic report2"> <h2 class="adv-title yahei">投资策略报告</h2> <p class="adv-text">同花顺首席分析师<br />亲自撰写每周一期,<br />让您投资不再迷茫!</p> <div class="into yahei">点击进入</div> </a> </div> </div>
css部分代码:
主要的这些:
.adv-out{width:290px; height:130px; float:left; margin-right:8px; margin-top:20px; display:inline; overflow:hidden; position:relative;} .adv-list{ position:relative; top:0; overflow:hidden; z-index:10; } .adv-pic{ position:relative; width:290px; height:130px; display:block; overflow:hidden; z-index:99;}
相关推荐
博客地址:http://blog.csdn.net/krubo1/article/details/50457550
Android 仿win8磁铁悬浮按钮效果,有按压效果
win8磁铁效果和关机重启
Android 仿win8 磁贴效果 可拖动,替换
关于win8的磁铁效果,和开机关机代码,这个效果很不错
自定义imageview 实现点击磁铁效果,
利用ansoft进行电磁铁的3D仿真 电磁铁模型建立 激励电流添加方式
球形磁铁的磁场仿真,得到球形磁铁的磁感线、磁感应强度的分布情况
flash仿真实验,(磁铁插入螺线管)源代码。 实时交互,可用鼠标操作实验器材。
win8磁贴格子图片展示html5模板,多种风格模板,全套模板,DIV CSS布局,包含主页、作品集、博客、关于我们、联系等网站模板页面。
该项目实现了防wp磁铁效果结合翻页效果,主要包括书柜、设置、其他、场馆介绍等功能,点击书柜功能可以进入我的画廊页面,通过点击某一个Item进入画廊的目录页面。
以直流螺线管式本质安全型电磁铁为研究对象,利用Ansoft maxwell2D/3D软件对电磁铁进行了静磁场、温度场和暂态性能分析。电磁铁的吸力特性曲线比较陡峭。瞬态分析得出动态吸力、衔铁运动速度、电流等变化曲线,保持...
仿磁铁线——仿磁线.doc
电磁铁matlab仿真,用于计算磁场强度等数据
易语言磁铁吸引效果源码,磁铁吸引效果,线程
永磁节能电磁铁动态特性的仿真优化,马少华,刘延,电磁铁的动态过程分析对其优化设计至关重要。本文提出一种带有永磁保持的电磁系统,并且应用有限元方法进行动态仿真分析。从线圈
易语言源码磁铁吸引效果易语言源码.rar 易语言源码磁铁吸引效果易语言源码.rar 易语言源码磁铁吸引效果易语言源码.rar 易语言源码磁铁吸引效果易语言源码.rar 易语言源码磁铁吸引效果易语言源码.rar 易语言源码...
自定义win8的开始菜单。包括透明显示,定义磁铁行和列,等等很多功能
android磁铁布局按钮(按下缩小),仿win8按钮的样式
个人写的一个仿win8开始菜单磁铁按钮Demo,有两种点击效果参考。 想了解更多关于C#WPF的知识,可以登录我的个人博客www.7fenx.com。 欢迎交流讨论。