纳金网
标题:
JS单张图片实现竖直平滑的4屏图片切换效果
[打印本页]
作者:
奇
时间:
2011-12-30 19:09
标题:
JS单张图片实现竖直平滑的4屏图片切换效果
一款竖直的、平滑滚动的图片切换效果，本代码没有借用jQuery框架，但是实现的效果还是不错的，点击左下角的小数字，即可滚动至对应图片，是CSS技术与JavaScript技术的结合，特别是用CSS定位图片位置方面。
提醒您注意的是：本文只使用了一张图片，利用JS和CSS技术进行了图片分割，看上去好像是四张图片一样，推荐大家学习。
示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单张图片实现的4屏焦点图切换</title>
</head>
<body>
<style type="text/css">
#Pics{width:233px;height:350px;overflow:hidden;position:relative;}
#Focuspic{position:absolute;left:0;}
</style>
<div id="Focus">
<div id="
ics"><img src="/uploads/allimg/1112/veryhuo_com_4p.jpg" id="Focuspic" /></div>
<div id="menu">
<a href="javascript:void(0)" onclick="menu(0)">1</a>
<a href="javascript:void(0)" onclick="menu(1)">2</a>
<a href="javascript:void(0)" onclick="menu(2)">3</a>
<a href="javascript:void(0)" onclick="menu(3)">4</a>
</div>
</div>
<script>
var $ = function(id){
return 'string' == typeof id ?document.getElementById(id):id;
}
var Pics = $('Pics');
var Focuspic = $('Focuspic');
var menus = $('menu');
var list = menus.getElementsByTagName('a');
Focuspic.style.left = "0px";
xpos = parseInt(Focuspic.style.left);
function move(){
if((x-xpos)>0) xpos+=Math.ceil((x-xpos) / 10);
else xpos+=Math.floor((x-xpos) / 10);
Focuspic.style.left = -xpos + 'px'
}
function menu(num){
if(num==num){
x=num*233;
}
setInterval("move()",30);
clearInterval(sauto);
}
$('Focus').onmouseover = function() {
clearInterval(sauto);
}
$('Focus').onmouseout = function() {
sauto = setInterval('automenu()',3000);
}
var num = 0;
function automenu(){
if(num==num){
num++;
x=num*233;
}
if(num==3)num=-1;
setInterval("move()",30);
}
sauto = setInterval('automenu()',3000);
</script>
</body>
</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43728.html
作者:
奇
时间:
2012-1-6 22:15
作者:
晃晃
时间:
2012-2-1 23:24
顶!学习了!阅!
作者:
菜刀吻电线
时间:
2012-3-1 23:21
都闪开，介个帖子，偶来顶
作者:
tc
时间:
2012-3-26 23:32
赞一个，哈哈
作者:
tc
时间:
2012-4-19 23:22
好铁多多发，感激分享
作者:
奇
时间:
2012-4-20 23:24
读铁系缘分，顶铁系友情
作者:
奇
时间:
2012-6-1 23:20
发了那么多，我都不知道该用哪个给你回帖了，呵呵
作者:
tc
时间:
2012-7-13 23:24
“再次路过……”我造一个-----特别路过
作者:
tc
时间:
2012-8-19 23:47
先垫一块，再说鸟
作者:
C.R.CAN
时间:
2012-8-22 00:14
“再次路过……”我造一个-----特别路过
作者:
奇
时间:
2012-8-31 01:19
我就看看，我不说话
作者:
菜刀吻电线
时间:
2012-10-2 23:19
路过、路过、快到鸟，列位请继续...ing
作者:
奇
时间:
2012-12-16 23:21
路过、路过、快到鸟，列位请继续...ing
作者:
菜刀吻电线
时间:
2013-2-11 23:21
不会吧，太恐怖了
欢迎光临 纳金网 (http://go.narkii.com/club/)
Powered by Discuz! X2.5
ics"><img src="/uploads/allimg/1112/veryhuo_com_4p.jpg" id="Focuspic" /></div>