javascript焦点图之垂直滚动
html代码布局,需要用到定位,不细说了
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} #Div {
width: 100px;
height: 300px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
} #ptoBox {
width: 100px;
height: 400px;
top: -100px;
position: absolute;
} #ptoS {
list-style-type: none;
} .base {
width: 100px;
height: 100px;
} .base1 {
background: red;
} .base2 {
background: blue;
} .base3 {
background: pink;
} .base4 {
background: red;
} #btn1 {
position: absolute;
width: 30px;
height: 20px;
background: yellow;
top: 0px;
left: 35px;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
} #btn2 {
position: absolute;
width: 30px;
height: 20px;
background: yellow;
bottom: 0px;
right: 35px;
opacity: 0.5;
filter: alpha(opacity=50);
cursor: pointer;
}
</style>
</head> <body id="one">
<div id="Div">
<div id="ptoBox">
<ul id="ptoS">
<li class="base base3">three</li>
<li class="base base1">one</li>
<li class="base base2">two</li>
<li class="base base3">three</li>
<li class="base base4">one</li>
<li class="base base2">two</li>
<li class="base base3">three</li>
<li class="base base4">one</li>
</ul>
</div>
<span id="btn1"></span>
<span id="btn2"></span> </body> </html>
javascript的代码记得放在 body里面,也就是html代码下方
这个是垂直滚动的焦点图,用的是onmousedown,鼠标按住图片会一直循环滚动
因为同时显示三张图片,所以需要一套图片需要备两组用来循坏
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
//自定义变量
var Div = $("Div");
var ptoBox = $("ptoBox");
var ptoS = $("ptoS").getElementsByTagName("li");
var btnTop = $("btn1");
var btnBottom = $("btn2");
var time = null;
var index = 1; //alert("body"); //鼠标点下绑定事件
btnBottom.onmousedown = function() {
//调用自定义函数,并传参
rolling1(ptoBox, 'top', 1);
} //鼠标松开绑定事件
btnBottom.onmouseup = function() {
//清除定时器
clearInterval(timer);
//调用自定义函数,并传参
nowPto(ptoBox, 'top');
} /*body.onmouseup = function() {
clearInterval(timer);
}*/ btnTop.onmousedown = function() {
rolling(ptoBox, 'top', -1);
} btnTop.onmouseup = function() {
clearInterval(timer);
nowPto(ptoBox, 'top');
} //判定当前显示图片
function nowPto(obj, iStyle) {
//获得传入参数的属性的数值
var iTop = parseInt(getStyle(obj, iStyle));
//取余数
var value = iTop % 100;
//当余数大于-50则,显示当前整张图片
//当小于-50时,则跳过本张图片
if (value > -50) {
obj.style[iStyle] = iTop - value + 'px';
} else {
obj.style[iStyle] = iTop - (value + 100) + 'px';
}
} //自减函数
function rolling(obj, iStyle, speed) {
//设置定时器,每10毫秒执行一次
timer = setInterval(function() {
//获取当前ptoBox的top值
var iValue = parseInt(getStyle(obj, iStyle));
//当top值小于-500,则当前的top值变成-200
if (iValue <= -500) {
obj.style[iStyle] = -200 + 'px';
} else {
//否则,减少1像素
obj.style[iStyle] = iValue + speed + 'px';
} }, 10); } //自增函数
function rolling1(obj, iStyle, speed) {
//定时器
timer = setInterval(function() {
//获取当前ptoBox的top值
var iValue = parseInt(getStyle(obj, iStyle));
//当top值大于0,则当前的top值变成0
if (iValue >= 0) {
obj.style[iStyle] = -300 + 'px';
} else {
//否则,增加1像素
obj.style[iStyle] = iValue + speed + 'px';
}
}, 10); } function start() {
btnBottom.onmousedown();
} function stop() {
clearInterval(timer);
}
//鼠标进入,则清除定时器
Div.onmouseenter = stop;
//鼠标离开,则开始执行循环
Div.onmouseleave = start;
start(); function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
</script>
</div>
<script src="changfunction.js"></script>
javascript焦点图之垂直滚动的更多相关文章
- javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...
- javascript焦点图自动缓冲滚动
html中调用的js库,之前的随笔中有写,就不细说了,不明白的可以留言给我 <!DOCTYPE html> <html> <head> <meta chars ...
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- javascript焦点图(根据图片下方的小框自动播放)
html和css就不详细说明了,也是简单布局,通过定位把跟随图片的小框,定位到图片下方 <!DOCTYPE html> <html> <head> <meta ...
- javascript焦点图左右按钮简单自动轮播
这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- 使用jQuery仿淘宝商城多格焦点图滚动切换效果
1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
- JavaScript基础 -- 焦点图轮播(转载)
首先将HTML结构搭建好: <div id="container"> <div id="list" style="left: -60 ...
随机推荐
- 安卓平台 全面支持软解和硬解的SDK-Demo源代码开放
专业做视频编解码的SDK开发工作. 2015年12月1日10:46:55: 更新到1.5.0版本 功能列表: 基本播放: 1,正常播放, 支持MP4,FLV,AVI,TS,3GP,RMVB,WM,WM ...
- php强制下载文件并显示原始文件名
原来一直没有接触过,这几天一直在玩儿文件上传下载的东西.今天又遇到一个坑. 描述:文件上传至服务器后,如果是rar或则其他的非浏览器直接识别的格式,用户点击链接了后是可以直接就被下载下来的.那么如果上 ...
- layer ifram 弹出框
父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button ...
- 【NOIP2006提高组】能量项链
说好的好好写人话的题解 嗯很多题解都说过这是一个石子合并的模型它也确实就是一个石子合并的模型.然而就算这样我也不会写最后仍然写了个记忆化搜索 首先我们不论环状,就直接一条链型,当只剩下两个珠子的时候, ...
- webp图片详解
WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使 ...
- IBM Minus One
IBM Minus One Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- 查看JS object 结构
function lookProperty(obj){ var ob=eval(obj); var property=""; for(var p in ob){ property+ ...
- ubuntu开放防火墙端口
root@jbxue:$ sudo ufw enable Firewall started and enabled on system startup root@jbxue:$ sudo ufw ...
- sql第一天
关系数据库中的关系指的就是表 table 表 Column 列 Field 字段 Row 行 非空约束 not null 主键约束(PK)primary key constraint 唯 ...
- Openlayer 3 的点击弹出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...