Jquery+CSS实现的蜂窝效果_网页代码站(www.webdm.cn)

<!DOCTYPE html> <html> <head> <title>Jquery+CSS实现的蜂窝效果_网页代码站(www.webdm.cn)</title> <style> html,body{margin:0;padding:0;width:100%;} #wrap{margin:0;padding:0;width:100%;} #wrap:after{content:"";display:block;height:0;clear:both;visibility: hidden;overflow:hidden;} .post{width:120px;height:80px;display:inline-block;background:#0099ff;float:left;border-right:1px dotted #fff;border-left:1px dotted #fff;margin-top:100px;position:relative;overflow:visible;margin-top:52px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;} .post:before{content:"";width:0px;height:0px;display:inline-block;border-left: 60px dotted transparent; border-right: 60px dotted transparent; border-bottom: 50px solid #0099ff;font-size:0;position:absolute;top:-50px;left:0px;} .post:after{content:"";width:0px;height:0px;display:inline-block;border-left: 60px dotted transparent; border-right: 60px dotted transparent; border-top: 50px solid #0099ff;font-size:0;position:absolute;bottom:-50px;left:0px;} </style> </head> <body> <div id="wrap"> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> <div class='post'> </div> </div> <script src="http://www.webdm.cn/themes/script/jquery.js"; type="text/javascript"></script> <script> (function($){ $.fn.sixBorder = function(options){ var defaults={ post:'post' } var options=$.extend(defaults,options); var wrapWidth=$(this)[0].offsetWidth,postWidth=$("."+options.post)\[0\].offsetWidth,lineNum=Math.floor(wrapWidth/postWidth),lineLimit=Math.floor((wrapWidth-61)/postWidth); $("."+options.post).each(function(index){ var _this = $(this); \_this.css({'margin-left':'0px'}); if(lineLimit == lineNum){ var numPer=index%lineNum; if(numPer == 0){ var linePer=Math.floor(index/lineNum)%2; if(linePer == 1){ \_this.css({'margin-left':'61px'}); } } }else{ var numPer=index%(lineLimit+lineNum); if(numPer == 0){ \_this.css({'margin-left':'61px'}); } }; }); } })(jQuery); $("#wrap").sixBorder(); $(window).resize(function(){ $("#wrap").sixBorder(); }); </script>
<p>网页代码站 - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </html>

Original url: Access
Created at: 2019-03-22 12:01:46
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论