1. 最近在用纯H5做边框向右和向左缓慢弹出效果

由于是保密项目，最近一个项目没有用Jquery,而用纯H5和js，实现点击红色div区域实现向左右移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var timer;function fun1() {clearInterval(timer);var odiv = document.getElementById("myDiv");if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {timer = setInterval(function () {odiv = document.getElementById("myDiv");if (odiv.offsetLeft === 0 || odiv.offsetLeft > 0) {clearInterval(timer);return;}odiv.style.left = odiv.offsetLeft + 5 + "px";}, 10)}if (odiv.offsetLeft >= 0 || odiv.offsetLeft === 0) {timer = setInterval(function () {odiv = document.getElementById("myDiv");if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {clearInterval(timer);return;}odiv.style.left = odiv.offsetLeft - 5 + "px";}, 10)}}</script>
</head>
<body>
<div style="position:relative;background: #190712;margin-left: 200px;width: 500px;height: 500px"><div onclick="fun1()" id="myDiv" style="width: 100px;height: 100px;background: red;position: absolute;left: -100px"></div>
</div>
</body>
</html>

2.如果用Jquery更简单，自带动画函数

下面代码是让myDiv在2s内left移动到0

  $("#myDiv").animate({left: "0"}, 2000)

H5 div移动效果相关推荐

基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
php div中的字上下居中,Div垂直居中效果怎么实现
本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
心知天气Android开发,H5 实现天气效果(心知天气插件)
H5 实现天气效果(心知天气插件) H5 实现天气效果(心知天气插件) 先上效果图鼠标移上去的效果展示核心代码如下: (function(a,h,g,f,e,d,c,b){b=function() ...
CSS鼠标滑过div上移效果
CSS鼠标滑过div上移效果 css鼠标滑过div向上移动效果主要用到c3的transform属性该属性允许我们对元素进行旋转缩放倾斜或移动 1.效果展示 2.html代码 <body& ...
基于javascript的div浮动效果代码
今天接到一个添加网页图片浮动的任务,花了一中午的时间进行了学习和编码,实现了两种方式的图片浮动,这里把遇到的问题和解决的方法做一个总结. 两种实现分别为:1)Z字形浮动 2)反弹浮动: 具体来说,需 ...
H5 div 居中显示
H5 div 居中显示文章目录 H5 div 居中显示推荐:[浏览器同步测试工具](http://www.browsersync.cn/#install) H5 引入外部CSS文件 div居中显示 ...
html怎么设置随鼠标移动,CSS_css实现随鼠标移动div渐变色效果，HTML 复制代码代码如下:div - phpStudy...
css实现随鼠标移动div渐变色效果 HTML 复制代码代码如下: CSS 复制代码代码如下: body{ background:#ecf0f1; } .art{ width:400px; margi ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...

H5 div移动效果

H5 div移动效果

1. 最近在用纯H5做边框向右和向左缓慢弹出效果

2.如果用Jquery更简单，自带动画函数

H5 div移动效果相关推荐

最新文章

热门文章