前端开发中常用到的js特效有哪些

2023-04-08 17:13:02JavaScript024

前端开发中常用到的js特效有哪些,第1张

HTML5 DOM 选择器

// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item')console.log(item)// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item')console.log(items[0])1234567

阻止默认行为

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.preventDefault){// w3c方法阻止默认行为

event.preventDefault()

} else{// ie 阻止默认行为

event.returnValue = false

}

}, false)// jQuery$('#btn').on('click', function (event) {event.preventDefault()

})1234567891011121314151617

阻止冒泡

// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) {event = event || window.event；if (event.stopPropagation){// w3c方法阻止冒泡

event.stopPropagation()

} else{// ie 阻止冒泡

event.cancelBubble = true

}

}, false)// jQuery$('#btn').on('click', function (event) {event.stopPropagation()

})1234567891011121314151617

鼠标滚轮事件

$('#content').on("mousewheel DOMMouseScroll", function (event) {

// chrome &ie || // firefox

var delta = (event.originalEvent.wheelDelta &&(event.originalEvent.wheelDelta >0 ? 1 : -1)) || (event.originalEvent.detail &&(event.originalEvent.detail >0 ? -1 : 1))

if (delta >0) {

// 向上滚动

console.log('mousewheel top')

} else if (delta <0) {// 向下滚动

console.log('mousewheel bottom')

}

})123456789101112

检测浏览器是否支持svg

function isSupportSVG() {

var SVG_NS = 'http://www.w3.org/2000/svg' return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect

}

// 测试console.log(isSupportSVG())1234567

检测浏览器是否支持canvas

function isSupportCanvas() {

if(document.createElement('canvas').getContext){return true

}else{return false

}

}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas())12345678910

检测是否是微信浏览器

function isWeiXinClient() {

var ua = navigator.userAgent.toLowerCase()

if (ua.match(/MicroMessenger/i)=="micromessenger") {

return true

} else {

return false

}

}// 测试alert(isWeiXinClient())1234567891011

jQuery 获取鼠标在图片上的坐标

$('#myImage').click(function(event){

//获取鼠标在图片上的坐标

console.log('X：' + event.offsetX+'\n Y:' + event.offsetY)

//获取元素相对于页面的坐标

console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)

})1234567

验证码倒计时代码

<input id="send" type="button" value="发送验证码">12

// 原生js版本var times = 60, // 临时设为60秒

timer = null

document.getElementById('send').onclick = function () {

// 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

send.value = '发送验证码'

clearInterval(timer)

send.disabled = false

times = 60

} else {

send.value = times + '秒后重试'

send.disabled = true

}

}, 1000)

}1234567891011121314151617181920

// jQuery版本var times = 60,

timer = null

$('#send').on('click', function () {

var $this = $(this) // 计时开始

timer = setInterval(function () {

times-- if (times <= 0) {

$this.val('发送验证码')

clearInterval(timer)

$this.attr('disabled', false)

times = 60

} else {

$this.val(times + '秒后重试')

$this.attr('disabled', true)

}

}, 1000)

})12345678910111213141516171819202122

常用的一些正则表达式

//匹配字母、数字、中文字符

/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱

/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号

/^1[3|5|8|7]\d{9}$/

//验证URL

/^http:\/\/.+\./

//验证身份证号码

/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式

/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)

/[^\x00-\xff]/1234567891011121314151617181920

js时间戳、毫秒格式化

function formatDate(now) {

var y = now.getFullYear() var m = now.getMonth() + 1// 注意js里的月要加1

var d = now.getDate() var h = now.getHours()

var m = now.getMinutes()

var s = now.getSeconds() return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s

}

var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20)

console.log(nowDate.getTime())// 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate))123456789101112131415

js限定字符数（注意：一个汉字算2个字符）

<input id="txt" type="text">//字符串截取function getByteVal(val, max) {

var returnValue = '' var byteValLen = 0 for (var i = 0i <val.lengthi++) {if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2else byteValLen += 1 if (byteValLen >max) break

returnValue += val[i]

}return returnValue

}

$('#txt').on('keyup', function () {

var val = this.value if (val.replace(/[^\x00-\xff]/g, "**").length >14) {this.value = getByteVal(val, 14)

}

})12345678910111213141516171819

js判断是否移动端及浏览器内核

