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 ...
随机推荐
- 【IIS】windows2008 ii7 设置访问网站提示帐号密码登录
3个步骤: 1.添加windows身份验证: windows2008默认是不启用的,需要我们自己去启动,在管理工具 - 服务器管理- 角色 ,拉下去,下面有个[添加角色服务],安全性- Windows ...
- Opencv+MFC获取摄像头数据，显示在Picture控件
分为两步:OpenCV获取摄像头数据+图像在Picture上显示 第一步:OpenCV获取摄像头数据 参考:http://www.cnblogs.com/epirus/archive/2012/06/ ...
- delphi变量作用域
完全摘自网络(一件飘雪),供参考: 很多初学者对delphi单元的变量和函数访问权限不理解,在此我举例说明,希望初学者看此文后能茅塞顿开. delphi单元的变量和函数访问权限问题如下两个单元描述: ...
- Lua: 给 Redis 用户的入门指导
转自:http://www.oschina.net/translate/intro-to-lua-for-redis-programmers 可能你已经听说过Redis 中嵌入了脚本语言,但是你还没有 ...
- 关于oracle数据库（11）
事务 事务是最小的工作单元,是对数据库的若干操作,增删查改(要不就都成功,要不就都失败) 在oracle数据库中,事务是默认打开的,其他数据库都需要一条语句来打开事务,默认关闭的 事务的特征 原子性. ...
- HDU 5862 Counting Intersections(离散化+树状数组)
HDU 5862 Counting Intersections(离散化+树状数组) 题目链接http://acm.split.hdu.edu.cn/showproblem.php?pid=5862 D ...
- 理解iaas paas saas三种云服务区别
其实搞懂这个问题也不难,我们可以把云计算理解成一栋大楼,而这栋楼又可以分为顶楼.中间.低层三大块.那么我们就可以把Iass(基础设施).Pass(平台).Sass(软件)理解成这栋楼的三部分.基础设施 ...
- Myeclipse2014中，新建部署Maven项目
一.环境 1.1 myeclipse2014 1.2 maven3.2.1 1.3 jdk1.7 上述环境配置可参照我之前编写的maven搭建方面的文档.本文着重介绍myeclipse2014下mav ...
- Multi-Objective Data Placement for Multi-Cloud Socially Aware Services---INFOCOM 2014
[标题] [作者] [来源] [对本文评价] [why] 存在的问题 [how] [不足] assumption in future work [相关方法或论文] [重点提示] [其它]
- jfinal获取服务器的IP和端口
String serverIp = getRequest().getServerName(); Integer serverPort = getRequest().getServerPort();