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 相关文章推荐
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
JS判断数组那点事
Oct 10 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
两种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数组查找函数总结
2014/11/18 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
python实现自动重启本程序的方法
2015/07/09 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python 列表的清空方式
2020/01/13 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Python基于内置函数type创建新类型
2020/10/22 Python
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
人事档案接收函
2014/01/12 职场文书
2015年个人思想总结
2015/03/09 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python