JS实现双击屏幕滚动效果代码

2024-02-17 12:28:18

本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：

这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/

具体代码如下：

<html>
<SCRIPT language=JavaScript>
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双击滚屏</title>
<style>
<!--
body { color: #FFFFFF; font-family: Verdana; font-size: 9pt }
-->
</style>
</head>
<body bgcolor="#0496DC">
<p align="center">请双击</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现网页上随滚动条滚动的层效果代码

本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
JS实现的N多简单无缝滚动代码(包含图文效果)

本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2
JS实现的页面自定义滚动条效果

本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D
js实现随屏幕滚动的带缓冲效果的右下角广告代码

本文实例讲述了js实现随屏幕滚动的带缓冲效果的右下角广告代码.分享给大家供大家参考.具体如下: 一个随屏幕自动滚动的右下角广告代码,这里请注意几个参数: id 你要滚动的内容的id r 放在左边还是右边默认是右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定不写或者0表示滚动(ie6固定无效) 是不是很实用呢,这个版本经过作者二次修正,兼容性还不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-right-
原生js实现模拟滚动条

当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作
js控制多图左右滚动切换效果代码分享

本文实例讲述了js控制多图左右滚动切换效果.分享给大家供大家参考.具体如下: 这是一款纯js实现点击左右按钮图片自动左右平滑滚动,默认5个一组左右滚动,可以手动修改js参数更改滑动数量. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js控制多图左右滚动切换效果代码如下 <head> <meta http-equiv="Content-Type"
JS实现的新浪微博大厅文字内容滚动效果代码

本文实例讲述了JS实现的新浪微博大厅文字内容滚动效果代码.分享给大家供大家参考,具体如下: 新浪微博大厅滚动tweets-slide,JavaScript实现,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过今天发现这款竟然还要好,不敢独享,希望需要的朋友喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-txt-scroll-tweets-slide-codes/ 具体代码如下: <!doctype html>
js代码实现无缝滚动(文字和图片)

一款适用于方案和图片的JS无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了.测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了. 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无缝滚动</title> <s
js+div实现文字滚动和图片切换效果代码

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
js实现Select列表内容自动滚动效果代码

本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g
JS实现兼容性较好的随屏滚动效果

本文实例讲述了JS实现兼容性较好的随屏滚动效果.分享给大家供大家参考,具体如下: 代码中的参数解释如下: id 你要滚动的内容的id l 横坐标的位置不写为紧贴右边 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 f 1表示固定不写或者0表示滚动. 本代码滚动时不会出现抖动,随着屏幕大小而变动运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-scroll-follow-src-style-codes/ 具体代码如下: <!DOC

JS实现双击屏幕滚动效果代码

相关推荐

随机推荐