javaScript特效

JavaScript特效（调试笔记）

JavaScript特效一.在网页上显示当前的时间日期,例如:“2016年3月26日星期六”. js源代码: function getTime() { var today = new Date(); //返回当日的日期和时间. var year = today.getFullYear(); //获得当前的年份 var month = today.getMonth() + 1; //获得当前的月份 var day = today.getDate(); //获得当前的日期 var weekday…

Canvas与javaScript特效笔记

第六章 Canvas与javaScript特效笔记 q <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大.每一个canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形.浏览器支持多个 canvas 上下文,并通过不同的 API 提供图形绘制功能. 为了能在 JavaScript 中引用元素,最好给元素设置 id:也需要给 canvas…

Javascript特效代码大全(420个)（转）

转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ 记录上次登录时间 ├ 自由控制打开窗口 ├ 记录页面修改时间 ├ 检测IE去过站点 ├ 离开时显示信息 ├ 弹出窗口自动关闭 ├ 离开页面弹出窗口 ├ 进入时显示信息 ├ 离开启动收藏夹 ├ 链接确认按钮 ├ 点击加入收藏夹 ├ 记录页面更新时间 ├ 页面载入等待 ├ 打开硬盘驱动器 ├ 设置默认首…

【JavaScript】在同一个网页中实现多个JavaScript特效

在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能出现一次<script type="text/javascript"></script>标签,可是.同一个网页中经常须要多个JavaScript特效. 本文在2014.11.10又作了改动.原因是笔者发现另外一种方法一.基本目标在网页中挂载两个JavaScrip…

10种JavaScript特效实例让你的网站更吸引人

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者.这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读. 您还可以参考以下JavaScript/Ajax相关教程及资源:<10个非常棒的Ajax及Javascript实例资源网站><12种Javascript解决常见浏览器兼容问题的方法>&l…

JavaScript特效源码(1、文字特效)

注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步) 1.以下代码放在一个新建页面的HTML的<body></body>区即可:[页面上必须什么都没有] <html> <head> <TITLE>特效</TITLE> </head> <script language=j…

javascript特效——烟花燃放的效果[xyytit]

春节临近,要做活动促销专题页面,百度了下,找到一些烟花燃放的特效,整理并添加了修改烟花各种参数的注释,便于大家修改使用,版权归原作者所有. 1. 示例效果:点击这里下载源码:点击这里 2. Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &…

javascript特效：会随着鼠标而动的眼睛

这个特效非常简单,其中眼球和眼珠都是特定的图片.只要掌握好距离坐标就没问题.我就直接贴代码,有兴趣的朋友可以自己复制下来运行一下,下面的眼睛图像就是我的文件用到的图像,比较难看..我就把我的代码贴出来好了. 其中的html文件如下: <!DOCTYPE html> <html> <head> <title>eye</title> <script src="eye.js" type="text/javascrip…

JavaScript特效源码(7、页面特效二)

7.将站点加入频道栏将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:window.external.addChannel('jschannel.cdf')"> ============================================================================================== *.cdf文件的内容如…

JavaScript特效源码(4、鼠标特效)

1.鼠标感应--渐现特效鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head>之间: <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100 else cur.filters.alpha.…

Javascript 特效（一）返回顶部

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} body{ height:2000px;} #box{ width:40px; height:40px; display:none; pos…

javascript特效--制作背景电子钟（整点时祝贺生日快乐）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景时钟</title> </head> <body> <p id="bgclockshade" style="position:absolute;visibility:visible;font-f…

javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func…

javascript 特效实现(1)——展开选项和收起效果

知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id="pn"和按钮 a id="btn" ,而包含div id="pn"包含一个p标签和div id="hpn"(展开和收起部分) <body> <div id="pn" class="pn&quo…

javascript 特效实现(2)——回到顶部效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>回到顶部效果(原生js)</title> <style type=&quo…

javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 71: document.getElementById("TabMenuCon71").style.display="block"; document.getElementById("TabMenuCon72").style.display="…

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>第一个界面</h1> <a href="js02history.html">当前页面</a> <a hr…

JavaScript特效制作经典精讲（案例入门详解、可直接粘贴拷贝运行、史上最牛案例）

技巧一.添加链接提示 <!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="…

javascript特效300例----抄书喽

-javascript300例- #body_div { background-color: #202425; color: white; margin: 0 auto; border: 5px green solid; width: 100%; height: 100%; padding: 0 auto; float: left } #left_bar { width: 10%; height: 300px; background-color: #EA2000; float: left; ov…

231个javascript特效分享

1.文本框焦点问题onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后,产生该文件Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件 <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if(value=='') {value='mm'}">点击时文字消失,失去焦点…

160227、javascript特效

1.给网页设定快捷键 js: function getkey(){ event = event || window.event; url = "www.baidu.com"; asc = event.keycode; key = String.fromCharCode(asc); if(key == "G"){ ret = confirm("您要前往" + url + "页面吗?&…

JavaScript特效之图片特效放大，缩小，旋转

效果图如下: 效果代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <m…

JavaScript特效之前进，后退（返回上一级）

在页面上增加前进,后退(返回上一级)功能: 方式一:使用函数 <script> function goback(){ history.go(-1);//返回或者history.back(); } function go(){ history.go(1);//前进或者history.forward(); } </script> 方式二: <a href="javascript:history.go(1)">前进</a> <a hre…

JavaScript特效源码(8、其他特效)

1.中文日期中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="JavaScript"> function number(index1){ var numberstring="一二三四五六七八九十"; if(index1 ==0) {document.write("十")} if(index1 < 10){ docum…

JavaScript特效源码(6、页面特效一)

1.页面全屏页面全屏显示[ALT+F4关闭][共1步][新弹出窗口并以全屏幕方式显示] ====1.将以下代码加入HTML的<body></body>之间: <form> <div align="center"> <input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(do…

JavaScript特效源码(5、背景特效)

1.数字时钟背景时钟[好大的钟][推荐][共1步] ====1.以下是这个效果的全部代码.[最好从一个空页面开始] <html> <head> <TITLE>背景时钟</TITLE> <script language=javaScript> <!--// function clockon() { thistime= new Date() var hours=thistime.getHours() var minutes=thistime.…

JavaScript特效源码(3、菜单特效)

1.左键点击显示菜单左键弹出式菜单[推荐][修改显示的文字及链接即可][共2步] ====1.将以下代码加入HEML的<head></head>之间: <style type="text/css"> body{font: 9pt "宋体"; margintop: 0px ; color: #ffffff; background: #000000} a.{ font: 9pt "宋体"; cursor: han…

javascript特效源码(2、图像特效)

1.不停闪烁的图像不停闪烁的图片[修改显示的图片及链接地址后根据说明进行共1步] 1.以下代码放在一个新建页面的HTML的<body></body> 区即可:[页面上必须什么都没有] <HTML> <HEAD> <TITLE>Blink image</TITLE> </HEAD> <BODY ONLOAD="soccerOnload()" topmargin="0">…

JavaScript 特效三大系列总结

一. offset系列 1. offset系列的5个属性 1. offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 * 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 * 如果父级盒子没有定位, 那么会接着往上找有定位的盒子 * 如果上级元素都没有定位,那么最后距离是与body的left值 2. offsetTop : 用于获取元素到最近定位父盒子的顶部距离 * 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧 * 如果父级盒子没有定位,那么会接着往上找有定位…

JavaScript 特效之四大家族（offset/scroll/client/event）

三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以属性形式存在. 不同点在于,访问关系是为了获取其他节点,而三大系列是为了获取元素节点更多的信息. 1. offset 系列 offset:偏移.补偿.位移 offset 系列是 js 中的一套获取元素尺寸的便捷办法. (1) offsetWidth 和 offsetHeigh…

【javaScript特效】的更多相关文章