(厉其器)前端常用的一些效果diy

一直想写一个自己的脚手架,但是时间挤不那么多出来,所以现在开始写一些效果,基于JQ1.11.3基础上写的一些效果:

1.场景:当我们需要在一个标签A上绑定一个点击事件来控制标签B的变化(只有两种状态)

实现:$.fn.binChange({btn:'按钮类名',target:'目标类名',cs:'状态名称',click:'事件名称'})

-->点这里:binChange

2.场景:需要在非A标签的标签上也有A标签的跳转事件

实现:$.fn.aLink({btn:'按钮类名',target:'跳转类型',click:'事件名称',link:'跳转路径'})

-->点这里:aLink

3.场景:整个页面需要响应式-根据根html标签的大小来控制

实现:$.fn.autoFontSize({fontSize:'根字体大小',screenW:'适配显示器的最大宽度'})

-->点这里:autoFontSize

4.场景:批量给关键字加高亮状态

实现:$.fn.light({content:'上下文',target:'目标',key:'关键字',newKey:'新关键字',cs:'类名'})

-->点这里:light

5.场景:给背景图片做预加载

实现:$.fn.imgsOpt({cs:'目标',color:'loading颜色',scale:'loading缩放比例'})

-->点这里:imgsOpt

6.场景:页面滚轮回到固定位置

实现:$.fn.scrollTop({cs:'目标',top:'置顶位置',click:'事件',animate:'是否动画',time:'动画时间',parent:'是否为父类'})

-->点这里:scrollTop

7.场景:浏览器在不操作的情况下超时处理

实现:$.fn.countDown({time:'时间单位为秒 60秒为1分钟|3600秒为一小时|86400秒为一天 ',cs:'倒计时数元素',func:'回调函数/这边的回调函数也可以放在第二形参位置'})

-->点这里:countDown

8.场景:浏览器滚动加载也叫下拉刷新

实现:$.fn.rollLoad({range:'距下边界长度/单位px',maxNum:'设置加载最多次数',func:'回调函数/这边的回调函数也可以放在第二形参位置'})

-->点这里:rollLoad

9.场景:鼠标移动到一个不规则图像时选中这个图像

实现:$.fn.polygon(e,callback)

参数e:

{

btn:'',//目标

click:'click',//事件

poly:[],//多边形点坐标数组

cs:'',//变化类名

func:{},//回调函数

}

参数callback:此处放回调函数

-->点这里:polygon

10.场景:通过坐标点数据画出折线图

实现:$.fn.svgLines(e,callback)

参数e:

{

points:[],//坐标点[{x:50,y:50},{x:60,y:70},{x:80,y:90}]

btn:'svg',//svg元素

style:{},//svg样式

parent:'body',//父级有影响排版的类名

color:'rgb(0,170,255)',//线颜色

strokeWidth:2,//线粗细

click:'click',//给每段直线绑定事件

func:{},//回调函数

}

参数callback:此处放回调函数

-->点这里:svgLines

11.场景:复制网页的内容后想让别人看到自己的版权

实现:$.fn.pasteFrom({url: '连接地址',description: '版权说明'})

-->点这里:pasteFrom

12.场景:获取页面所有标签的类名和id并去重

实现:$.fn.getClasses()

-->点这里:getClasses

13.场景:筛选出所有存在的id或类名的样式行

实现:$.fn.getStyleLines(e)

参数e:

{

el:[], //类名或id数组

css:'', //样式字符串

}

-->点这里:getStyleLines

未完待续!!!

最后推荐下我的个人站  www.2tro.com  ,欢迎来一起交流,QQ群434704633!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,639评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,093评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,079评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,329评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,343评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,047评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,645评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,565评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,095评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,201评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,338评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,014评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,701评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,194评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,320评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,685评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,345评论 2 358

推荐阅读更多精彩内容