当前位置: 首页 > 编程笔记 >

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

夏弘文
2023-03-14
本文向大家介绍JS实现双击屏幕滚动效果代码,包括了JS实现双击屏幕滚动效果代码的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jquery跟随屏幕滚动效果的实现代码,包括了jquery跟随屏幕滚动效果的实现代码的使用技巧和注意事项,需要的朋友参考一下 我们在很多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消失,而是浮动在屏幕的某个地方,特别是一些局域广告。那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解。 一、原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮

  • 本文向大家介绍基于JavaScript实现屏幕滚动效果,包括了基于JavaScript实现屏幕滚动效果的使用技巧和注意事项,需要的朋友参考一下 屏幕滚动效果: 效果: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS平滑无缝滚动效果的实现代码,包括了JS平滑无缝滚动效果的实现代码的使用技巧和注意事项,需要的朋友参考一下 本文我们实现纯JS方式的滚动广告效果。 先show一下成品: 首先是网页样式: 布局如下: 具体的JS实现: 这里要注意的是: scrollLeft代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗

  • 本文向大家介绍jQuery实现公告新闻自动滚屏效果实例代码,包括了jQuery实现公告新闻自动滚屏效果实例代码的使用技巧和注意事项,需要的朋友参考一下 本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: 以上所述是小编给大家介绍的jQuery实现公告新闻自动滚屏效果实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编

  • 本文向大家介绍js实现点击图片在屏幕中间弹出放大效果,包括了js实现点击图片在屏幕中间弹出放大效果的使用技巧和注意事项,需要的朋友参考一下 js实现点击图片在屏幕中间弹出放大效果 效果图 点击图片后 关键代码 html js 使用方式 将以下两个文件放在同一个文件夹下,使用浏览器打开1.html 完整代码 完整1.html jquery.min.js (常规jquery包)

  • 本文向大家介绍简单实现js无缝滚动效果,包括了简单实现js无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。