前端插件
蜗牛ha
一枚积极向上的it男,7年前端开发经验。。。
展开
-
前端插件之带滑动效果的二级标题,原生js写的
效果图:1.最主要的js部分 var wid = window.screen.width; var subcontent = document.getElementById("subcontent"); subcontent.style.width = (wid - 40) + 'px'; //全局变量声明 var a = false;原创 2017-09-06 19:32:28 · 1106 阅读 · 0 评论 -
前端插件之原生js写range组件
效果图:我们先写一个range组件:流程是:1.css部分,去掉默认样式 outline: none; /*去掉点击时出现的外边框*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*这三个是去掉那条线原有的默认样式,划重点原创 2017-09-03 17:35:40 · 4051 阅读 · 0 评论 -
原生js写头部tab栏左右滑动支持移动端
前面有一篇功能较完善的,但是是jq和原生混搭的,有朋友只需要原生的,就做了个简单的;1.css*{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;list-style:none} html,body{width: 100%; overflow: hidden;} #contentNav{原创 2017-09-01 17:04:29 · 2734 阅读 · 0 评论 -
前端插件之头部tab栏左右滑动
效果图:1.css部分 *{margin: 0; padding: 0; box-sizing: border-box; } html,body{width: 100%; overflow: hidden;} ul{width: auto; list-style: none; height: 65px;} li{float: left; height: 65原创 2017-09-01 13:35:05 · 2463 阅读 · 0 评论 -
前端插件之拖拽
1.拖拽的插件很多,其实我们只要明白他的原理,就不难了:之所以形成拖拽的效果,是在鼠标按下onmousedown的时候记录鼠标坐标与被拖拽div左边界,上边界的距离disX,disY,在拖动onmousemove的时候,讲拖动时鼠标的x坐标oEv.clientX-disX;得到的这个值应该是拖动情况下,div的left;同理,投票也是:2.js代码:var oBox=document.原创 2017-08-31 22:53:55 · 2473 阅读 · 0 评论 -
前端插件之跑马灯
1.效果图不间断滚动。2.css代码#wrapper{ border-top: 3px solid #EB782E; width: 1200px; margin: 0 auto; margin-top: 30px; position: relative; }原创 2017-08-31 13:18:27 · 4323 阅读 · 0 评论 -
前端插件之滚动轮播
效果如下:1.css代码 #wrapperslide{ height:220px;margin:0 auto;overflow:hidden;width:1200px;position: relative; } .mr_frBtnL{cursor:pointer;display:inline;height:46px;widt原创 2017-08-31 13:01:16 · 549 阅读 · 0 评论 -
前端插件之侧边定位随屏幕滚动而滚动
1.侧边定位一般我们可以用position:fixed;但是有时候不行,比如我需要滚动的div是在整体的里边定位,如果用fixed是相对于整个屏幕,如下:需要滚动的是viewleftshare,而ct只是众多div中的一个。 111111111111111 2.我们可以这样用js动态让需要滚动的div window.onscroll=function(){原创 2017-08-31 12:47:04 · 3494 阅读 · 0 评论 -
前端插件之锚点动画跳转
1.js代码 jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).原创 2017-08-31 12:35:51 · 1839 阅读 · 1 评论 -
amcharts示例
1.竖向双Y轴柱状图核心代码:var amOptions = { "type": "serial", "theme": "light", "legend": { "horizontalGap": 0, "maxColumns": 1, "position": "right&原创 2018-09-28 18:13:03 · 2169 阅读 · 1 评论