js实现4个方向滚动的球

2024-10-01 16:00:50

效果图：

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #wrap{
 width: 800px;
 height: 500px;
 border: 1px solid deeppink;
 margin-left: 10px;
 margin-top: 5px;
 float: left;
 }
 #input1{
 width: 80px;
 margin: 5px auto 5px 10px;
 font-size: 0;
 float: left;
 }
 #div1{
 width: 100px;
 height: 100px;
 background: hotpink;
 position: absolute;
 top: 20px;
 left: 30px;
 border-radius: 100px;
 box-shadow: 0px 5px 5px rgba(0,0,0,.5);
 }
 input{
 width: 100px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 font-size: 18px;
 display: block;
 background: palegreen;
 margin-bottom: 5px;
 }
 </style>
 </head>
 <body>
 <div id="wrap">
 <div id="div1"></div>
 </div>
 <div id="input1">
 <input type="button" value="向左" id="btn2" />
 <input type="button" value="向右" id="btn1"/>
 <input type="button" value="向上" id="btn3" />
 <input type="button" value="向下" id="btn4"/>
 </div>
 <script>
 var oBtn=document.getElementById('btn1');
 var oDiv=document.getElementById('div1');
 var oBtn2=document.getElementById('btn2');
 var oBtn3=document.getElementById('btn3');
 var oBtn4=document.getElementById('btn4');
 oBtn4.onclick=function(){
 move(oDiv,10,380,'0px 5px 5px rgba(0,0,0,.5)','top');
 }
 oBtn3.onclick=function(){
 move(oDiv,-10,30,'0px -5px 5px rgba(0,0,0,.5)','top');
 }
 oBtn2.onclick=function(){
 move(oDiv,-10,40,'-5px 5px 5px rgba(0,0,0,.5)','left');
 }
 oBtn.onclick=function(){
 move(oDiv,10,680,'5px 5px 5px rgba(0,0,0,.5)','left');
 }
 function move(obj,val,target,bs,dir){
 obj.style.boxShadow=bs;
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  var speed=parseInt(getStyle(obj,dir))+val;
  if(speed>=target&&val>0){
  speed=target;
  }
  if(speed<=target&&val<0){
  speed=target
  }
  obj.style[dir]=speed+'px';
  if(speed==target){
  clearInterval(obj.timer);
  }
 },30);
 }
 function getStyle(obj,sty){
 return obj.currentStyle?obj.currentStyle[sty]:getComputedStyle(obj)[sty];
 }
 </script>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

判断滚动条到底部的JS代码

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码代码如下: /
js实现的文字横向无间断滚动

我一开始想到的标签是<marquee>,因为它可以实现横向滚动.经理说它的起始位置从最右边出来的,能不能将它改成从中间出来,或者从最左边出来也行.查了相关资料,才知道<marquee>无法指定起始位置.后来在网上找到一段代码,它是用图片来实现的,我将图片改成文字之后,顺利地实现了我所想要的功能.代码如下: #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-fam
彻底搞懂JS无缝滚动代码

在做个东西要滚动代码而且是无缝的搞了半天还是不行决心一定要把这个问题搞定经过研究也不难代码如下: 程序代码复制代码代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> <table align=top> <tr> <td id=demo1 valign=top> <p>aaaaaaaaaa
原生js仿浏览器滚动条效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿浏览器滚动条</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;bord
浅析js 文字滚动效果

这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码代码如下: <div class="box" id="marqueebox0"> <ul> <li st
JS图片无缝、平滑滚动代码

非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht
js滚动条回到顶部的代码

虽然平滑性处理的不好,但非常适合学习复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="tex
js实现图片左右滚动效果

需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同. 前提条件:美工把静态页面写好 HTML代码: @using Models; @{ List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道 PagerModel pager = ViewData["pager"] as PagerMo
JS实现判断滚动条滚到页面底部并执行事件的方法

需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个
js实现4个方向滚动的球

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #wrap{ width: 800px; height: 500px; border: 1px solid deeppink; margin-left: 10px; marg
JS简单判断滚动条的滚动方向实现方法

本文实例讲述了JS简单判断滚动条的滚动方向实现方法.分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ var oScrollTop=$(window).scrollTop(); if ( oScrollTop > 80) { //write your code } if ( oScrollTop < 80) {
JS+HTML5手机开发之滚动和惯性缓动实现方法分析

本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法.分享给大家供大家参考,具体如下: 1. 滚动以下是三种实现方式: 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现 2)js 编程实现思路:对比手指在屏幕上移动前后位置变化
JS实现文字向下滚动完整实例

本文实例讲述了JS实现文字向下滚动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>京东.淘宝晒单</title> <style> @charset "
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)

**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆, **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置, **因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝&
JS实现倒计时和文字滚动的效果实例

本文实例讲述了JS实现倒计时和文字滚动效果的方法.分享给大家供大家参考.具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果.这里给大家分享一种实现倒计时和文字滚动的方法,希望可以对大家有所帮助.这里主要是通过js实现的. 一.倒计时效果的实现前台部分的完整代码如下: 复制代码代码如下: <html xmlns="http://www.w3.o
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=
js控制多图左右滚动切换效果代码分享

本文实例讲述了js控制多图左右滚动切换效果.分享给大家供大家参考.具体如下: 这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js控制多图左右滚动切换效果代码如下 <head> <meta http-equiv="Content-Type"
Unity UGUI实现卡片椭圆方向滚动

本文实例为大家分享了UGUI实现卡片椭圆方向滚动的具体代码,供大家参考,具体内容如下搭建简单的场景运行效果卡片移动动画通过插件DoTween实现控制脚本: using UnityEngine; using System.Collections; using UnityEngine.UI; using DG.Tweening; public class CardMove : MonoBehaviour { GameObject[] sprites; int halfSize; Vector
Vue.js实现大屏数字滚动翻转效果

大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

js实现4个方向滚动的球

相关推荐

随机推荐