当前位置: 秋叶网络博客
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间:2017年10月22日
mysql数据库迁移导入到mongodb详细教程
"position":"relative", "overflow":"hidden" }); $ul.css({ "position":"absolute", "height":"100%", "top":0, "left":0 }); $Li.css({ "height": "100%", "float": "left" }); } //响应式设计(设置样式)span function initElement(){ $ul.append($ul.html()); lenth = $('>li',$ul).length; for(var i = 0; i < lenth / 2; i++){ $('<li></li>').appendTo($dot); } $dotLi = $('>li',$dot); } function resize() { var $li = $('>li',$ul); $liw = $ul.parent().width(); $ul.width($liw * lenth); $li.width($liw); } //初...
目录: 前端编程 标签: 轮播特效 10条评论 17173次阅读
Canvas裁剪等比尺寸文章缩略图
作者: 秋了秋 发表时间:2017年03月11日
mysql数据库迁移导入到mongodb详细教程
来说,缩略图都是读取文章里面的一张大图片再通过css缩小显示,或者是后台经过处理后生成的另外一张对应的图片,这里不做讨论,我们是前端就得用前端的方法。然而图片大小不一会给前端响应式造成巨大的麻烦,关于响应式固定宽高比例前面一篇文章已经讲过一种方法《纯css自适应div高度(等比缩放)a 》,今天讲另外一种更高级的canvas办法。除了固定宽高比例,还实现了裁剪中心位置像素。然后用canvas代替img标签放于网页img原先位置或者输出dataurl形式的img地址。 原理是:页面默认不显示图片,把图片的src地址绑定到data-src上,注意一定要在同一个服务器s...
目录: 前端编程 标签: canvas裁剪图片 4条评论 9360次阅读
Js、Css3仿手机QQ资料个性名片标签特效
作者: 秋了秋 发表时间:2017年01月20日
mysql数据库迁移导入到mongodb详细教程
***********************/ //原生js实现环形菜单创建 function circleLayout(para){ var count=para.targetElement.length; if(!count||!para.pointElement){ throw new Error("请传入布局元素参数targetElement和pointElement !"); return false; } var beginAngle=para.beginAngle; var endAngle=para.endAngle; var validAngle=endAngle-beginAngle; var angle=validAngle/count; var X,Y, pointLeft=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[0]):(para.pointElement.offsetLeft+para.pointElement.offsetWidth/2)...
目录: 前端编程 标签: qq资料名片 2条评论 6972次阅读
Js、Html环形扇形轨迹布局[三角函数]
作者: 秋了秋 发表时间:2017年01月17日
mysql数据库迁移导入到mongodb详细教程
前端中用得最多的要么线性,要么矩形布局,都是栅格方块组成的页面样式。这显得很单一,如果突然加入环形布局,将会让人眼前一亮,通过JavaScript可以很灵活的使用这种布局,这时候我们学的数学知识派上用场了,没错,就是三角函数,经典的数学问题。已知一个圆...
目录: 前端编程 标签: 环形布局 1条评论 6570次阅读
前端实现静态分页展示内容
作者: 秋了秋 发表时间:2016年04月13日
mysql数据库迁移导入到mongodb详细教程
lt;li class="atitle"><span class="ttime">1: </span>php与mysql数据库通信三步曲</li> <li class="atitle"><span class="ttime">2: </span>响应式宽屏滚动式幻灯片</li> <li class="atitle"><span class="ttime">3: </span>致所有使用本站外链资源的朋友</li> <li class="atitle"><span class="ttime">4: </span>长城宽带WiFi连接ftp列表出错解决方案</li> <li class="atitle"><span class="ttime">5: </span>一小段代码实现代码高亮...
目录: 前端编程 标签: 前端分页 4条评论 5479次阅读
我对js开发程序语言的理解
作者: 秋了秋 发表时间:2016年04月10日
mysql数据库迁移导入到mongodb详细教程
真正的需求,或者高要求的一些公司,你说的只是切图。 发表下我的看法,就算是切图也是一门技术活,你认为很简单,是因为你没做到位,不是说实现了效果就行,还有很多方面都要考虑到,布局方法和技巧,兼容性,seo,命名,语义化,简化,维护成本等等,设计是图层操作,前端是代码操作,从切图上来说,前端要比设计累人。 前端也是设计,只是基于代码的设计,在js上尤为如此,同一个效果实现方法可能千重万种,你要如何实现,你代码写的质量如何,细腻度如何,该怎样构思你的代码? 关于js的算法和逻辑,交互和体验,你懂的,大部分人都卡在这js里面,技术...
目录: 前端编程 标签: 1条评论 4558次阅读
CSS3多列布局实现杂志排版效果
作者: 秋了秋 发表时间:2015年12月17日
mysql数据库迁移导入到mongodb详细教程
做到,我们的css也能做到。 要实现三列的话,走一般的思路就是定义三个div左浮动,然后往这三个div里面填充内容。这样就很不方便了,内容的连贯性就会出问题,每个div放多少字以及解决响应式。这是行不通的,相当于分割内容。 然而用css3可以不影响内容布局的情况下完美解决这个问题,这就是column的属性,因为用得比较少,我们经常忽略它,它分三个属性column-count(列数)、column-gap(列与列之间的间隔)、column-rule(分割线)。 p 具体代码展示: #qiuye{ border:1px solid #ccc; position:relative; color:#1F1818; background:#fff; padding:10p...
目录: 前端编程 标签: 多列布局 0条评论 7658次阅读
响应式全屏无缝滚动式幻灯片
作者: 秋了秋 发表时间:2015年11月13日
mysql数据库迁移导入到mongodb详细教程
箭头,点击左它就向左滚动一张,点击右它就向右滚动一张; 4.鼠标移入移出效果,鼠标移上去,幻灯片暂停,鼠标移出,幻灯片继续轮播; 有了这几个思路,我们就开始动手写了,首先是html布局: <div class="ddd"> <!--图片容器--> <ul id="cgw"> <li><img src='20151010ivfthh.jpg' alt=''/></li> <li><img src='20151010dlezyn.jpg' alt=''/></li> <li><img src='20151010riudvj.jpg' alt=''/></li> </ul> <!--焦点--> <ul id="qiuye_i"></ul> </div&g...
目录: 前端编程 标签: 幻灯片 6条评论 7412次阅读
Javascript拖拽功能代码
作者: 秋了秋 发表时间:2015年11月02日
mysql数据库迁移导入到mongodb详细教程
eb页面中的拖拽功能也是屡见不鲜,比如说一些页面的装扮,比如说qq空间,淘宝店铺装修,可视化布局的等都用到了拖拽的功能。新手看来觉得是高大上,其主要运用的是鼠标的坐标操作。详情代码如下: var oDiv=document.getElementById('div1')span ; var disX=0,disY=0; oDiv.onmousedown=function (ev){ var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEven...
目录: 前端编程 标签: js拖曳 4条评论 6696次阅读
解决响应式布局border带来的麻烦
作者: 秋了秋 发表时间:2015年09月13日
mysql数据库迁移导入到mongodb详细教程
近做的项目很多都要求响应式布局,即使不要求响应式,我们在普通的固定布局中也会偶尔使用百分比来设置元素宽度以提高更好的维护性和方便性。 而在使用百分比的时候我们经常会遇到一些不可控的因素影响布局模式,比如说最可恶的bor...
目录: 前端编程 标签: 响应式边框 2条评论 7093次阅读