javaScript滚动新闻之上下左右平滑滚动
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>平滑滚动</title>
</head>
<style>
<!--
#picture_div1{
width:300px;
height:100px;
float:left;
overflow:hidden;
position:relative;
left:0px;
top:0px;
}
#picture_div4{
width:300px;
height:100px;
float:left;
overflow:hidden;
position:relative;
left:50%;
top:0px;
}
#picture_in1,#picture_in2{
float:left;
width:800%;
}
#picture_div2,#picture_div3,#picture_div5,#picture_div6,img{
float:left;
} #wenzi_div1{
position:relative;
left:0px;
top:20%;
width:170px;
height:105px;
overflow:hidden;
}
#wenzi_div2{
position:relative;
left:50%;
top:20%;
width:170px;
height:105px;
overflow:hidden;
}
#wenzi_in1,#wenzi_in2{
float:left;
height:800%;
}
-->
</style>
<body>
<br /><h1 style="text-align:center">图片</h1><hr />
<div id="picture_div1">
<div id="picture_in1">
<div id="picture_div2">
<img src="imgs/11.png"/>
<img src="imgs/22.png"/>
<img src="imgs/33.png"/>
</div>
<div id="picture_div3"></div>
</div>
</div>
<div id="picture_div4" style="position:relative; left:400px; top:0px;">
<div id="picture_in2">
<div id="picture_div5"></div>
<div id="picture_div6">
<img src="imgs/11.png"/>
<img src="imgs/22.png"/>
<img src="imgs/33.png"/>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center">文字</h1><hr />
<div id="wenzi_div1">
<div id="wenzi_in1">
<ul id="wenzi_ul1">
<li>这里是第1条新闻</li>
<li>这里是第2条新闻</li>
<li>这里是第3条新闻</li>
<li>这里是第4条新闻</li>
<li>这里是第5条新闻</li>
<li>这里是第6条新闻</li>
<li>这里是第7条新闻</li>
<li>这里是第8条新闻</li>
<li>这里是第9条新闻</li>
<li>这里是第10条新闻</li>
</ul>
<ul id="wenzi_ul2"></ul>
</div>
</div>
<div id="wenzi_div2">
<div id="wenzi_in2">
<ul id="wenzi_ul3"></ul>
<ul id="wenzi_ul4">
<li>这里是第1条新闻</li>
<li>这里是第2条新闻</li>
<li>这里是第3条新闻</li>
<li>这里是第4条新闻</li>
<li>这里是第5条新闻</li>
<li>这里是第6条新闻</li>
<li>这里是第7条新闻</li>
<li>这里是第8条新闻</li>
<li>这里是第9条新闻</li>
<li>这里是第10条新闻</li>
</ul>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
//图片控制
//向左側
var picture_div1 = document.getElementById('picture_div1');
var picture_div2 = document.getElementById('picture_div2');
var picture_div3 = document.getElementById('picture_div3');
picture_div3.innerHTML = picture_div2.innerHTML;
var speed = 10;
function pictureMarquee1(){
if(picture_div3.offsetWidth - picture_div1.scrollLeft <= 0){
picture_div1.scrollLeft -= picture_div2.offsetWidth;
}else{
picture_div1.scrollLeft++;
}
}
var picture_id1 = setInterval(pictureMarquee1,speed);
picture_div1.onmouseover = function(){
clearTimeout(picture_id1);
}
picture_div1.onmouseout = function(){
picture_id1 = setInterval(pictureMarquee1,speed);
}
//向右側
var picture_div4 = document.getElementById('picture_div4');
var picture_div5 = document.getElementById('picture_div5');
var picture_div6 = document.getElementById('picture_div6');
picture_div5.innerHTML = picture_div6.innerHTML;
function pictureMarquee2(){
if(picture_div4.scrollLeft <= 0){
picture_div4.scrollLeft += picture_div5.offsetWidth;
}else{
picture_div4.scrollLeft--;
}
}
var picture_id2 = setInterval(pictureMarquee2,speed);
picture_div4.onmouseover = function(){
clearTimeout(picture_id2);
}
picture_div4.onmouseout = function(){
picture_id2 = setInterval(pictureMarquee2,speed);
} //文字控制
//向左側
var wenzi_div1 = document.getElementById('wenzi_div1');
var wenzi_ul1 = document.getElementById('wenzi_ul1');
var wenzi_ul2 = document.getElementById('wenzi_ul2');
var speed1 = 100;
wenzi_ul2.innerHTML = wenzi_ul1.innerHTML;
function wenziMarquee1(){
if(wenzi_ul2.offsetHeight - wenzi_div1.scrollTop <= 0){
wenzi_div1.scrollTop -= wenzi_ul1.offsetHeight;
}else{
wenzi_div1.scrollTop++;
}
}
var wenzi_id1 = setInterval(wenziMarquee1,speed1);
wenzi_div1.onmouseover = function(){
clearTimeout(wenzi_id1);
}
wenzi_div1.onmouseout = function(){
wenzi_id1 = setInterval(wenziMarquee1,speed1);
}
//向右側
var wenzi_div2 = document.getElementById('wenzi_div2');
var wenzi_ul3 = document.getElementById('wenzi_ul3');
var wenzi_ul4 = document.getElementById('wenzi_ul4');
wenzi_ul3.innerHTML = wenzi_ul4.innerHTML;
function wenziMarquee2(){
if(wenzi_div2.scrollTop <= 0){
wenzi_div2.scrollTop += wenzi_ul3.offsetHeight;
}else{
wenzi_div2.scrollTop--;
}
}
var wenzi_id2 = setInterval(wenziMarquee2,speed1);
wenzi_div2.onmouseover = function(){
clearTimeout(wenzi_id2);
}
wenzi_div1.onmouseout = function(){
wenzi_id2 = setInterval(wenziMarquee2,speed1);
}
</script>
</html>
javaScript滚动新闻之上下左右平滑滚动的更多相关文章
- 使用JavaScript实现新闻滚动效果
最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...
- javaScript滚动新闻
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 常用JS图片滚动（无缝、平滑、上下左右滚动）
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head><-----></head><body> <!--向下滚动代码开始-->& ...
- 纯javaScript实现元素平滑滚动，改进前两个版本，支持鼠标滚轮滚动和点击元素滚动，滚动更顺畅
windowScroll(id, number, distance, direction, obj) 参数介绍: 1.id:所要滚动的元素id; 2.number:滚动次数; 3.distance:每 ...
- ScrollTo：实现平滑滚动到页面指定位置
ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...
- js平滑滚动到顶部,底部,指定地方
[原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
- AJAX技术之网易滚动新闻的简单实现(附源码)--AJAX
1.AJAX简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法 ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
随机推荐
- Oracle10g安装中遇到的错误及解决办法
linux解决xhost: unable to open display实用技巧:在Linux下设置xhost方法步骤 第一步:用root登陆linux,启动vnc服务:第二步:根据vnc起来的端口, ...
- matlab-----均值滤波函数的实现
均值滤波的原理是对图像以一个区域(方形,圆形)等为模板,对该区域内的数据求平均后赋值给区域的中心 这种滤波方式原理简单,但是在滤波的同时会造成图像模糊. 本文将尝试对matlab中的filter2() ...
- 【ZOJ】3785 What day is that day? ——浅谈KMP在ACM竞赛中的暴力打表找规律中的应用
转载请声明出处:http://www.cnblogs.com/kevince/p/3887827.html ——By Kevince 首先声明一下,这里的规律指的是循环,即找到最小循环周期. 这 ...
- MyEclipse中新建JSP（Advanced Template）文件时自动生成的
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="ca ...
- 网易云课堂_艾叔：零基础一站式C语言|C程序设计精讲_章节12:指针
课时63指针操作数组 二维数组 #include <stdio.h> #include <stdlib.h> int main() { int age[2][4] = { 1, ...
- c++崩溃错误2
使用了内联函数: 在头文件中声明和定义内联函数是正确的 但是在头文件中声明内联函数,而在.cpp文件中定义了内联函数会导致崩溃的 .h class stu{ inline void str(): } ...
- linux系统关机与重新启动命令
在linux下关机和重新启动系统有shutdown.halt.reboot.init,对于他们来说他们的内部工作过程是不同样的. 1.shutdown命令 使用它能够安全地关闭系统.然而在关闭系统时. ...
- UVa 1583 Digit Generator(数学)
题意 假设a加上a全部数位上的数等于b时 a称为b的generator 求给定数的最小generator 给的数n是小于100,000的 考虑到全部数位和最大的数99,999的数位和也才45 ...
- android卸载反馈实现
博客原地址:http://blog.csdn.net/wang_shaner/article/details/41543787 实现原理 fork分叉函数 fork分叉(分裂)函数可以创建一个新进程, ...
- 让你提前认识软件开发(23)：怎样在C语言中运行shell命令？
第1部分 又一次认识C语言 怎样在C语言中运行shell命令? [文章摘要] Linux操作系统具备开源等诸多优秀特性,因此在很多通信类软件(主流开发语言为C语言)中,开发平台都迁移到了Linux上, ...