×

js图片特效

js图片特效（js图片动画）

admin admin 发表于2023-04-09 00:51:11 浏览88 评论0

抢沙发发表评论

本文目录一览：

寻网页中JS实现的图片切换特效

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。

js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

title图片展示特效/title

style

body{ margin:20px auto; width:100%; height:auto;}

#dHomePageCarousel {

height:221px;

width:670px;

position:relative;

margin:40px auto;

}

#dLocalHomesCarousel {

height:131px;

margin:0px 2px 3px 1px;

overflow:hidden;

position:relative;

}

.divCarouselInfo {

color:#3C404E;

font-size:12px;

width:639px;

height:64px;

line-height:16px;

margin-right:15px;

padding-top:10px;

position:relative;

}

.imgBorder{

border:2px solid #fff;

position:absolute;

cursor:pointer;

}

.imgBorder:hover {

border:2px solid #FFAA55;

cursor:pointer;

position:absolute;

}

.btnCarouselLT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent;

display:block;

height:41px;

overflow:hidden;

position:absolute;

cursor:pointer;

top:17px;

width:40px;

}

.btnCarouselRT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent;

display:block;

height:41px;

overflow:hidden;

position:absolute;

cursor:pointer;

top:17px;

width:40px;

}

img {

border:medium none;

}

.author{ width:700px; margin:0 auto; height:auto; text-align:center;}

/style

/head

body onLoad="clearInterval(autoplay);"

!-- 头开始 --

!-- 滚动房源广告开始 --

div id="dHomePageCarousel" style="padding-left:15px"

div id=dLocalHomesCarousel

img id="imgSmallLeft" class="imgBorder" style="height:50px; width:70px; left:10px; bottom:5px;" onClick="clearInterval(autoplay);moveD('l');"/-js图片特效

img id="imgMiddleLeft" class="imgBorder" style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move('l');"/-js图片特效

img id="imgBig" class="imgBorder" style="height:105px; width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/-js图片特效

img id="imgMiddleRight" class="imgBorder" style="height:75px; width:100px; left:410px; bottom:5px;" onClick="clearInterval(autoplay);move('r');"/-js图片特效

img id="imgSmallRight" class="imgBorder" style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD('r');"/-js图片特效

img id="imgHidden" class="imgBorder" style="width:10px; height:10px; left:-90px; bottom:5px;"/

/div

script type="text/javascript"

function AdItem(Photo,url) {

this.Photo = Photo;

this.url = url;

}

var ad = new Array();

ad[0] = new AdItem('images/1.jpg','#'); ad[1] = new AdItem('images/2.jpg','#'); ad[2] = new AdItem('images/3.jpg','#'); ad[3] = new AdItem('images/4.jpg','#'); ad[4] = new AdItem('images/5.jpg','#'); ad[5] = new AdItem('images/6.jpg','#'); ;-js图片特效

var img = new Array();

img[0] = document.getElementById("imgSmallLeft");

img[1] = document.getElementById("imgMiddleLeft");

img[2] = document.getElementById("imgBig");

img[3] = document.getElementById("imgMiddleRight");

img[4] = document.getElementById("imgSmallRight");

img[5] = document.getElementById("imgHidden");

var position = 0;

for(i=0;iimg.length;i++){

img[i].src = ad[i].Photo;

}

var cur = 2;

adname.href = ad[2].url;

/script

/div

script type="text/javascript"

function roll(direction){

var imgLength = img.length;

var dataLength = ad.length;

var start = position;

if('r' == direction){

for(var i=0; iimgLength; i++){

start = start + 1;

if(start (dataLength-1))

start = start - dataLength;

img[i].src = ad.Photo;

}

position = position + 1;

if(position (dataLength-1))

position = position - dataLength;

}

if('l' == direction){

var a = true;

for(var i=0; iimgLength; i++){

if(a){

start = start - 1;

if(start 0){

start = start + dataLength;

a = false;

}

if(start (dataLength-1)){

a = false;

}

}else{

start = start + 1;

if(start (dataLength-1)){

start = start - dataLength;

a = true;

}

}

//alert(position + " === " + i + " === " + start);

img[i].src = ad.Photo;

if(start == (dataLength-1)){

start = -1;

}

}

position = position - 1;

if(position 0)

position = position + dataLength;

}

}

