javascript特效源码(2、图像特效)
1、不停闪烁的图像
不停闪烁的图片[修改显示的图片及链接地址后根据说明进行共1步] 1、以下代码放在一个新建页面的HTML的<body></body> 区即可：[页面上必须什么都没有] <HTML>
<HEAD>
<TITLE>Blink image</TITLE>
</HEAD>
<BODY ONLOAD="soccerOnload()" topmargin="0">
<DIV ID="soccer" STYLE="position:absolute; left:150; top:0">
<a href="http://图片的链接.com" target="_blank">
<IMG SRC="要显示的图片.gif" border="0"></a>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
var msecs = 500; //改变时间得到不同的闪烁间隔；
var counter = 0;
function soccerOnload() {
setTimeout("blink()", msecs);
}
function blink() {
soccer.style.visibility =
(soccer.style.visibility == "hidden") ? "visible" : "hidden";
counter +=1;
setTimeout("blink()", msecs);
}
</SCRIPT>
</BODY>
</HTML>
2、图片展示选择
图片展示选择[很棒的图片展示脚本所有图片尺寸应该一致才好] 1、以下代码放在HTML的<body></body> 区即可： <CENTER>
<img width=200 height=223 src="图片名字.jpg" name="x1">
</CENTER>
//以上是程序初始时显示的图片。
<FORM>
<CENTER>
<SELECT onChange="document.x1.src=options[selectedIndex].value">
<option value="图片名字1.jpg">看看图片1</option>
<option value="图片名字2.jpg">看看图片2</option>
<option value="图片名字3.jpg">看看图片3</option>
<option value="图片名字4.jpg">看看图片4</option>
</SELECT>
</CENTER>
</FORM>
3、图片的渐现播放
图片的渐显播放[推荐][根据下面的说明进行共3步，修改图片的名称及路径即可]
第三步的top:120px;left:240px可以设定显示的位置 ====1、将下面的代码插入到HEML的<head></head>之间： <script language=javaScript>
<!--//
sandra0 = new Image();
sandra0.src = "image1.gif";
sandra1 = new Image();
sandra1.src = "image2.gif";
sandra2 = new Image();
sandra2.src = "image3.gif";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="图片名称1.gif"
imageurl[1] ="图片名称2.gif"
imageurl[2] ="图片名称3.gif"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
//-->
</script> ====2、修改<body>语句为： <body onLoad="showimage()"> ====3、将下面的代码加入到HEML的<body></body>之间： <div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div>
4、将图片固定在左上角
将图片图片固定在页面左上角[根据说明修改即可共1步] 1、将以下代码加入到HEML的<body></body>之间 <SCRIPT language=JavaScript>
<!-- Hide the script from old browsers --
// 1) 做一个88*31的LOGO。
if (document.images)
var staticlogo=new Image(88,31)
// 2) 设置LOGO的路径。
staticlogo.src="图片的名称1.gif"
// 3) 以下是LOGO代表的连接。
var logolink="http://www.happydrips.com"
// 4) 设置ALT属性。
var alttext="快乐点滴"
// 5) 设置下列属性为 1或者0(1是IE特有的，使LOGO隐现）
var fadeintoview=1
/* 6) 最后设置LOGO显示的时间，例如12 秒，数值为0表示一直显示
*/
var visibleduration=12
/////////////////////////以下不要改变/////////////////////////
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
var fadeset=''
if (fadeintoview)
fadeset="filter:alpha(opacity=0)"
if (document.all)
document.write('<span id="logo"" style="'+fadeset+';position:absolute;top:100;width:'+staticlogo.width+';height:'+staticlogo.height+'"></span>')
function bringintoview(){
if (logo.filters.alpha.opacity<=95)
logo.filters.alpha.opacity+=5
else{
clearInterval(viewit)
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}
function createlogo(){
staticimage=new Layer(100)
staticimage.left=-300
staticimage.top=120
staticimage.document.write('<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}
if (document.layers)
window.onload=createlogo;
if (document.all){
w=2
h=2
logo.style.left=w
logo.style.top=h
}
function logoit(){
var w2=document.body.scrollLeft+w
var h2=document.body.scrollTop+h
logo.style.left=w2
logo.style.top=h2
}
function logoit2(){
staticimage.left=pageXOffset+2
staticimage.top=pageYOffset+2
}
function insertimage(){
logo.innerHTML='<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>'
if (fadeintoview)
viewit=setInterval("bringintoview()",100)
else{
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}
if (document.all){
window.onscroll=logoit
window.onresize=new Function("window.location.reload()")
window.onload=insertimage
}
function staticitns(){
setInterval("logoit2()",90)
if (visibleduration!=0)
setTimeout("staticimage.visibility='hide'",visibleduration*1000)
}
//-->
</SCRIPT>
5、左右移动的图片
左右移动的图片[修改图片名称即可][共2步] 1、将以下代码加入到HEML的<head></head>之间： <script LANGUAGE="JavaScript"><!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//--></script>
2、将以下代码加入到HEML的<body></body>之间： <img src="要显示的图片名称.gif" name="picture"
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="40">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
//--></script>
6、图像演示滚动公告板
图象滚动公告版[适合做图片的滚动友情链接][很有用][共1步] 1、将以下代码加入到HEML的<body></body>之间： <script language="JavaScript1.2">
<!--
/*设置下面的参数。 设置scrollerwidth和scrollerheight参数，设置成滚动显示的图片中尺寸最大的。*/
var scrollerwidth=140
var scrollerheight=40
var scrollerbgcolor='white'
//每个图间暂停3秒。
var pausebetweenimages=3000
//边界下面的行，如果希望logo都是带连接的，只要加上<a>标签即可。
var slideimages=new Array()
slideimages[0]='<a href="index.htm"><img src="第一张图片.gif" border=0"></a>'
slideimages[1]='<a href="index1.htm"><img src="第二张图片.gif"></a>'
slideimages[2]='<a href="index2.htm"><img src="第三张图片.gif"></a>'
slideimages[3]='<a href="index3.htm"><img src="第四张图片.gif"></a>'
//尽管填加更多的。
//////以下不要修改////////////////
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}}
window.onload=startscroll
//-->
</script> <ilayer id="main" width="&{scrollerwidth};" height="&{scrollerheight};" bgcolor="&{scrollerbgcolor};"> <layer id="first" left="0" top="1" width="&{scrollerwidth};"> <script
language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script> </layer> <layer id="second" left="0" top="0" width="&{scrollerwidth};" visibility="hide"> <script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script> </layer> </ilayer> </p>
<p><script language="JavaScript1.2">
<!--
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
//--></script>
7、跟随屏幕移动的
跟随屏幕移动的图像[推荐]修改图片名称和文字即可][共2步] ====1、将以下代码加入到HEML的<head></head>之间： <style type="text/css">
#floater {
position: absolute;
left: 500;
top: 146;
width: 125;
visibility: visible;
z-index: 10;
}</style> ====2、将以下代码加入到HEML的<body></body>之间 <div ID="floater" style="left: 590px; top: 158px">
<p align="center"><img SRC="想要显示的图片.gif" alt="图片显示的文字" WIDTH="125" HEIGHT="60"><br>
<font color="#FF8040">图片下面的文字</font></p>
</div><script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- STALKER CODE -->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelTop += percent;
if(NS) document.floater.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.floater.style.pixelLeft += percent;
if(NS) document.floater.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- /STALKER CODE -->
<!-- DRAG DROP CODE -->
function checkFocus(x,y) {
stalkerx = document.floater.pageX;
stalkery = document.floater.pageY;
stalkerwidth = document.floater.clip.width;
stalkerheight = document.floater.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("floater") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.floater;
StalkerTouchedX = e.pageX-document.floater.pageX;
StalkerTouchedY = e.pageY-document.floater.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;
}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}
<!-- DRAG DROP CODE -->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
javascript特效源码(2、图像特效)的更多相关文章
- JavaScript特效源码(1、文字特效)
注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...
- 多种的android进度条的特效源码
多种的android进度条的特效源码,这个源码是在源码天堂那个网站上转载过来的,我已经修改一部分了,感觉很实用的,大家可以学习一下吧,我就不上传源码了,大家可以直接到那个网站上下载吧. 源码天堂下载地 ...
- JavaScript特效源码(4、鼠标特效)
1.鼠标感应--渐现特效 鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚] [修改图片名称即可][共2步] ====1.将以下代码加入HTML的<head></head> ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
- JavaScript特效源码(7、页面特效二)
7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...
- JavaScript特效源码(8、其他特效)
1.中文日期 中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...
- JavaScript特效源码(6、页面特效一)
1.页面全屏 页面全屏显示[ALT+F4关闭][共1步][新弹出窗口并以全屏幕方式显示] ====1.将以下代码加入HTML的<body></body>之间: <form ...
- JavaScript特效源码(5、背景特效)
1.数字时钟 背景时钟[好大的钟][推荐][共1步] ====1.以下是这个效果的全部代码.[最好从一个空页面开始] <html> <head> <TITLE>背景 ...
随机推荐
- NX二次开发-UFUN工程图表格注释检索默认单元格首选项UF_TABNOT_ask_default_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- Vue.js框架的基础指令
Vue.js 渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架 js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体. 三大主流前端框 ...
- jdk自带的数据库derby的基本使用以及注意事项（mac为例），附java demo
文章目录 安装 环境变量 验证是否安装成功 启动 本地启动 允许远程连接的启动方式: 在启动过程中可能遇到的错误(远程连接的时候会出现): 1 2 连接测试,创建数据库 方法一(推荐) 方法二 jav ...
- Android Telephony分析(四) ---- TelephonyManager详解
前言 TelephonyManager主要提供Telephony相关信息的查询/修改功能,以及Phone状态监听功能,封装的方法主要是提供给APP上层使用.TelephonyManager.java ...
- SimpleDateFormat日期格式
前言 java中使用SimpleDateFormat类的构造函数SimpleDateFormat(String str)构造格式化日期的格式,通过format(Date date)方法将指定的日期对象 ...
- python中面向对象
一.Python经典类与新类 经典类:如果没有直接或间接的子类化一个对象,也就是说如果没有指定一个父类,或者是如果子类化的基本类没有父类,那么就定义了经典类: class classics: 'def ...
- shell 脚本 功能性语句 read，expr，test
1. read 从终端输入数据赋值给变量 read val 把读入的数据存放到val中 #!/bin/bash echo -n "please input two number :" ...
- launch-s.sh 发布脚本备份
[root@izm5ef2ow9zssfxi6opoucz code]# cat launch-s.sh serverId=1313 zipName=$1 serverPath='code-s'$se ...
- QT之发布
https://blog.csdn.net/qq_40194498/article/details/79926054打开windows控制台直接输入 windeployqt --help 可以知道想要 ...
- 家庭-养老院模型理解IOC和DI
控制反转 IOC 1. 概念 应用内部不负责依赖对象的创建和维护, 由第三方负责, 这样控制权就由应用内部转移到外部容器, 控制权的转移就是所谓的反转. 2. 比喻 有一户家庭(应用)有个老人(依赖对 ...