您的位置：首页 > 其它

仿6.cn效果, 按钮控制信息左右滚动

2008-09-27 21:46 591 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>byzuo.cn---pageChange---左右切换内容V版 </title>

<script type="text/javascript">

</script>

<style type="text/css">

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#2B93D2; text-decoration:none; }

a:hover { color:#E31E1C; text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

/* v style */

.v { width:595px; margin:20px 0 1px 60px; }

.v_caption { height:35px; overflow:hidden; background:url(http://www.byzuo.cn/demo/page_change_v/img/btn_cartoon.gif) no-repeat 0 0; }

.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(http://www.byzuo.cn/demo/page_change_v/img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }

.v_caption .cartoon { background-position: 0 -100px; }

.v_caption .variety { background-position:-100px -100px; }

.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }

.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(http://www.byzuo.cn/demo/page_change_v/img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }

.highlight_tip .current { background-position:0 -220px; }

.change_btn { float:left; margin:7px 0 0 10px; }

.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(http://www.byzuo.cn/demo/page_change_v/img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }

.change_btn .previous { background-position:0 -400px; }

.change_btn .next { width:31px; background-position:-30px -400px; }

.change_btn .first_btn { background-position:0 -500px; cursor:default; }

.change_btn .last_btn {background-position:-30px -500px; cursor:default; }

.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }

.v_content { position:relative; width:592px; height:180px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }

.v_content_list { position:absolute; width:2500px; }

.v_content ul {}

.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(http://www.byzuo.cn/demo/page_change_v/img/v_bg.gif) no-repeat; }

.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }

.v_content ul li img { width:128px; height:96px; }

.v_content ul li h4 { width:128px; height:36px; overflow:hidden; margin-top:12px; font-weight:normal; }

.v_content ul li h4 a { display:inline !important; height:auto !important; }

.v_content ul li span { color:#666; }

.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }

</style>

<script type="text/javascript">

function $(id) { return document.getElementById(id); }

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x && ypos == final_y) {

return true;

}

if (xpos < final_x) {

var dist = Math.ceil((final_x - xpos)/10);//Math.ceil求最小的整数,但不小于本身

xpos = xpos + dist;

}

if (xpos > final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos < final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos > final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function next(previousBtn,nextBtn,scrollID,highlightID) {

var vTop = parseInt($(scrollID).style.top);

var vLeft = parseInt($(scrollID).style.left);

if (vLeft <= -1776) return;

if(vLeft == -1184) {

$(nextBtn).className = 'last_btn';

}

var finalLeft = vLeft - 592;

moveElement(scrollID,finalLeft,vTop,5);

$(previousBtn).className = 'previous';

var highLightList = $(highlightID).getElementsByTagName('span');

for (var i=0; i<highLightList.length; i++) {

if (highLightList[i].className == 'current') {

var currentNum = i;

}

}

highLightList[currentNum].className = '';

highLightList[currentNum+1].className = 'current';

}

function previous(previousBtn,nextBtn,scrollID,highlightID) {

var vTop = parseInt($(scrollID).style.top);

var vLeft = parseInt($(scrollID).style.left);

if (vLeft >= 0) return;

if(vLeft == -592) {

$(previousBtn).className = 'first_btn';

}

var finalLeft = vLeft + 592;

moveElement(scrollID,finalLeft,vTop,5);

$(nextBtn).className = 'next';

var highLightList = $(highlightID).getElementsByTagName('span');

for (var i=0; i<highLightList.length; i++) {

if (highLightList[i].className == 'current') {

var currentNum = i;

}

}

highLightList[currentNum].className = '';

highLightList[currentNum-1].className = 'current';

}

</script>

</head>

<body>

<div class="v">

<div class="v_caption">

<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>

<div id="cartoon_highlight" class="highlight_tip"><span class="current">1</span><span>2</span><span>3</span><span>4</span></div>

<div class="change_btn"><span id="cartoon_previous_btn" class="first_btn" onclick="previous('cartoon_previous_btn','cartoon_next_btn','cartoon_list','cartoon_highlight')">上一页</span><span id="cartoon_next_btn" class="next" onclick="next('cartoon_previous_btn','cartoon_next_btn','cartoon_list','cartoon_highlight')">下一页</span></div>

<em><a href="#">更多>></a></em>

</div>

<div class="v_content">

<div id="cartoon_list" class="v_content_list" style="top:0px; left:0px;">

<ul>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a1.jpg" alt="" /></a>

<h4><a href="#">【秀逗魔导士/魔剑美神】a1</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a2.jpg" alt="" /></a>

<h4><a href="#">《名侦探柯南》第511回推理对决新一VS冲矢</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a3.jpg" alt="" /></a>

<h4><a href="#">《夏目友人帐》大人气妖异怪谈</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a4.jpg" alt="" /></a>

<h4><a href="#">《灭世纪_毁灭世界的六人》</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a5.jpg" alt="" /></a>

<h4><a href="#">《银魂Gintama》超kuso动漫更新至117集b2</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a6.jpg" alt="" /></a>

<h4><a href="#">【魔法使的条件~夏之青空】</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a7.jpg" alt="" /></a>

<h4><a href="#">《无限之住人》不死之咒语</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a8.jpg" alt="" /></a>

<h4><a href="#">《乃木坂春香的秘密》</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a4.jpg" alt="" /></a>

<h4><a href="#">《火影忍者》热播动漫每周五更新c3</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a3.jpg" alt="" /></a>

<h4><a href="#">《驱魔少年》第95回羊于犬</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a2.jpg" alt="" /></a>

<h4><a href="#">《无限之住人》不死之咒语</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a1.jpg" alt="" /></a>

<h4><a href="#">《死神》热播动漫每周四更新</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a8.jpg" alt="" /></a>

<h4><a href="#">《女人我最大》教你最时尚的穿衣化妆方法d4</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a7.jpg" alt="" /></a>

<h4><a href="#">【魔法使的条件~夏之青空】</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a6.jpg" alt="" /></a>

<h4><a href="#">《我爱黑涩会》想看漂亮MM的来吧每天更新</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/a5.jpg" alt="" /></a>

<h4><a href="#">《乃木坂春香的秘密》</a></h4>

<span>播放: <em>57,865</em></span></li>

</ul></div>

</div>

</div>



<div class="v">

<div class="v_caption">

<h2 class="variety" title="综艺娱乐">综艺娱乐</h2>

<div id="variety_highlight" class="highlight_tip"><span class="current">1</span><span>2</span><span>3</span><span>4</span></div>

<div class="change_btn"><span id="variety_previous_btn" class="first_btn" onclick="previous('variety_previous_btn','variety_next_btn','variety_list','variety_highlight')">上一页</span><span id="variety_next_btn" class="next" onclick="next('variety_previous_btn','variety_next_btn','variety_list','variety_highlight')">下一页</span></div>

<em><a href="#">更多>></a></em>

</div>

<div class="v_content">

<div id="variety_list" class="v_content_list" style="top:0px; left:0px;">

<ul>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b1.jpg" alt="" /></a>

<h4><a href="#">《女人我最大》教你最时尚的穿衣化妆方法a1</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b2.jpg" alt="" /></a>

<h4><a href="#">《我爱黑涩会》想看漂亮MM的来吧每天更新</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b3.jpg" alt="" /></a>

<h4><a href="#">《美国达人》美国最大的真人秀选拔赛</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b4.jpg" alt="" /></a>

<h4><a href="#">《黄金B段班》史上最强的综艺节目</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b5.jpg" alt="" /></a>

<h4><a href="#">《银魂Gintama》超kuso动漫更新至117集b2</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b6.jpg" alt="" /></a>

<h4><a href="#">【魔法使的条件~夏之青空】</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b7.jpg" alt="" /></a>

<h4><a href="#">《模范棒棒堂》五位帅哥的超kuso表演</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b8.jpg" alt="" /></a>

<h4><a href="#">《乃木坂春香的秘密》</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b4.jpg" alt="" /></a>

<h4><a href="#">《超级星光大道第三季》08.08.10 第六名决定赛c3</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b3.jpg" alt="" /></a>

<h4><a href="#">《驱魔少年》第95回羊于犬</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b2.jpg" alt="" /></a>

<h4><a href="#">《无限之住人》不死之咒语</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b1.jpg" alt="" /></a>

<h4><a href="#">《死神》热播动漫每周四更新</a></h4>

<span>播放: <em>57,865</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b8.jpg" alt="" /></a>

<h4><a href="#">《情书》三季合集让你一次看个够d4</a></h4>

<span>播放: <em>28,276</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b7.jpg" alt="" /></a>

<h4><a href="#">《国光帮帮忙》3位型男主持的谈话节目</a></h4>

<span>播放: <em>33,326</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b6.jpg" alt="" /></a>

<h4><a href="#">《我爱黑涩会》想看漂亮MM的来吧每天更新</a></h4>

<span>播放: <em>3,346</em></span></li>

<li><a href="#"><img src="http://www.byzuo.cn/demo/page_change_v/img/b5.jpg" alt="" /></a>

<h4><a href="#">《乃木坂春香的秘密》</a></h4>

<span>播放: <em>57,865</em></span></li>

</ul></div>

</div>

</div>



<div style="height:20px; background:#EEE;"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航