function right(){

i++;

var img0H = parseFloat(img[0].style.height);

var img0W = parseFloat(img[0].style.width);

var img0L = parseFloat(img[0].style.left);

var img1H = parseFloat(img[1].style.height);

var img1W = parseFloat(img[1].style.width);

var img1L = parseFloat(img[1].style.left);

var img2H = parseFloat(img[2].style.height);

var img2W = parseFloat(img[2].style.width);

var img2L = parseFloat(img[2].style.left);

var img3H = parseFloat(img[3].style.height);

var img3W = parseFloat(img[3].style.width);

var img3L = parseFloat(img[3].style.left);

var img4H = parseFloat(img[4].style.height);

var img4W = parseFloat(img[4].style.width);

var img4L = parseFloat(img[4].style.left);

var img5H = parseFloat(img[5].style.height);

var img5W = parseFloat(img[5].style.width);

var img5L = parseFloat(img[5].style.left);

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")0 i%2==0) {

img1W = img1W + 1;

img2H = img2H + 1;

img2L = img2L + 1;

img3H = img3H + 1;

img3L = img3L + 1;

img4L = img4L + 1;

img4W = img4W + 1;

}

img[0].style.height = (img0H - 2).toString() + "px";

img[0].style.left = (img0L - 5).toString() + "px";

img[0].style.width = (img0W - 3).toString() + "px";

img[1].style.height = (img1H - 1).toString() + "px";

img[1].style.left = (img1L - 5).toString() + "px";

img[1].style.width = (img1W - 1.5).toString() + "px";

img[2].style.height = (img2H - 1.5).toString() + "px";

img[2].style.left = (img2L - 6.5).toString() + "px";

img[2].style.width = (img2W - 2).toString() + "px";

img[3].style.height = (img3H + 1.5).toString() + "px";

img[3].style.left = (img3L - 8.5).toString() + "px";

img[3].style.width = (img3W + 2).toString() + "px";

img[4].style.height = (img4H + 1).toString() + "px";

img[4].style.left = (img4L - 6.5).toString() + "px";

img[4].style.width = (img4W + 1.5).toString() + "px";

img[5].style.height = (img5H + 2).toString() + "px";

img[5].style.left = (img5L - 5).toString() + "px";

img[5].style.width = (img5W + 3).toString() + "px";

//alert(img[1].style.width);

if(i19){

clearInterval(hide);

reset();

roll('r');

isRunning = 'false';

}

}

function left(){

i++;

var img0H = parseFloat(img[0].style.height);

var img0W = parseFloat(img[0].style.width);

var img0L = parseFloat(img[0].style.left);

var img1H = parseFloat(img[1].style.height);

var img1W = parseFloat(img[1].style.width);

var img1L = parseFloat(img[1].style.left);

var img2H = parseFloat(img[2].style.height);

var img2W = parseFloat(img[2].style.width);

var img2L = parseFloat(img[2].style.left);

var img3H = parseFloat(img[3].style.height);

var img3W = parseFloat(img[3].style.width);

var img3L = parseFloat(img[3].style.left);

var img4H = parseFloat(img[4].style.height);

var img4W = parseFloat(img[4].style.width);

var img4L = parseFloat(img[4].style.left);

var img5H = parseFloat(img[5].style.height);

var img5W = parseFloat(img[5].style.width);

var img5L = parseFloat(img[5].style.left);

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")0 i%2==0) {

img0W = img0W + 1;

img1H = img1H + 1;

img1L = img1L + 1;

img2H = img2H + 1;

img2L = img2L + 1;

img3L = img3L + 1;

img3W = img3W + 1;

}

img[0].style.height = (img0H + 1).toString() + "px";

img[0].style.left = (img0L + 5).toString() + "px";

img[0].style.width = (img0W + 1.5).toString() + "px";

img[1].style.height = (img1H + 1.5).toString() + "px";

img[1].style.left = (img1L + 6.5).toString() + "px";

img[1].style.width = (img1W + 2).toString() + "px";

img[2].style.height = (img2H - 1.5).toString() + "px";

img[2].style.left = (img2L + 8.5).toString() + "px";

img[2].style.width = (img2W - 2).toString() + "px";

img[3].style.height = (img3H - 1).toString() + "px";

img[3].style.left = (img3L + 6.5).toString() + "px";

img[3].style.width = (img3W - 1.5).toString() + "px";

img[4].style.height = (img4H - 2).toString() + "px";

