js特效有哪些(js案例特效大全)
各位高手，我想请教一下js一般弄点什么特效。我只知道选项卡、滚动象册等简单的东西。一般还要弄什么效果
这里有一个 3DRoom图片3D展示空间
挺炫的
里面还有很多其他效果
可以参考一下
js特效里图片怎么不会滚动
js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息，js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换，需要js里的定时器来控制时间，没有使用定时器功能就无法实现图片滚动。js指JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
js相册特效是什么？有什么功能，有什么用、
js 相册特效有很多.主要是用js用不同效果来展示,切换图片的.
作用嘛,就是让网站有更多的活动元素,看起来更炫
求一个js点击事件特效 具体如下描述
直接贴代码：
注意：要引入一个jquery.js，还有里面放五张图片（1.jpg,2.jpg,3.jpg,4.jpg,5.jpg）
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?""
html?xmlns=""
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
titlejquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动/title
meta?name="description"?content="jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果，带索引按钮控制和左右按钮控制图片切换。jquery下载。"?/
style?type="text/css"
*{margin:0;padding:0;}
body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;}
.clearfix:after{content:?".";display:?block;height:?0;clear:?both;visibility:?hidden;}
.clearfix{zoom:1;}
ul,li{list-style:none;}
img{border:0;}
.wrapper{width:800px;margin:0?auto;padding-bottom:50px;}
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft?YaHei",SimHei;margin-bottom:20px;}
/*?focus?*/
#focus{width:800px;height:280px;overflow:hidden;position:relative;}
#focus?ul{height:280px;position:absolute;}
#focus?ul?li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;}
#focus?ul?li?div{position:absolute;overflow:hidden;}
#focus?.btnBg{}
#focus?.btn{position:absolute;width:780px;height:10px;padding:15px?10px;right:0;bottom:0;text-align:right;}
#focus?.btn?span{display:inline-block;_display:inline;_zoom:1;width:15px;height:15px;_font-size:0;margin-left:10px;cursor:pointer;background:#2a2635;}
#focus?.btn?span.on{background:#f1468c;}
#focus?.posNext{width:45px;height:116px;position:absolute;top:262px;background:url(images/sprite.png)?no-repeat?0?0;cursor:pointer;}
#focus?.pre{left:0;}
#focus?.pos?{?right:0;background-position:right?top;}
/style
script?type="text/javascript"?src=""/script
script?type="text/javascript"
$(function()?{
var?sWidth?=?$("#focus").width();?//获取焦点图的宽度（显示面积）
var?len?=?$("#focus?ul?li").length;?//获取焦点图个数
var?index?=?0;
var?picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var?btn?=?"div?class='btnBg'/divdiv?class='btn'";
for(var?i=0;?i??len;?i++)?{
btn?+=?"span/span";
}
$("#focus").append(btn);
$("#focus?.btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus?.btn?span").css("opacity",0.4).mouseover(function()?{
index?=?$("#focus?.btn?span").index(this);
showPics(index);
}).eq(0).trigger("mouseover");
?
//上一页、下一页按钮透明度处理
$("#focus?.posNext").css("opacity",0.2).hover(function()?{
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function()?{
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus?.pre").click(function()?{
index?-=?1;
if(index?==?-1)?{index?=?len?-?1;}
showPics(index);
});
//下一页按钮
$("#focus?.pos").click(function()?{
index?+=?1;
if(index?==?len)?{index?=?0;}
showPics(index);
});
?
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus?ul").css("width",sWidth?*?(len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function()?{
clearInterval(picTimer);
},function()?{
picTimer?=?setInterval(function()?{
showPics(index);
index++;
if(index?==?len)?{index?=?0;}
},4000);?//此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function?showPics(index)?{?//普通切换
var?nowLeft?=?-index*sWidth;?//根据index值计算ul元素的left值
$("#focus?ul").stop(true,false).animate({"left":nowLeft},300);?//通过animate()调整ul元素滚动到计算出的position
$("#focus?.btn?span").removeClass("on").eq(index).addClass("on");?//为当前的按钮切换到选中的效果
$("#focus?.btn?span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);?//为当前的按钮切换到选中的效果
}
});
/script
/head
body
div?class="wrapper"
h1jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动/h1
div?id="focus"
ul
lia?href="#"?target="_blank"img?src="images/01.jpg"?alt="QQ商城焦点图效果下载"?//a/li
lia?href="#"?target="_blank"img?src="images/02.jpg"?alt="QQ商城焦点图效果教程"?//a/li
lia?href="#"?target="_blank"img?src="images/03.jpg"?alt="jquery商城焦点图效果"?//a/li
lia?href="#"?target="_blank"img?src="images/04.jpg"?alt="jquery商城焦点图代码"?//a/li
lia?href="#"?target="_blank"img?src="images/05.jpg"?alt="jquery商城焦点图源码"?//a/li
/ul
/div!--focus?end--
/div!--?wrapper?end?--
/body
/html
望采纳，谢谢！
寻网页中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');"/
img id="imgMiddleLeft" class="imgBorder" style="height:75px; width:100px; left:110px; bottom:5px;" onClick="clearInterval(autoplay);move('l');"/
img id="imgBig" class="imgBorder" style="height:105px; width:140px; left:240px; bottom:5px;" onClick="openNewPage();"/
img id="imgMiddleRight" class="imgBorder" style="height:75px; width:100px; left:410px; bottom:5px;" onClick="clearInterval(autoplay);move('r');"/
img id="imgSmallRight" class="imgBorder" style="width:70px; height:50px; left:540px; bottom:5px;" onClick="clearInterval(autoplay);moveD('r');"/
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','#'); ;
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特效
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。
