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

 更新时间:2015年10月28日 10:54:47   作者:企鹅  
这篇文章主要介绍了JS实现双击屏幕滚动效果代码,涉及JavaScript鼠标事件的响应及页面元素属性的动态变换技巧,需要的朋友可以参考下

本文实例讲述了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 实现缓存算法的示例(FIFO/LRU)

    JS 实现缓存算法的示例(FIFO/LRU)

    这篇文章主要介绍了JS 实现缓存算法的示例(FIFO/LRU),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    相信大家都知道数据可视化就是借助图形化的手段把生硬的数据生动化,以此来展示出数据想要表达的信息,而图表是最通常的一种数据可视化手段。可全靠自己纯手动编写各种图表实在是让人头疼,各种计算各种烦。现在就为大家介绍如何用D3.js来实现柱状图。
    2016-09-09
  • 利用js实现Vue2.0中数据的双向绑定功能

    利用js实现Vue2.0中数据的双向绑定功能

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下
    2021-07-07
  • window.addeventjs事件驱动函数集合addEvent等

    window.addeventjs事件驱动函数集合addEvent等

    addEvent()、removeEvent()、handleEvent()、fixEvent()[
    2008-02-02
  • 前台js对象在后台转化java对象的问题探讨

    前台js对象在后台转化java对象的问题探讨

    在开发项目中多次遇到前台js对象在后台转化java对象的问题,下面就为大家介绍下前台js对象转后台java对象,感兴趣的朋友可以了解下
    2013-12-12
  • JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结

    JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结

    这篇文章主要介绍了JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作,结合实例形式整理总结了javascript运算符优先级,URL编码与解码,String,Math,arguments操作原理及使用技巧,需要的朋友可以参考下
    2019-06-06
  • lazyload.js详解(推荐)

    lazyload.js详解(推荐)

    lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的,这篇文章主要介绍了lazyload.js详解,需要的朋友可以参考下
    2022-09-09
  • JS中getElementsByClassName与classList兼容性问题解决方案分析

    JS中getElementsByClassName与classList兼容性问题解决方案分析

    这篇文章主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下
    2019-08-08
  • 学习并汇集javascript匿名函数

    学习并汇集javascript匿名函数

    接触jQuery很长时间了,对其的实现有太多疑问,可谓只知道皮毛,对其的精髓一窍不通,可悲啊!所以有必要研究下其中的原理。
    2010-11-11
  • 详解JavaScript 中的批处理和缓存

    详解JavaScript 中的批处理和缓存

    这篇文章主要介绍了详解JavaScript 中的批处理和缓存,帮助大家完成需求,更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11

最新评论