img[4].style.left = (img4L + 5).toString() + "px";

img[4].style.width = (img4W - 3).toString() + "px";

img[5].style.height = (img5H + 2).toString() + "px";

img[5].style.left = (img5L + 5).toString() + "px";

img[5].style.width = (img5W + 3).toString() + "px";

//alert(img[1].style.left);

if(i19){

clearInterval(hide);

reset();

roll('l');

isRunning = 'false';

}

}

var isRunning;

function move(direction){

//alert(isRunning);

if(isRunning != 'udefined' isRunning == 'true')

return;

frequency = 20;

if(navigator.userAgent.indexOf("MSIE")0) {

frequency = 15;

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")0){

frequency = 20;

}

i = 0;

if(direction == 'r'){

cur = cur + 1;

img[5].style.left = "640px";

hide = setInterval("right()", frequency);

isRunning = 'true';

}

if(direction == 'l'){

cur = cur - 1;

img[5].style.left = "-90px";

var pos = position - 1;

if(pos 0)

pos = pos + ad.length;

img[5].src = ad[pos].Photo;

hide = setInterval("left()", frequency);

isRunning = 'true';

}

if(cur (ad.length - 1))

cur = 0;

if(cur 0)

cur = ad.length - 1;

//alert(cur);

adname.href = ad[cur].url;

if(navigator.userAgent.indexOf("Firefox")0){

adname.textContent = ad[cur].name;

adtel.textContent = ad[cur].phone;

adaddr.textContent = ad[cur].address;

adprice.textContent = ad[cur].price;

adtime.textContent = ad[cur].time;

} else {

adname.innerText = ad[cur].name;

adtel.innerText = ad[cur].phone;

adaddr.innerText = ad[cur].address;

adprice.innerText = ad[cur].price;

adtime.innerText = ad[cur].time;

}

}

function moveC(direction){

if(isRunning != 'true'){

move(direction);

clearInterval(movec);

}

}

function moveD(direction){

move(direction);

if('r' == direction){

movec = setInterval("moveC('r')",5);

} else {

movec = setInterval("moveC('l')",5);

}

}

function reset(){

img[0].style.width = "70px";

img[0].style.height = "50px";

img[0].style.left = "10px";

img[1].style.width = "100px";

img[1].style.height = "75px";

img[1].style.left = "110px";

img[2].style.width = "140px";

img[2].style.height = "105px";

img[2].style.left = "240px";

img[3].style.width = "100px";

img[3].style.height = "75px";

img[3].style.left = "410px";

img[4].style.width = "70px";

img[4].style.height = "50px";

img[4].style.left = "540px";

img[5].style.width = "10px";

img[5].style.height = "10px";

img[5].style.left = "-90px";

}

autoplay = setInterval("move('r')",2000);

function openNewPage(){

window.open(ad[cur].url);

}

/script

!-- 滚动房源广告结束 --

/body

/html

JS图片特效代码怎么修改？？

打开那个特效网站，然后 单击 查看→源代码，找到下面这一段代码：div id="imageFlow"

div class="top"

/div

div class="bank"然后把rel=" "里面的地址改为你图片的地址，可以在百度里面找一些你喜欢的图片，改了就可以了哈

怎么用JS特效去做一个网页背景图片切换？（带略缩图）

style

#bg img{margin:0 5px;border:1px solid #ddd;width:80px;height:80px;}

#bg img.on{border-color:#f00;}

/style

div id="bg"

img src="缩略图地址" rel="大图地址"

img src="缩略图地址" rel="大图地址"

img src="缩略图地址" rel="大图地址"

/div

//引入jQuery.js

script

var $mg=$("#bg").find("img");

$mg.click(function(){

var big=$(this).attr("rel");

$("body").css("background","url("+big+") 50% 50% no-repeat");

$(this).addClass("on").siblings("img").removeClass("on");

});

/script

上面就是最简单的背景切换加缩略图，需要引入jQuery哈

怎样用JS实现鼠标经过显示图片和描述的特效

html

head

titletitle及alt提示特效/title

style type="text/css"