var browser = {

versions: function() {

var u = navigator.userAgent

return {

trident: u.indexOf('Trident') >-1, //IE内核

presto: u.indexOf('Presto') >-1, //opera内核

webKit: u.indexOf('AppleWebKit') >-1, //苹果、谷歌内核

gecko: u.indexOf('Firefox') >-1, //火狐内核Gecko

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/), //ios

android: u.indexOf('Android') >-1 || u.indexOf('Linux') >-1, //android

iPhone: u.indexOf('iPhone') >-1 , //iPhone

iPad: u.indexOf('iPad') >-1, //iPad

webApp: u.indexOf('Safari') >-1 //Safari

}

if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {

alert('移动端')

}123456789101112131415161718192021

之前我用过一个检测客户端的库觉得挺好用的，也推荐给大家叫 device.js，大家可以 Googel 或百度

GItHub仓库地址：https://github.com/matthewhudson/device.js

getBoundingClientRect() 获取元素位置

//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv')var x = myDiv.getBoundingClientRect().left

var y = myDiv.getBoundingClientRect().top

// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456

HTML5全屏

function fullscreen(element) {

if (element.requestFullscreen) {

element.requestFullscreen()

} else if (element.mozRequestFullScreen) {

element.mozRequestFullScreen()

} else if (element.webkitRequestFullscreen) {

element.webkitRequestFullscreen()

} else if (element.msRequestFullscreen) {

element.msRequestFullscreen()

}}

fullscreen(document.documentElement)12345678910111213

采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。

CSS:

.main

{

width:

100%

margin-top:

100px

text-align:

center

font-size:

12.5px

}

th,

{

border:

1px

solid

#ccc

line-height:

40px

padding-left:

5px

}

.item:hover

{

background-color:

#efefef

}

.item:nth-child(2n)

{

background-color:

#efefef

}

.ListView

{

width:

600px

overflow:

hidden

margin:

auto

padding:

10px

height:372px

border:

1px

solid

#dddddd

}

.ListView

{

width:

1200px

margin:

auto

border-collapse:

collapse

}

.Item

{

border-bottom:

1px

dashed

#dddddd

padding:

10px

overflow:

hidden

margin-left:600px

}

.Item

span

{

float:

left

text-align:

left

}

.Item

span:first-child

{

color:

#6AA8E8

}

.Item

span:last-child

{

text-align:

center

}

HTML

<div

class="main">

<div

class="ListView">

<div

class="c">

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

<div

class="Item">

</div>

style="text-align:center"><a

href="javascript:void(0)"

onClick="ListView.Update()">刷新数据</a></p>

<script

type="text/javascript"

src="/js/jquery-1.8.0.min.js"></script>

<script

type="text/javascript">

$(function(){

ListView.Init()

})

var

ListView={

Init:function(){

$(".Item

span").css("width",$(".ListView").width()/4+"px")

for(var

i=0i<$(".Item").lengthi++){

var

target=$(".Item")[i]

$(target).animate({marginLeft:"0px"},300+i*100)

}

Update:function(){

$(".ListView

.Item").remove()

for(var

i=0i<10i++){

var

newItem=$("<div

class=\"Item\">

</div>")

$(newItem).find("span").css("width",$(".ListView").width()/4+"px")

$(".ListView

.c").append(newItem)

$(newItem).animate({marginLeft:"0px"},300+i*100)

}

</script>

附上演示效果

http://demo.jb51.net/js/2015/jquery-dtlb

效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码

下面的代码主要是控制滚动条下拉时的加载事件的

在下面代码说明出，写上你的操作即可，无论是加载图片还是加载记录数据

都可以

别忘了引用jquery类库

$(window).scroll(function

()

{

var

scrollTop

$(this).scrollTop()

var

scrollHeight

$(document).height()

var

windowHeight

$(this).height()

(scrollTop

windowHeight

scrollHeight)

{

//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

//var

page

Number($("#redgiftNextPage").attr('currentpage'))

//redgiftList(page)

//$("#redgiftNextPage").attr('currentpage',

page

}

})

解析：

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop

clientHeight

scrollHeight。（兼容不同的浏览器）。

可以使用第三方的控件Developer-Express来实现；

安装完Developer以后，从工具箱中拖一个ASPxLoadingPanel到页面中，设置必须的一个属性ClientInstanceName后面要用到，然后设置Modal的作用是点击按钮时时候需要抑制后面按钮的使用，也就是弹出来一个灰色的层。

重点是后面的js，在body中添加下面的JS代码

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler)

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler)

function BeginRequestHandler(sender, args) {

loading.Show()

}

function EndRequestHandler(sender, args) {

loading.Hide()

}

</script>

至此，页面中的所有按钮就加上了一个加载等待的效果。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：急求这个网站花瓣飘落的css???

# 下一篇：css选择器最常用的类型

推荐阅读

热门文章

最新发布

标签列表

前端开发中常用到的js特效有哪些

给您推荐相同类型的内容：