javascript控制图片播放的实现代码


Posted in Javascript onJuly 29, 2020

一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。

分享代码如下:

<html">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>javascript控制图片或div层的上下移动滚动效果</title>
</head>

<body>

<a href="javascript: void(0);" onmouseover="ScrollDivUp_T=setInterval(ScrollDivUp,10);" onmouseout="clearInterval(ScrollDivUp_T)">上</a>
<div id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
 图片1...<br />
 图片2...<br />
 图片3...<br />
 图片4...<br />
 图片5...<br />
 图片6...<br />
 图片7...<br />
 图片8...<br />
 图片9...<br />
 图片10...<br />
 图片11...<br />
 图片12...<br />
 图片13...<br />
 图片14...<br />
 图片15...<br />
 图片16...<br />
 图片17...<br />
 图片18...<br />
 图片19...<br />
 图片20...
</div>
<a href="javascript: void(0);" onmouseover="ScrollDivDown_T=setInterval(ScrollDivDown,10);" onmouseout="clearInterval(ScrollDivDown_T)">下</a>
<script language="javascript">
 function ScrollDivUp(){document.getElementById('items').scrollTop -= 1;}
 function ScrollDivDown(){document.getElementById('items').scrollTop += 1;}
</script>

</body>

</html>

运行效果图:

javascript控制图片播放的实现代码

以上就是实现javascript控制图片滚动的效果,希望大家可以喜欢。

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 #Javascript
Javascript实现鼠标右键特色菜单
Aug 04 #Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 #Javascript
常用的Javascript数据验证插件
Aug 04 #Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 #Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 #Javascript
基于ajax实现文件上传并显示进度条
Aug 03 #Javascript
You might like
php时间不正确的解决方法
2008/04/09 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Python 实现微信自动回复的方法
2020/09/11 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
保安员岗位职责
2013/11/17 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
追悼会主持词
2014/03/20 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
python lambda 表达式形式分析
2022/04/03 Python