body{font-size:12px;color:#000000}

td{font-size:12px;color:#000000}

a:link{font-size:12px;color:#000000}

/style

script language="javascript"

var pltsPop=null;

var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适

var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适

var pltsTitle="";

document.write('div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"/div');

function pltsinits()

{

document.onmouseover = plts;

document.onmousemove = moveToMouseLoc;

}

function plts()

{ var o=event.srcElement;

if(o.alt!=null o.alt!=""){o.dypop=o.alt;o.alt=""};

if(o.title!=null o.title!=""){o.dypop=o.title;o.title=""};

pltsPop=o.dypop;

if(pltsPop!=null pltsPop!="" typeof(pltsPop)!="undefined")

{

pltsTipLayer.style.left=-1000;

pltsTipLayer.style.display='';

var Msg=pltsPop.replace(/\n/g,"br");

Msg=Msg.replace(/\0x13/g,"br");

var re=/\{(.[^\{]*)\}/ig;

if(!re.test(Msg))pltsTitle="『水木设计联盟』";

else{

re=/\{(.[^\{]*)\}(.*)/ig;

pltsTitle=Msg.replace(re,"$1")+" ";

re=/\{(.[^\{]*)\}/ig;

Msg=Msg.replace(re,"");

Msg=Msg.replace("br","");}

var content =

'table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"trtd width="100%"table bgcolor="#ffffff" cellspacing="0" cellpadding="0"'+-js图片特效

'tr id="pltsPoptop"td height="20" bgcolor="#0094bb"font color="#ffffff"bp id="topleft" align="left"↖'+pltsTitle+'/pp id="topright" align="right" style="display:none"'+pltsTitle+'↗/font/b/font/td/tr'+-js图片特效

'trtd "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%"'+Msg+'/td/tr'+-js图片特效

'tr id="pltsPopbot" style="display:none"td height="20" bgcolor="#0094bb"font color="#ffffff"bp id="botleft" align="left"↙'+pltsTitle+'/pp id="botright" align="right" style="display:none"'+pltsTitle+'↘/font/b/font/td/tr'+-js图片特效

'/table/td/tr/table';

pltsTipLayer.innerHTML=content;

toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);

moveToMouseLoc();

return true;

}

else

{

pltsTipLayer.innerHTML='';

pltsTipLayer.style.display='none';

return true;

}

}

function moveToMouseLoc()

{

if(pltsTipLayer.innerHTML=='')return true;

var MouseX=event.x;

var MouseY=event.y;

var popHeight=pltsTipLayer.clientHeight;

var popWidth=pltsTipLayer.clientWidth;

if(MouseY+pltsoffsetY+popHeightdocument.body.clientHeight)

{

popTopAdjust=-popHeight-pltsoffsetY*1.5;

pltsPoptop.style.display="none";

pltsPopbot.style.display="";

}

else

{

popTopAdjust=0;

pltsPoptop.style.display="";

pltsPopbot.style.display="none";

}

if(MouseX+pltsoffsetX+popWidthdocument.body.clientWidth)

{

popLeftAdjust=-popWidth-pltsoffsetX*2;

topleft.style.display="none";

botleft.style.display="none";

topright.style.display="";

botright.style.display="";

}

else

{

popLeftAdjust=0;

topleft.style.display="";

botleft.style.display="";

topright.style.display="none";

botright.style.display="none";

}

pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;

pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;

return true;

}

pltsinits();

/script

/head

body

链接提示效果：a href="" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢"一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间/a-js图片特效

img src="" alt="模板无忧1号站"

img src="" alt="模板无忧2号站"

a href="#"img src="" alt="模板无忧3号站" border="0"/a

div style="visibility:hidden;border:0px solid #000000;background-color:#333333;font-size:12px;color:#6699cc;position:absolute;" id=altlayer/div-js图片特效

script

document.body.onmousemove=quickalt;

function quickalt() {

if (event.srcElement.hint)event.srcElement.alt=event.srcElement.hint;

if(event.srcElement.alt event.srcElement.alt!='') {

event.srcElement.hint=event.srcElement.alt;

altlayer.style.visibility='visible';

altlayer.style.left=event.x-1;

altlayer.style.top=event.y+16;

altlayer.innerHTML=event.srcElement.hint

event.srcElement.alt="";

}

else altlayer.style.visibility='hidden';}

/script

/body

/html

看看这个

网页JS图片变换特效

document.write('embed src="flash/focus.swf" 你在flash的目录下有没有focus.swf这个文件呀

什么是JS特效

JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。

比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。

JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。

扩展资料：

能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。-js图片特效

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。-js图片特效