Javascript特效：长图滚动

知识点

background-color: transparent 设置透明
凡是由监听事件引起的定时器，一定要遵循先清后设

运行效果

在红线（中线）往上区域，图片往上走
在红线（中线）往下区域，图片往下走

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;list-style: none;}body{background-color: #000;}#box{width: 750px;height: 400px;border: 10px solid red;margin: 100px auto;overflow: hidden;position: relative;}#pic{position: absolute;left: 0;top: 0;}#to_top, #to_bottom{width: 100%;height: 50%;position: absolute;left: 0;cursor: pointer;background-color: transparent;}#to_top{top: 0;}#to_bottom{bottom: 0;}</style>
</head>
<body>
<div id="box"><img id="pic" src="data:images/timg.jpg" alt=""><span id="to_top"></span><span id="to_bottom"></span>
</div><script>window.onload = function (ev) {// 1. 获取标签var box = document.getElementById('box');var pic = document.getElementById('pic');var to_top = document.getElementById('to_top');var to_bottom = document.getElementById('to_bottom');var intervalId, num = 0;// 2. 监听鼠标进入事件// 向上to_top.onmouseover = function (ev1) {// 2.1 清除定时器clearInterval(intervalId);// 2.2 设置定时器intervalId = setInterval(function () {// 步长num -= 10;// 判断if(num > -2466){pic.style.top = num + 'px';}else {clearInterval(intervalId)}},20);};// 向下to_bottom.onmouseover = function (ev1) {// 2.1 清除定时器clearInterval(intervalId);// 2.2 设置定时器intervalId = setInterval(function () {// 步长num += 10;// 判断if(num <= 0){pic.style.top = num + 'px';}else {clearInterval(intervalId)}},20);};// 鼠标离开box.onmouseout = function (ev1) {// 清除定时器clearInterval(intervalId)}}
</script>
</body>
</html>

Javascript特效：长图滚动相关推荐

【Android 内存优化】自定义组件长图组件 ( 长图滚动区域解码 | 手势识别 GestureDetector | 滑动计算类 Scroller | 代码示例 )
文章目录一.GestureDetector 创建与设置二.GestureDetector 触摸事件传递三.触摸滑动操作四.惯性滑动操作五.长图滑动组件代码示例六.运行效果七.源码及资源下 ...
Android加载长图，仿微博长图滚动查看
/** * Created by sunrui on 2017/3/8. * 加载长图片 * 解决步骤 * 1.将图片缩放到与控件等宽 * 2.判断缩放后的图片高度,如果高度大于控件高度较多(这里设置 ...
html长图滚动,Axure教程：长页或长图滚动效果
如何利用Axure快速实现长页手动拖拽特效呢?本文在这里为大家奉上了详细教程,enjoy~ 很久之前在一篇文章中通过文字回复过,利用Axure快速实现长页手动拖拽特效的方式.后续陆续有私信问具体怎么做 ...
win10系统picpick截图工具自动滚动截长图方法
描述:win10系统picpick截图工具自动滚动截长图方法步骤: 使用截图工具,使用顶部菜单栏,选择截取滚动窗口功能此时会自动识别滚动窗口,单机滚动条,即可自动滚动,如果只滑动一次就结束了,请将 ...
【Tools】macOS 截图工具推荐xnip（滚动截图截长图、步骤截图）
20181113截图工具先用了腾讯的snip,滚动截图我在chrome和别的软件下测试下没成功.而且需要修改辅助功能. xnip实现的原理似乎是鼠标滚动时软件自己拼接图片. 此外,xnip的步骤截屏非 ...
网页界面滚动截图(长图)的三种实用方法总结
简言有些时候我们需要把整个网页的截图下来进行保存存档,但是像微信QQ等工具也只能截取看到的部分.当我们要截取的部分比价大时,这里在网上统计了三个简单方法,来和大家分享一下: QQ默认为Ctrl+Al ...
Snagit for Mac 如何截取长图，滚动截图？
困扰我很久了,为了在mac上截取长图,今天终于成功了. 如下图: 第一步:选择image. 第二步:Selection选择Panoramic,就是选择滚动截图的意思. 第三步:到达你想要滚动截图,也就 ...
谷歌浏览器怎么长截图怎么截_chrome长截图如何操作_chrome怎么滚动截长图-win7之家...
在使用chrome浏览器搜索网页的时候,常常会遇到一些篇幅较大的文章,这时有些用户可能不想要通过收藏网址将其保存下来的时候就可以通过截取长图的方式保存自己想要的部分,那么chrome怎么滚动截长图呢? ...
Android滚动截屏，ScrollView截屏，Listview截屏，Recyclerview截屏, 截长图
最近在做一个关于截频的功能, 恰逢鸿洋大神分享了一篇相关的博客, 我使用之后觉得甚是好用, 所以也整理了一下,以供学习. 在做分享功能的时候,需要截取全屏内容还有截长图,一屏展示不完的内容,一般我们会 ...
android 拖动截图,【UNIAPP截长图】方案之一：滚动截屏 Android
实现思想:主动滚动一段距离,截一个图,然后裁剪拼接关键步骤: 1.截长图准备 2.截取图片组 3.拼接长图片 1.截长图准备 preparePicture() 获取屏幕可用宽高,页面宽高,及页面底部 ...

Javascript特效：长图滚动

知识点

运行效果

代码

Javascript特效：长图滚动相关推荐

最新文章

热门文章