按钮控制信息左右信息滚动...并有显示信息进度

2023-10-22 08:40
文章标签 控制 信息 进度 按钮 滚动 左右 显示信息

本文主要是介绍按钮控制信息左右信息滚动...并有显示信息进度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
按钮控制信息左右信息滚动...并有显示信息进度
http://www.corange.cn//uploadfiles/080827_61069.jpg

<!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" οnclick="previous('cartoon_previous_btn','cartoon_next_btn','cartoon_list','cartoon_highlight')">上一页</span><span id="cartoon_next_btn" class="next" οnclick="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>
<!--卡通动漫 end-->
<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" οnclick="previous('variety_previous_btn','variety_next_btn','variety_list','variety_highlight')">上一页</span><span id="variety_next_btn" class="next" οnclick="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>
<!--综艺娱乐 end-->
<div style="height:20px; background:#EEE;"></div>
</body>
</html>

这篇关于按钮控制信息左右信息滚动...并有显示信息进度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/260326。

相关文章

Spring IOC控制反转的实现解析

Spring IOC控制反转的实现解析

《SpringIOC控制反转的实现解析》：本文主要介绍SpringIOC控制反转的实现,IOC是Spring的核心思想之一,它通过将对象的创建、依赖注入和生命周期管理交给容器来实现解耦,使开发者... 目录1. IOC的基本概念1.1 什么是IOC1.2 IOC与DI的关系2. IOC的设计目标3. IOC
阅读更多...
C#实现系统信息监控与获取功能

C#实现系统信息监控与获取功能

《C#实现系统信息监控与获取功能》在C#开发的众多应用场景中,获取系统信息以及监控用户操作有着广泛的用途,比如在系统性能优化工具中,需要实时读取CPU、GPU资源信息,本文将详细介绍如何使用C#来实现... 目录前言一、C# 监控键盘1. 原理与实现思路2. 代码实现二、读取 CPU、GPU 资源信息1.
阅读更多...
在C#中获取端口号与系统信息的高效实践

在C#中获取端口号与系统信息的高效实践

《在C#中获取端口号与系统信息的高效实践》在现代软件开发中,尤其是系统管理、运维、监控和性能优化等场景中,了解计算机硬件和网络的状态至关重要,C#作为一种广泛应用的编程语言,提供了丰富的API来帮助开... 目录引言1. 获取端口号信息1.1 获取活动的 TCP 和 UDP 连接说明：应用场景：2. 获取硬
阅读更多...
SpringBoot使用Apache Tika检测敏感信息

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR（光学
阅读更多...
C#实现获取电脑中的端口号和硬件信息

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候，发现软件中的端口号并不是普通的COM1，而是带有硬件信息的。那么如果我们使用C#编写软件时候，如
阅读更多...
通过C#获取PDF中指定文本或所有文本的字体信息

通过C#获取PDF中指定文本或所有文本的字体信息

《通过C#获取PDF中指定文本或所有文本的字体信息》在设计和出版行业中,字体的选择和使用对最终作品的质量有着重要影响,然而,有时我们可能会遇到包含未知字体的PDF文件,这使得我们无法准确地复制或修改文... 目录引言C# 获取PDF中指定文本的字体信息C# 获取PDF文档中用到的所有字体信息引言在设计和出
阅读更多...
C#读取本地网络配置信息全攻略分享

C#读取本地网络配置信息全攻略分享

《C#读取本地网络配置信息全攻略分享》在当今数字化时代,网络已深度融入我们生活与工作的方方面面,对于软件开发而言,掌握本地计算机的网络配置信息显得尤为关键,而在C#编程的世界里,我们又该如何巧妙地读取... 目录一、引言二、C# 读取本地网络配置信息的基础准备2.1 引入关键命名空间2.2 理解核心类与方法
阅读更多...
Python实现局域网远程控制电脑

Python实现局域网远程控制电脑

《Python实现局域网远程控制电脑》这篇文章主要为大家详细介绍了如何利用Python编写一个工具,可以实现远程控制局域网电脑关机,重启,注销等功能,感兴趣的小伙伴可以参考一下... 目录1.简介2. 运行效果3. 1.0版本相关源码服务端server.py客户端client.py4. 2.0版本相关源码1
阅读更多...
使用Python检查CPU型号并弹出警告信息

使用Python检查CPU型号并弹出警告信息

《使用Python检查CPU型号并弹出警告信息》本教程将指导你如何编写一个Python程序,该程序能够在启动时检查计算机的CPU型号,如果检测到CPU型号包含“I3”,则会弹出一个警告窗口,感兴趣的小... 目录教程目标方法一所需库步骤一：安装所需库步骤二：编写python程序步骤三：运行程序注意事项方法二
阅读更多...
PostgreSQL如何查询表结构和索引信息

PostgreSQL如何查询表结构和索引信息

《PostgreSQL如何查询表结构和索引信息》文章介绍了在PostgreSQL中查询表结构和索引信息的几种方法,包括使用`d`元命令、系统数据字典查询以及使用可视化工具DBeaver... 目录前言使用\d元命令查看表字段信息和索引信息通过系统数据字典查询表结构通过系统数据字典查询索引信息查询所有的表名可
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2