网页动态特效js代码（js浮动图片的动态效果）

本文目录

• js浮动图片的动态效果
• 实现网页内容水平或垂直滚动的Javascript代码
• 关于Javascript 特效代码
• jquery动态加载js三种方法

js浮动图片的动态效果

这篇文章介绍了几种JS的动态效果实例 有需要的朋友可以参考一下   复制代码 代码如下: 《!DOCTYPE PUBLIC " //W C//DTD HTML Transitional//EN" " 《》 《head》 《meta equiv="Content Type" content="text/; charset=UTF "》 《title》浮动图片《/title》 《script type=text/javascript》 var step = ; // 移动的像素 var y = ; // 垂直移动的方向 表示向上 表示向下 var x = ; // 水平移动的方向 表示向左 表示向右 function myFloat() { var img = document getElementById("myImg"); // 获取图片和当前浏览器窗口上边距 由于img style top获取的值带px单位 var top = img style top replace("px" ""); // top = top ; // img style top = top + "px"; // 获取图片和当前浏览器窗口左边距 var left = img style left replace("px" ""); // left = left ; // img style left = left + "px"; // 上下移动 if(top 《= ) { y = ; } if(top 》= document body clientHeight) { y = ; } top = (top* ) + (step * y); img style top = top + "px"; // 左右移动 if(left 《= ) { x = ; } // alert(img clientWidth); if(left 》= (document body clientWidth img clientWidth)) { x = ; } left = (left* ) + (step * x); img style left = left + "px"; setTimeout("myFloat()" ); } 《/script》 《/head》 《body onload="myFloat();" 》 《img id="myImg" src=" /》 《/body》 《/》

　　 另一种的实现方式

　　 浮动广告

实现网页内容水平或垂直滚动的Javascript代码

主要两个部分，一、是滚动内容部分；二、JS的滚动代码部分，也只有两句话。
一、传统的滚动代码
用Javascript实现新闻内容的水平滚动！
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]
传统的滚动代码应用效果比较单一，而且经常还存在浏览器的兼容性问题，比如在FIREFOX上效果就会出现marquee的特效无效的问题。
二、Javascript实现的滚动效果
用Javascript实现新闻内容的水平滚动1
document.write("用Javascript实现新闻内容的水平滚动2");
//新闻内容
document.write("用Javascript实现新闻内容的水平滚动3");
//新闻内容
//div标签中的宽度width等参数可以自行调节
function
newsScroll()
{
news.style.pixelLeft=(news.style.pixelLeft-1)%headnew.offsetWidth;//实现不间断滚动
}
function
go()
{
timer1=setInterval(’newsScroll()’,30)
//更改第二个参数可以改变速度，值越小，速度越快。
}
go();
[Ctrl+A
全选
注:如需引入外部Js需刷新才能执行]
以上就是完整的JS滚动代码，如果想实现垂直滚动，则只需要简单的修改即可，即使用style的pixTop属性即可实现。
摘自
天缘博客

关于Javascript 特效代码

《script language="JavaScript"》
《!-- Hide the script from old browsers --
function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj
{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同
var one = ’1’ //定义一个字符型的1
var two = ’2’ //定义一个字符型的2
var three = ’3’ //定义一个字符型的3
var four = ’4’ //定义一个字符型的4
var five = ’5’ //定义一个字符型的5
var six = ’6’ //定义一个字符型的6
var seven = ’7’ //定义一个字符型的7
var eight = ’8’ //定义一个字符型的8
var nine = ’9’ //定义一个字符型的9
var zero = ’0’ //定义一个字符型的0
var plus = ’+’ //定义一个字符型的+
var minus = ’-’ //定义一个字符型的*
var multiply = ’*’ //定义一个字符型的*
var divide = ’/’ //定义一个字符型的/
var decimal = ’.’ //定义一个字符型的.
function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj
{obj.expr.value += string} //让 obj的值加上 ’+’后面的值
function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj
{obj.expr.value = ’’} //让obj的值等于空
// --End Hiding Here --》
《/script》
《form name="calc"》
《table border=1》
《td colspan=4》《input type="text" name="expr" size=30 action="compute(this.form)"》 《tr》
《!--提交表单--》
《td》《input type="button" value=" 7 " onClick="enter(this.form, seven)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 8 " onClick="enter(this.form, eight)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 9 " onClick="enter(this.form, nine)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" / " onClick="enter(this.form, divide)"》《!--当鼠标点
击按钮的时候提交给函数按钮中的值--》
《tr》《td》《input type="button" value=" 4 " onClick="enter(this.form, four)"》《!--当鼠标
点击按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 5 " onClick="enter(this.form, five)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 6 " onClick="enter(this.form, six)"》《!--当鼠标点击按
钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" * " onClick="enter(this.form, multiply)"》《!--当鼠标
点击按钮的时候提交给函数按钮中的值--》
《tr》《td》《input type="button" value=" 1 " onClick="enter(this.form, one)"》《!--当鼠标点
击按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 2 " onClick="enter(this.form, two)"》《!--当鼠标点击按
钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" 3 " onClick="enter(this.form, three)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" - " onClick="enter(this.form, minus)"》《!--当鼠标点
击按钮的时候提交给函数按钮中的值--》
《tr》《td colspan=2》《input type="button" value=" 0 " onClick="enter
(this.form, zero)"》《!--当鼠标点击按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" . " onClick="enter(this.form, decimal)"》《!--当鼠标
点击按钮的时候提交给函数按钮中的值--》
《td》《input type="button" value=" + " onClick="enter(this.form, plus)"》《!--当鼠标点击
按钮的时候提交给函数按钮中的值--》
《tr》《td colspan=2》《input type="button" value=" = " onClick="compute(this.form)"》《!
--提交表单在javascript中进行运算--》
《td colspan=2》《input type="button" value="AC" size= 3 onClick="clear(this.form)"》 《!--
点击此按钮调用此函数--》
《/table》
《/form》

jquery动态加载js三种方法

　　《! 这里为你提供了三种动态加载js的jquery实例代码哦 由于jquery是为用户提供方便的 所以利用jquery动态加载文件只要一句话$ getscript("test js");就ok了

　　《!doctype public " //w c//dtd x transitional//en" " 《 xmlns=" 《head》 《meta equiv="content type" content="text/; charset=gb " /》

　　《title》jquery 动态加载js三种方法《/title》 《script language="网页特效"》 $ getscript("test js"); //方法二

　　function loadjs(file){      var head = $( head ) remove( #loadscript );     $("《scri"+"pt》"+"《/scr"+"ipt》") attr({src:file type: text/javascript id: load }) appendto(head); }//够简单把！如果在浓缩以下你甚至可以用一行代码全部搞定 //方法三

　　$("《scri"+"pt》"+"《/scr"+"ipt》") attr({src:file type: text/javascript id: load }) appendto($( head ) remove( #loadscript ));

　　《/script》 《/head》