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 ...
随机推荐
- Chapter 2 Open Book——35
Mr. Banner called the class to order then, and I turned with relief to listen. Banner先生让大家安静听他说,然后我静 ...
- maven 3.3.9-bin 和 maven 3.3.9-src 的区别 以及 maven安装包的 .tar.gz后缀与.zip 后缀的区别
(maven 3.3.9-bin)一个是class的文件包,由java文件编译成的,(maven 3.3.9-src )一个是java文件包即是源码(.tar.gz后缀)是linux的压缩包,(.zi ...
- LWP::UserAgent介绍2
#这个LWP::UserAgent一般要配合其他模块使用 #比如: #HTTP::Request #HTTP::Cookie #HTTP::Respose #HTTP::Status #LWP::Us ...
- New Year Tree 【DFS序+先段数区间查询修改+二进制保存状态】
题目链接[http://codeforces.com/problemset/problem/620/E] 题意:给出n个数,每个数有一个初始的颜色.由这n个数组成一颗树.有两种操作1.将以节点u为根的 ...
- 《精通CSS》——个人总结
[属性选择器] 属性选择器可以根据某个属性是否存在或属性的值来寻找元素. 只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器.在 IE6 及更低的版本中,不支持属性选择. 事例: ...
- 使用PHP连接redis后，timeout连接太多的解决方案
这个问题,大家在使用php redis之后肯定都会遇到.所以本菜本着虚心求教的原则,又在网上四处求教.得到的答案,无非是以下两种: 1.redis没有主动close. 事后发现,这个答案纯属以讹传讹, ...
- 查看源码利器之sublime text 3 配置 Ctags 插件
最近在看源码的时候发现sublime text 3是很给力的一款软件,小巧精致,这里着重讲解一下Ctags协助编译和跟踪函数 一.安装Package Control (如果Preferences &g ...
- 2014最热门、最具争议的10个Java话题
Java 的哪些内容已在2014年死去,Java 的哪些变更又遭到整个Java社区的竭力反对?请随我们一起来回顾在2014年这个多事之秋中Java都发生了哪些变化,以及小伙伴们都在JAXenter热烈 ...
- ZOJ 1655 FZU 1125 Transport Goods
迪杰斯特拉最短路径. 1.every city must wait till all the goods arrive, and then transport the arriving goods t ...
- Number String
Number String 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4055 dp 定义状态:dp[i][j]为当strlen=i,数字结尾为j的 ...