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

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。

相关文章

Win32下C++实现快速获取硬盘分区信息

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase
阅读更多...
Spring Security注解方式权限控制过程

Spring Security注解方式权限控制过程

《SpringSecurity注解方式权限控制过程》：本文主要介绍SpringSecurity注解方式权限控制过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、摘要二、实现步骤2.1 在配置类中添加权限注解的支持2.2 创建Controller类2.3 Us
阅读更多...
Python中如何控制小数点精度与对齐方式

Python中如何控制小数点精度与对齐方式

《Python中如何控制小数点精度与对齐方式》在Python编程中,数据输出格式化是一个常见的需求,尤其是在涉及到小数点精度和对齐方式时,下面小编就来为大家介绍一下如何在Python中实现这些功能吧... 目录一、控制小数点精度1. 使用 round() 函数2. 使用字符串格式化二、控制对齐方式1. 使用
阅读更多...
Springboot控制反转与Bean对象的方法

Springboot控制反转与Bean对象的方法

《Springboot控制反转与Bean对象的方法》文章介绍了SpringBoot中的控制反转（IoC）概念,描述了IoC容器如何管理Bean的生命周期和依赖关系,它详细讲解了Bean的注册过程,包括... 目录1 控制反转1.1 什么是控制反转1.2 SpringBoot中的控制反转2 Ioc容器对Bea
阅读更多...
Vue中动态权限到按钮的完整实现方案详解

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表（routes）1.2 修改角色与路由权限表（role_routes）二、后端接口设计
阅读更多...
禁止HTML页面滚动的操作方法

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》：本文主要介绍了三种禁止HTML页面滚动的方法：通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性，每种方法都有其适用场景和优缺点，详细内容请阅读本文，希望能对你有所帮助... 在前端开发中，禁止htm
阅读更多...
Python如何实现PDF隐私信息检测

Python如何实现PDF隐私信息检测

《Python如何实现PDF隐私信息检测》随着越来越多的个人信息以电子形式存储和传输,确保这些信息的安全至关重要,本文将介绍如何使用Python检测PDF文件中的隐私信息,需要的可以参考下... 目录项目背景技术栈代码解析功能说明运行结php果在当今，数据隐私保护变得尤为重要。随着越来越多的个人信息以电子形
阅读更多...
浅析如何使用Swagger生成带权限控制的API文档

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里，API
阅读更多...
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.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2