DOM操作中创建一个dom片段的方法,dom创建新元素
本文为您带来了一些关于javascript的知识，包括一些关于操纵dom元素来添加动画效果的问题。来看看吧，希望对你有帮助。
【相关推荐：javascript视频教程，web前端】
DOM动画效果
让一个元素从左向右移动div id= box /div var box=document . getelementbyid( box )；
var t=null
t=setInterval(function(){
})
运动的终止条件
t=setinterval(function(){终止条件})
//元素的属性值===目标点
if(dom.attr===target){
间隙(t)；
}
运动的三要素
起点
目标
速度
运动的底层原理
让元素通过计时器在短时间间隔内更改CSS属性值。这种连续运动对用户来说是一种动画效果
DOM动画效果封装
封装的主要作用就是让元素可以在短时间间隔内不断改变属性实现动画效果
单属性运动框架：
按钮id=btn 开始运动/按钮
div id=box/div
div id=line/div
脚本
var box=document . getelementbyid( box )；
var BTN=document . getelementbyid( BTN )；
var目标=500；
//可以根据起点和目标点判断速度，从而确定正反；
var速度=17；
//-方向；
btn.onclick=function(){
//1.获取元素的初始位置；
var _ left=box.offsetLeft
速度=目标- _left=0？速度：-速度；
var interval=setInterval(function(){
//4.确定运动的终止条件；
if(math . ABS(target-_ left)=math . ABS(speed)){
//因为终止时可能达不到目标点，所以我们把元素赋给目标点位置；
box . style . left=target px ；
clearInterval(区间)；
}否则{
//2.元素根据初始位置改变；
_left=速度；
//3.DOM操作，根据已有数据改变元素属性；
box . style . left=_ left px ；
}
} , 30)
}
/script包脚本匀速运动//-提取属性名作为参数；btn.onclick=function(){
animate( left ，500)}函数animate( attr，target，speed=10 ){
//1.获取元素的初始样式
var _ style=getComputedStyle(box)；
//2.根据属性要求，取出当前属性的属性值；
var _ CSS _ style=parse int(_ style[attr])；
speed=target - _css_style=0？速度：-速度；
var interval=setInterval(function(){
//4.确定运动的终止条件；
if(math . ABS(target-_ CSS _ style)=math . ABS(speed)){
//因为终止时可能达不到目标点，所以我们把元素赋给目标点位置；
box.style[attr]=目标 px ；
clearInterval(区间)；
}否则{
//2.元素根据初始位置改变；
_ css _ style=speed
//3.DOM操作，根据已有数据改变元素属性；
box . style[attr]=_ CSS _ style px ；
}
}，30)}/脚本兼容透明脚本函数animate (DOM，attr，target，speed=10) {
//1.获取元素的初始样式
var _ style=getComputedStyle(DOM)；
//2.根据属性要求，取出当前属性的属性值；
if( attr===opacity){
var _ CSS _ style=parse int(_ style[attr]* 100)；
目标*=100；
}否则{
var _ CSS _ style=parse int(_ style[attr])；
}
speed=target - _css_style=0？速度：-速度；
var interval=setInterval(function(){
//4.确定运动的终止条件；
if(math . ABS(target-_ CSS _ style)=math . ABS(speed)){
//因为终止时可能达不到目标点，所以我们把元素赋给目标点位置；
if( attr===opacity){
DOM . style[attr]=target/100；
}否则{
DOM . style[attr]=target px ；
}
clearInterval(区间)；
}否则{
//2.元素根据初始位置改变；
_ css _ style=speed
//3.DOM操作，根据已有数据改变元素属性；
if( attr===opacity){
DOM . style[attr]=_ CSS _ style/100；
}否则{
DOM . style[attr]=_ CSS _ style px ；
}
}
}，30)}/脚本缓冲运动缓冲运动是一种运动方式，就是在运动过程中速度会发生变化。运动距离越小，速度越小。按钮id=btn 开始运动/按钮
div id=box/div
脚本
var box=document . getelementbyid( box )；
var BTN=document . getelementbyid( BTN )；
btn.onclick=function(){
动画(框，“左”，500)
}
函数animate( dom，attr，target，transition=buffer ，speed=10 ){
var _ style=getComputedStyle(DOM)；
if( attr===opacity){
var _ CSS _ style=parse int(_ style[attr]* 100)；
目标*=100；
}否则{
var _ CSS _ style=parse int(_ style[attr])；
}
if( transition===liner){
speed=target - _css_style=0？速度：-速度；
}
var interval=setInterval(function(){
if( transition===buffer){
//计算速度；
速度=(target-_ CSS _ style)/10；
//如果速度不四舍五入，小数部分会做很多无意义的计算；
速度=速度0？Math.ceil(速度):Math.floor(速度)
}
if(math . ABS(target-_ CSS _ style)=math . ABS(speed)){
//因为终止时可能达不到目标点，所以我们把元素赋给目标点位置；
if( attr===opacity){
DOM . style[attr]=target/100；
}否则{
DOM . style[attr]=target px ；
}
clearInterval(区间)；
}否则{
//2.元素根据初始位置改变；
_ css _ style=speed
//3.DOM操作，根据已有数据改变元素属性；
if( attr===opacity){
DOM . style[attr]=_ CSS _ style/100；
}否则{
DOM . style[attr]=_ CSS _ style px ；
}
}
} , 30)
}
/脚本
//只能通过改变transition inside的值来调整移动方式。
//buffer是缓冲运动。
//liner匀速运动
多属性运动框架 (拓展)
多属性运动框架。当我们多次调用animate时，我们将启动多个计时器。因为计时器中的数据是相同的，所以我们看不出效果上的差异。但是，多次启动计时器会极其严重地消耗计算机性能。启动当前计时器之前，请关闭上一个计时器脚本//。//在一个定时器中，使用for循环同时多次执行dom风格的操作；//1.要优化的部分：参数，样式部分的参数要优化成一个对象；函数animate( dom，attrs，transition=buffer ，speed=10 ){
var _ style=getComputedStyle(DOM)；
//获取元素的当前属性：
for(属性中的变量属性){
//attr？要转换的css属性名；
//attrs[attr]？要转换的当前属性；
attrs[attr]={
目标：attrs[attr]，
//将元素的当前属性放入该对象；
now : parseInt(_style[attr])
}
}
//因为直接关闭interval是没有用的，所以此时的interval是一个局部变量，每次调用animate都会直接复位；
//我们要把定时器的id放在当前正在进行转场效果的dom对象上；
clear interval(DOM . interval)；
DOM . interval=setInterval(function(){
for(属性中的变量属性){
//取出attrs中的目标点和当前值；
速度=(attrs[attr]。目标属性。现在)/10；
//根据正负速度对速度进行四舍五入；
速度=速度0？Math.ceil(速度):Math.floor(速度)；
//确定终止条件；
if( attrs[attr].target===attrs[attr]。现在){
//删除已经到达目标点的属性；
删除属性[属性]
//判定属性列表里面已经没有属性了；
对于(属性中的变量a){
返回错误的
}
清除间隔(DOM。区间)；
}否则{
属性[属性]。现在=速度；
dom.style[ attr ]=attrs[attr].现在的px’；
}
}
} , 30)}//优化参数之后，键值是等待运动的钢性铸铁属性，值值是元素的目标；btn.onclick=function(){
动画(box，{宽度：500，高度：400 } )}/script
轮播图功能实现
样式
*{
边距：0;
填充：0;
}。容器{
宽度：1130像素
高度：286像素
边距：0自动；
位置：相对；
溢出：隐藏；
}。包装{
宽度：6780像素
位置：绝对；
左：0;
}。幻灯片{
浮动：左；
}。滑动，幻灯片图像{
宽度：1130像素
高度：286像素
}。按钮-上一页{
左：0;
背景-位置：30px中心；
背景-图片：URL(https://静态。z酷。cn/git _ z/z/widget/slider/images/SVG/左箭头。SVG？v=2)；
top:0；
宽度：13px
身高：100%;
填充：0 80px
边框-半径：2px
位置：绝对；
背景-重复：不重复；
}。按钮-上一页：悬停{
背景-图片：URL(https://静态。z酷。cn/git _ z/z/widget/slider/images/SVG/left _ arrow悬停。SVG？v=2)；
}。按钮-下一步{
右：0;
背景-位置：91px中心；
背景-图片：URL(https://静态。z酷。cn/git _ z/z/widget/slider/images/SVG/右箭头。SVG？v=2)；
top:0；
宽度：13px
身高：100%;
填充：0 80px
边框-半径：2px
位置：绝对；
背景-重复：不重复；
}。按钮-下一个：悬停{
背景-图片：URL(https://静态。z酷。cn/git _ z/z/widget/slider/images/SVG/right _ arrow悬停。SVG？v=2)；
}。分页{
位置：绝对；
底层：10%;
宽度：100%;
高度：10px
左：30px
}。分页跨度{
显示：内嵌-块；
宽度：10px
高度：10px
左边距：10px
边界半径：50%;
背景色：矢车菊蓝色；
边框：2px纯色透明；
背景剪辑：内容框；
}。分页span.active{
边框：2px纯色天蓝色；
方框阴影：0 0 5px天蓝色；
背景色：# fff
}
/style！-类名请使用和我一样的类名-
div class=容器
div class=wrapper
！-第0张图片-
div class=slide
src= https://。z酷。cn/ad _ manager/location/f35d 611484931101 c 43350 bb DBD 5。jpg alt=
/div
div class=slide
src= https://。z酷。cn/ad _ manager/location/3d CB 6113 a 3471101 c 433505 bbd 72。jpg alt=
/div
div class=slide
src= https://。z酷。cn/ad _ manager/location/65f 36113 a 3341101 c 4335014 b 174。jpg alt=
/div
div class=slide
src= https://。z酷。cn/ad _ manager/location/7f 97611481181101 c 43350225 b 33。jpg alt=
/div
div class=slide
src= https://。z酷。cn/ad _ manager/location/afcf 6114801 e 1101 c 433507 f9e 28。jpg alt=
/div
！-最后一张图片-
！-把第0张图片放在整个图片结构的最后-
div class=slide
src= https://。z酷。cn/ad _ manager/location/f35d 611484931101 c 43350 bb DBD 5。jpg alt=
/div
/div
div class=button-next/div
div class=button-prev/div
div class=分页
span class=活动/span
span/span
span/span
span/span
span/span
/div
/div
脚本src= ./utils。js /脚本
脚本
//轮播图的核心就是左右切换按钮，实现显示元素下标的改变；
定义变量指数=0;
var prev=0；
var next _ BTN=文档。查询选择器(.按钮-下一步);
var prev _ BTN=文档。查询选择器(.button-prev’)；
var slides=文档。查询选择器全部(.幻灯片);
var wrapper=文档。查询选择器(.包装器);
//自动播放的阻止功能是在鼠标移入容器容器之中就触发的；
var容器=文档。查询选择器(.容器);
var项目符号=文档。查询选择器全部(.分页跨度);
//绑定事件
//- 轮播图改变下标功能必须设置边界；
函数bindEvent(){
next_btn.onclick=function(){
add()；
横幅animate()；
}
prev_btn.onclick=function(){
减少()
横幅animate()；
}
集装箱。onmouseover=function(){
stop()；
}
集装箱。onmouseout=function(){
autoPlay()；
}
bullets.forEach( function( ele，i ){
ele.onmouseover=function(){
上一次=指数；
//防止穿帮逻辑；
//- 如果在假的第0张图片上（在最后一张图片上)
//- 我们先让真假图片呼喊然后在进行元素的动画效果；
if( index===5 ){
包装纸。风格。左=0；
}
index=I；
横幅animate()；
}
})
}
//下标增加；
函数add(){
上一次=指数；
if( index===slides.length - 1 ){
//这个逻辑会在最后一张图片进行切换时进入；
//我们让包装材料直接位移到开头，改变元素位置的同时让用户无法感知；
包装纸。风格。左=0；
//我们需要从第0个图片切换到第一个图片；
//-因为我们最后一张图片的显示和开头图片的显示是一样的
指数=1;
}否则{
指数；
}
}
//下标减少；
函数reduce(){
上一次=指数；
if( index===0 ){
包装纸。风格。left=-(幻灯片。长度-1)* 1130 px ；
索引=幻灯片。长度-2；
}否则{
索引-;
}
}
//根据我们的算法去实现动画效果；
函数bannerAnimate(){
animate( wrapper，{ left:-index * 1130 })；
//给对应的分页器按钮添加活跃；
//先去清空所有的类名；
bullets.forEach( function( ele ){
ele.classList.remove(active )
})
//下标需要进行特殊处理，在显示最后一张图片的时候，给第0个按钮添加活跃；
项目符号[ index===5？0:索引)。班级名单。添加(“活动”)；
}
绑定事件()；
var间隔=空
函数自动播放(){
//间隔3s，让射流研究…点击一下下一页按钮；
interval=setInterval(function(){
//虚拟点击：
next_btn.dispatchEvent(新事件(‘咔嚓’))；
} , 3000 )
}
函数stop(){
间隙(间隔)
}
autoPlay()；
/script示例如下
项目背景:uniapp h5应用，为了提示用户下载，这里有个提示下载的多姆，本想来想在每个标签栏中添加（一共添加四个);但是想尝试换种玩法如下：效果如下:
直接上代码：
函数showDownloadTisp() {
console.log( - showDownloadTisp )
//#伊夫H5
const parent=文档。查询选择器(.单标签栏)
console.log(parent:，parent)
const tips=文档。createelement( p )
tips.id=downloadTisp
tips.setAttribute(style ，
背景：rgba(51，51，51，0.75)；
)
tips.setAttribute(style ，
`背景：rgba(51，51，51，0.75)；位置：固定；宽度：100%;身高：$ { uni。upx 2 px(120)} px；底部：$ { uni。upx 2 px(-140)} px；显示器：flex弯曲方向：行；justify-content:space-between；对齐-项目：居中；过渡：0.5秒
)
const desParent=document。createelement( p )
const des=文档。创建文本节点(下载我们的应用，你会得到更好的体验。)
desParent.appendChild(des)
desParent.setAttribute(style ，
`填充：0;颜色：# FFFFFFfont-size:$ { uni。upx 2 px(24)} px；左边距：$ { uni。upx 2 px(27)} px；右填充：$ { uni。upx 2 px(25)} px；`
)
const IOs image=文档。createelement(“img”)
iosImage.src=./静态/指南/下载ios.png的
iosImage.setAttribute(style ，
宽度：$ { uni。upx 2 px(154)} px；身高：$ { uni。upx 2 px(54)} px；右边距：$ { uni。upx 2 px(25)} px；`)
const anroidImage=document。createelement(“img”)
anroidImage.src=./静态/指南/下载android.png的
anroidimage。设置属性( style ，
宽度：$ { uni。upx 2 px(154)} px；身高：$ { uni。upx 2 px(54)} px；右边距：$ { uni。upx 2 px(50)} px；`)
const闭合图像=文档。createelement(“img”)
closedImage.src=./静态/指南/下载closd.png的
关闭图像。设置属性( style ，
宽度：$ { uni。upx 2 px(30)} px；身高：$ { uni。upx 2 px(30)} px；位置：绝对；右：$ { uni。upx 2 px(15)} px；top:$ { uni。upx 2 px(15)} px；填充：$ { uni。upx 2 px(5)}；`
)
tips.appendChild(desParent)
tips.appendChild(iosImage)
tips.appendChild(anroidImage)
tips.appendChild(closedImage)
iosImage.onclick=()={
//控制台。日志( IOs映像。onclick’)
窗户。位置。href= https://个应用。苹果。 com/cn/app/GBM 001/id 1574324240
//窗口。打开( https://www。百度一下。com/)
}
anroidImage.onclick=()={
//控制台。log( anroidimage。onclick’)
窗户。位置。https://play.google.com/store/apps/details？id=com.vandream.gbmpro
//窗口。打开( https://www。新浪。com。cn/)
}
closedImage.onclick=()={
控制台。日志( closedimage。onclick’)
tips.remove()
}
parent.parentNode.appendChild(提示)
//parent.appendChild(提示)
setTimeout(()={
小贴士。风格。transform=` translate y($ { uni。upx 2 px(-140)-50 } px)；`
//控制台。日志(提示。风格。转换完成’)
}, 2500)
//#endif
}
函数showDownloadTisp() {
//#伊夫H5
const parent=文档。查询选择器(.单标签栏)
//console.log(parent:，parent)
const tips=文档。createelement( p )
tips.id=downloadTisp
//tips.setAttribute(style ，
//背景：rgba(51，51，51，0.75)；
//)
//tips.setAttribute(style ，
//`背景：rgba(51，51，51，0.75)；位置：固定；宽度：100%;身高：$ { uni。upx 2 px(120)} px；底部：$ { uni。upx 2 px(-140)} px；显示器：flex弯曲方向：行；justify-content:space-between；对齐-项目：居中；过渡：0.5秒
//)
tips.setAttribute(style ，
`背景：rgba(51，51，51，0.75)；位置：固定；宽度：100%;身高：$ { uni。upx 2 px(120)} px；底部：50px显示器：flex弯曲方向：行；justify-content:space-between；对齐-项目：居中；过渡：0.5秒变换-原点：中心底部；转换：透视(900像素)rotateX(90度)；`
)
const desParent=document。createelement( p )
const de=文档。创建文本节点(下载我们的应用程序，您将获得更好的体验。)
附录子对象(des)
不透明。箭头属性(‘风格’，
`填充：0;颜色：#ffffff字体大小：$ { uni。upx 2 px(24)} px；左边距：$ { uni。upx 2 px(27)} px；右填充：$ { uni。upx 2 px(10)} px；是吗
)
const ioimage=document。创建元素( img ).
//ioimage。src=-什么/静态/向导/IOs。png下载
ioimage。src= 339 img。vanstream。62111506 cc。巴布亚新几内亚
iosimage。箭头属性(‘风格’，
`宽度：$ { uni。upx 2 px(154)} px；高度：$ { uni。upx 2 px(54)} px；右边距：$ { uni。upx 2 px(25)} px；`)
const an oid image=document。创建元素( img ).
//模拟图像。src=-什么/静态/向导/安卓。png下载
拟像。src= 339 img。vanstream。com/53/0330 f 45097465d巴布亚新几内亚
anroidimage。箭头属性(‘风格’，
`宽度：$ { uni。upx 2 px(154)} px；高度：$ { uni。upx 2 px(54)} px；右边距：$ { uni。upx 2 px(50)} px；`)
const close image=文档。创建元素( img ).
//关闭图像。src=-什么/静态/引导/下载关闭。巴布亚新几内亚
关闭图像。src= 339 img。vanstream。52/0330 f 523d 7709d。巴布亚新几内亚
关闭图像。setattribute( style )，
`宽度：$ { uni。upx 2 px(30)} px；高度：$ { uni。upx 2 px(30)} px；位置：绝对；右：$ { uni。upx 2 px(15)} px；top:$ { uni。upx 2 px(15)} px；填充：$ { uni。upx 2 px(5)}；是吗
)
tips.appendChild(不透明)
小贴士。appendchild(ioimage)
tips.appendChild(别名图像)
提示：appendChild
ioimage。onclick=()=>
控制台。日志( ioimage。onclick )"
窗户。位置。href= 339应用程序。苹果。 com/cn/app/GBM 001/id 1574324240
//窗口。打开( 339 www。百度一下。com/)
}
anroidimage。onclick=()构造函数
控制台。日志(一个oid映像。onclick )"
窗户。位置。href= 339播放。谷歌。com/store/apps/details？是吗？id=com。范德姆。gbmpro
//窗口。打开( 339 www。新浪。com。cn/)
}
关闭图像。onclick=()构造函数
控制台。日志(关闭图像。onclick )"
tips.remove()
}
parent.parentNode.appendChild(提示)
//parent.appendChild(提示)
setTimeout()
//提示。风格。transform= translately
(${uni.upx2px(-140) - 50}px);`
tips.style.transform = rotateX(0deg)
// console.log(" tips.style.transform done"):rotateX(90deg);
}, 2500)
// #endif
}【相关推荐：javascript视频教程、web前端】
以上就是实例详解之操作单个dom元素添加动画的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。