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 ...
随机推荐
- Js的Url中传递中文参数乱码的解决
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: 2. 接收参数页面:test02.html 二:如何获取Url& ...
- ZentaoPHP
1.框架文档http://devel.cnezsoft.com/book/zentaophphelp/about-10.html zentaoPHP二次开发文档http://devel.cnezsof ...
- iOS参考工具和资源
图片: Glyphish(图标资源) 资源: SwiftGuide:这份指南汇集了Swift语言主流学习资源,并以开发者的视角整理编排. 27款iOS开源库,让你的开发溜到飞起 创业者的新春礼包—优秀 ...
- 编译搭建Lamp服务器
Lamp 是目前倍受欢迎的一种网站服务器.其主要有linux+apache+mysql+php 组成.由于其组成成员都是开源免费的产品,所以被作为中小型网站服务器的选择.LZ之前在学校学linux的时 ...
- Linux 下搭建jsp服务器（配置jsp开发环境）
Linux 做为服务器的高效一直时为人所熟知的了,在linux 上搭建各种各样的服务器和开发环境也时学计算机的人常做的.以下时最近在linux配置jsp服务器的全过程,包含一些基本步骤和排错过程: 1 ...
- 转 错误：ORA-28002： the password will expire within 7 days 解决方法
今天在使用sqlplus时出现 =============================================== ERROR:ORA-28002: the password will e ...
- cocos2d-js引擎学习笔记
cocos2d-js3.0实用语法 /*初始化继承类*/ var Enemy = cc.Sprite.extend({ hp: 0, fileName: "enemy.png", ...
- Arpa's loud Owf and Mehrdad's evil plan
Arpa's loud Owf and Mehrdad's evil plan time limit per test 1 second memory limit per test 256 megab ...
- nginx构建https
1.生成证书#openssl genrsa -des3 -out server.key 1024#openssl req -new -key server.key -out server.csr#op ...
- Spring.net 学习IOC------准备
在学习spring.net开始时,我们首先要下载spring.net所用到的类库: Common.Logging.dll(必要)Spring.Core.dll(必要)Spring.Data.dllSp ...