当前位置: 秋叶网络博客
简易无缝滚动功能齐全轮播组件
作者: 秋了秋 发表时间: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条评论 15729次阅读
Canvas裁剪等比尺寸文章缩略图
作者: 秋了秋 发表时间:2017年03月11日
mysql数据库迁移导入到mongodb详细教程
来说,缩略图都是读取文章里面的一张大图片再通过css缩小显示,或者是后台经过处理后生成的另外一张对应的图片,这里不做讨论,我们是前端就得用前端的方法。然而图片大小不一会给前端响应式造成巨大的麻烦,关于响应式固定宽高比例前面一篇文章已经讲过一种方法《纯css自适应div高度(等比缩放)a 》,今天讲另外一种更高级的canvas办法。除了固定宽高比例,还实现了裁剪中心位置像素。然后用canvas代替img标签放于网页img原先位置或者输出dataurl形式的img地址。 原理是:页面默认不显示图片,把图片的src地址绑定到data-src上,注意一定要在同一个服务器s...
目录: 前端编程 标签: canvas裁剪图片 4条评论 8257次阅读
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条评论 6267次阅读
Js、Html环形扇形轨迹布局[三角函数]
作者: 秋了秋 发表时间:2017年01月17日
mysql数据库迁移导入到mongodb详细教程
前端中用得最多的要么线性,要么矩形布局,都是栅格方块组成的页面样式。这显得很单一,如果突然加入环形布局,将会让人眼前一亮,通过JavaScript可以很灵活的使用这种布局,这时候我们学的数学知识派上用场了,没错,就是三角函数,经典的数学问题。已知一个圆...
目录: 前端编程 标签: 环形布局 1条评论 5370次阅读
nodeJs搭建服务器环境实例
作者: 秋了秋 发表时间:2016年07月07日
mysql数据库迁移导入到mongodb详细教程
"http");//引入http模块(nodejs内置模块)span var fs=require("fs");//引入fs模块(nodejs内置模块)span http.createServer(function(req,res){//创建服务,两个参数分别为(请求和响应)span if(req.url=="/"){//如果请求的地址是根目录span fs.readFile("./x.html",function(err,data){//读当前目录下的x.html文件,两个参数(错误和读取的内容),相当于自定义首页span if(err){//当错误的时候span console.log(err);//把错误信息打印出来span res.end();//结束读取span }else{//否则span res.writeHead(200,{"Content-Type":"text/html"});//写入响...
目录: 前端编程 标签: nodejs 1条评论 5785次阅读
前端实现静态分页展示内容
作者: 秋了秋 发表时间:2016年04月13日
mysql数据库迁移导入到mongodb详细教程
分页的情况了。无奈只好自己动手丰衣足食,写个方法方便以后使用。 内容分页最初的目的是为了减轻服务器压力,一次性把所有内容读出来,内容量大的话,会给数据库造成很大的压力,而且响应速度也很慢。所以把大数据分割成一小段一小段地截取读出来。 后端做这种事情最为常见了,但是前端做分页就有点稀奇,但也有用武之地,比如说数据量小的话,前端分页的目的就是解决一个页面同时显示太多条目而导致眼睛疲劳的现象,所以前端分页就是欺骗眼睛的行为,数据还是要一次性全部读取出来。 其实质就是控制一部分显示一部分隐藏,那么如何巧妙的实现一部分显示...
目录: 前端编程 标签: 前端分页 4条评论 4754次阅读
我对js开发程序语言的理解
作者: 秋了秋 发表时间:2016年04月10日
mysql数据库迁移导入到mongodb详细教程
,js能干的事情有些php也能干,php能干的有些事情js也能干,那为什么要用js,原因在于js是客户端语言,在客户端上运行,而php是服务器语言,在服务器上运行,但凡在服务器上运行的程序响应速度都是比在本机上运行得慢。所以能用js做的事情绝不用php来做,这就是js的优点。相对缺点是不能存储数据到服务器永久保存,各有各的优劣。 js最大的用处就是操作Dom(从网页制作角度来讲)。曾今看到过某个某个公司的招聘上这样写到:只会用js(jq)操作dom的不要。当时看到我就笑了,说白了,js在网页上大部分的角色就是操作dom,这也是它与php对比的特色,也是它...
目录: 前端编程 标签: 1条评论 4182次阅读
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条评论 6922次阅读
响应式全屏无缝滚动式幻灯片
作者: 秋了秋 发表时间: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条评论 6491次阅读
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条评论 6289次阅读