原生javascript满屏上下滚动】的更多相关文章

使用到一个滚动事件:onmousewheel  (不支持火狐浏览器)   /  DOMMouseScroll  (支持火狐浏览器):这篇代码支持ie8以上版本,Firefox,Safari,Chrome. 每个li代表一屏内容,滚动的是div 的滚动条,根据每个li的top值,改变滚动条距离顶部的距离.可以在每个li里添加没一屏想展示给用户的内容. <!DOCTYPE html> <html> <head lang="en"> <meta ch…
1.HTML <!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="C…
<style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-align:center; border:1px solid #ccc;} #con .roll {width:400px; height:100px; position:relative; overflow:hidden; margin-bottom:10px;} #con ul {position:absolut…
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 :after画两个重叠在一起的长方形,如图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style medi…
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不会,所以最终还是决定用原生的javascript.虽说相对于园内的高手们而言代码算不上优雅,效率算不上高,不过对于初学者来练手还是足以.. 三个文件,main.js(主函数),entity.js(实体类与工厂类),util.js(工具类),基本原理就是把位置信息保存在对象里面,然后在setInter…
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在NEOEASE写的一篇文章中介绍的很清楚,一种是借助jQuery来实现,这种方法对于那些平时不需要加载jQuery库的网站来说,显然是一种负担(jQuery现在是越做越大了……).另外一种方法是通过原生javascript编写的效果,这种方法相比上一种,要…
想着使用原生Javascript做一个随机点名的小应用, 也可以做抽奖使用. html简单化,人名单可以通过js生成并处理. 可以非常随意的添加修改人名字. 应用想带点特效,比如老.虎机转动的特效. 思路入下: 借鉴模板引擎的思想,在页面中添加一个指定ID的script标签,我们可以在任意文本中将提前准备好的人名单复制进来并添加注释. 利用正则处理空白字符,把所有人名添加到数组当中,再删除该script节点,在这里我们只讨论名字为两个字或者三个字的. 遍历数组,此时数组的每一项是一个人名,有两个…
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函数写轮播.选项卡.滚动文字的特效.运动的模式有很多,如匀速运动.匀加速运动.变加速运动等等.这里我们先以匀速运动为例,后续再介绍其他运动模式. 现在我们先用HTML和CSS将我们的运动对象建好 <!DOCTYPE html> <html> <head> <meta c…
html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Easyui Layout全屏</title> <link id="others_jquery_easyui_131" rel="sty…
如果要在大屏上展示,大屏所带电脑的浏览器应该处于满屏,此时就不会显示浏览器软件的边框了.个别浏览器在满屏状态下,某些边栏等还继续保留,此时应设置此浏览器的显示选项方可消除. 如果屏幕中的显示对象过小或过大,还可以调整缩放比例. 排行显示时,一个满屏放不下,一方面可以缩小显示比例,另一个方面高级管理员可以在后台启用字幕滚动选项. 1.360安全浏览器 版本标识: 点击浏览器右上方菜单,见下图,点击 全屏: 2.Google Chrome浏览器 版本标识: 点击浏览器右上方菜单,见下图,点击全屏方框…