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 ...
随机推荐
- ubuntu 14.04中文分词 结巴分词
在自然语言处理中,很常见的是要对文本数据进行分词处理.博主是代码小白,目前只是用python作为数据预处理的工具,而按照结巴中文分词的导语:做最好的python中文分词组件“jieba”.因而博主也就 ...
- DP! | 不要怂!
跟一个博客刷: http://blog.csdn.net/cc_again/article/details/25866971 一.简单基础dp 1.递推 HDU 2084 #include <b ...
- Xcode使用小结1
工程项目 -> General->launch Screen file这个如果没有设置,则app的可见范围为3.5inch(APP的可见范围是由启动界面决定的) PUSH方法是在navig ...
- Base64encode
一直以来Base64的加密解密都是使用sun.misc包下的BASE64Encoder及BASE64Decoder的sun.misc.BASE64Encoder/BASE64Decoder类.这个类是 ...
- hdu 3415 Max Sum of Max-K-sub-sequence(单调队列)
题目链接:hdu 3415 Max Sum of Max-K-sub-sequence 题意: 给你一串形成环的数,让你找一段长度不大于k的子段使得和最大. 题解: 我们先把头和尾拼起来,令前i个数的 ...
- Unity发布安卓无法读取StreamingAssets文件下数据库的问题
在移动端StreamingAssets下的文件是只读的,但大家可能跟我一样遇到了发布安卓以后放在StreamingAssets下的数据库文件一样读取不了, 但其实这个文件夹其实是可以读取到的,所以我们 ...
- sqlserver 操作xml
1.xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 2.xml.value 输入为XQuery表达式,返回一个SQL ...
- JAVA环境变量配置详解
JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解 Windows下JAVA用到的环境变量主要有3个,JAVA_HOME.CLASSPATH.PATH. JAVA_HOME 指向 ...
- mac 终端下ssh 登录远程服务器不发输入中文
转:https://segmentfault.com/q/1010000000150673 用Mac的iterm2 ssh连上去,终端显示中文乱码,也不能输入中文,然而本地终端可以显示和输入. 解决方 ...
- Git 添加自己分支 pull request
1.找到项目地址 这里,我们可以找到项目地址,比如:https://github.com/*****/Cplusplus_Thread_Lib,然后点击页面右上角的 "fork" ...