图片的上下滑动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.xiaomi{
width: 512px;
height: 400px;
border: 1px solid #f00;
margin: 100px auto;
overflow: hidden;
position: relative;
}

.xiaomi span{
display: block;
position: absolute;
left: 0;
width: 100%;
height: 100px;
background-color: rgba(0,0,0,.2);
cursor: pointer;
}
.up{
top: 0;
}
.down{
bottom: 0;
}
#pic{
position: absolute;
top: 0;
left: 0;
}

</style>
</head>
<body>
<div class="xiaomi">
<img src="mi.png" alt="图片有问题" id="pic" />
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
</html>

<script>
//对应的id函数
function $(id){
return document.getElementById(id);
}

var num = 0 ; //控制图片的top值
var timer = null ;//定时器的名称

//在当前的额picUp的id选择器的范围内
$("picUp").onmouseover = function(){
clearInterval(timer);

timer = setInterval(function(){
num -= 3;
num >= -1070 ? $("pic").style.top = num + "px" : clearInterval(timer);
},30)

}

//在当前的额picDown的id选择器的范围内
$("picDown").onmouseover = function(){
clearInterval(timer); //排它思想
timer = setInterval(function(){
num +=3;
num < 0 ? $("pic").style.top = num + "px" : clearInterval(timer);
},30)

}

//没有遮罩层的父节点让它停止定时器
$("picUp").parentNode.onmouseout = function(){
clearInterval(timer);
}

</script>

时间: 2024-10-04 20:27:46

图片的上下滑动的相关文章

jQuery左侧图片右侧文字滑动切换代码

分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index-new w1200 mt30"> <div class="indexadd mt50 mb60"> <div id="banners" class="ui-banner"> <

展示图片和平移滑动

实现展示图片和平移滑动 需求 在展示框内展示图片,并通过左右按钮平滑的向左向右滑动展示 思路 创建一个外层容器 内层定义使用 transition 进行滑动 点击左右按钮时计算左右滑动距离 使用translateX 进行偏移 完整代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

实现图片向左滑动

<body> <!--页面布局,图片左上边距设为0,设置绝对定位,给按钮足够的上边距,以免被覆盖--> <div> <img src ="wolf.jpg" id = "image" style = "position:absolute;top:0;left:0px"/> <input type = "button" id = "slide" style

Android随笔--使用ViewPager实现简单地图片的左右滑动切换

Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/

让图片DIV竖向滑动的JavaScript特效代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-T

Gallery实现图片文字左右滑动

明天周六了,又可以睡懒觉了 毕业快五个月了,进入社会的赶脚就是不一样,事实证明,我很倔强,倔强到别人很难改变我,我只做我喜欢的事情,这段时间静下来学习,感觉挺好,大学都没这个认真过,因为有梦想,所以要前行,这样的生活状态,还是比较喜欢的,我从一个什么都不会的门外汉,到现在自己研究源码,一切都很惬意,也很开心,我愿意去做,我喜欢去做,只要能提升,不管提升的是什么,只要有价值就好,减少做没有意义的事情... 最近都是在维护之前写的代码,闲散的时间比较多,一般都是在学习,看到群里有求助的就去回答,让我

【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片

业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片  index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时间duration:滑动动画的时长current:当前所在的页面bindchange:current 改变时会触发 change 事件由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式 index.wxml : <scroll-view scroll-y="

Boostrap轮图片可以左右滑动

记得引用Boostrap的js和css html代码: <div id="Mycarousel" class="carousel slide col-md-12" data-ride="carousel" data-interval="4000" > <!-- 底部的指示小圆点--> <ol class="carousel-indicators"> <li data

django图片验证码和滑动验证

1. django-simple-captcha 模块 安装 django-simple-captcha pip install django-simple-captcha pip install Pillow 注册 和注册 app 一样,captcha 也需要注册到 settings 中.同时它也会创建自己的数据表,因此还需要数据同步. # settings.py INSTALLED_APPS = [ ... 'captcha', ] # 执行命令进行数据迁徙,会发现数据库中多了一个 capt