js特效代码（前端开发中常用到的js特效有哪些）

本文目录

• 前端开发中常用到的js特效有哪些
• js如何实现木马轮播图效果
• 当单击按钮时 显示搜索框，当再次单击按钮时隐藏搜索框，默认在页面搜索框是隐藏的，求Js特效代码
• 手机移动端美化弹窗提示确认框js特效代码
• 手机移动端美化弹窗提示确认框js特效代码
• 手机移动端美化弹窗提示确认框js特效代码
• JS特效代码--一个很Cool的JS菜单效果
• 用js做网页下拉菜单缓慢向下的特效代码

前端开发中常用到的js特效有哪些

HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = document.querySelector(’.item’);console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll(’.item’);console.log(items);1234567
阻止默认行为
// 原生jsdocument.getElementById(’btn’).addEventListener(’click’, function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默认行为
event.preventDefault();
} else{ // ie 阻止默认行为
event.returnValue = false;
}
}, false);// jQuery$(’#btn’).on(’click’, function (event) { event.preventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById(’btn’).addEventListener(’click’, function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$(’#btn’).on(’click’, function (event) { event.stopPropagation();
});1234567891011121314151617
鼠标滚轮事件
$(’#content’).on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta 》 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail 》 0 ? -1 : 1));
if (delta 》 0) {
// 向上滚动
console.log(’mousewheel top’);
} else if (delta 《 0) { // 向下滚动
console.log(’mousewheel bottom’);
}
});123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
***隐藏网址***
}
// 测试console.log(isSupportSVG());1234567
检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement(’canvas’).getContext){ return true;
}else{ return false;
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910
检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 测试alert(isWeiXinClient());1234567891011
jQuery 获取鼠标在图片上的坐标
$(’#myImage’).click(function(event){
//获取鼠标在图片上的坐标
console.log(’X：’ + event.offsetX+’\n Y:’ + event.offsetY);
//获取元素相对于页面的坐标
console.log(’X：’+$(this).offset().left+’\n Y:’+$(this).offset().top);
});1234567
验证码倒计时代码
《!-- dom --》《input id="send" type="button" value="发送验证码"》12
// 原生js版本var times = 60, // 临时设为60秒
timer = null;
document.getElementById(’send’).onclick = function () {
// 计时开始
timer = setInterval(function () {
times--; if (times 《= 0) {
send.value = ’发送验证码’;
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + ’秒后重试’;
send.disabled = true;
}
}, 1000);
}1234567891011121314151617181920
// jQuery版本var times = 60,
timer = null;
$(’#send’).on(’click’, function () {
var $this = $(this); // 计时开始
timer = setInterval(function () {
times--; if (times 《= 0) {
$this.val(’发送验证码’);
clearInterval(timer);
$this.attr(’disabled’, false);
times = 60;
} else {
$this.val(times + ’秒后重试’);
$this.attr(’disabled’, true);
}
}, 1000);
});12345678910111213141516171819202122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^()*$/
//验证邮箱
/^\w+@({2,4}$/
//验证手机号
/^1\d{9}$/
//验证URL
***隐藏网址***
//验证身份证号码
/(^\d{15}$)|(^\d{17}(|X|x)$)/
//匹配中文字符的正则表达式
//
//匹配双字节字符(包括汉字在内)
//1234567891011121314151617181920
js时间戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415
js限定字符数（注意：一个汉字算2个字符）
《input id="txt" type="text"》//字符串截取function getByteVal(val, max) {
var returnValue = ’’; var byteValLen = 0; for (var i = 0; i 《 val.length; i++) { if (val/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen 》 max) break;
returnValue += val;
} return returnValue;
}
$(’#txt’).on(’keyup’, function () {
var val = this.value; if (val.replace(//g, "**").length 》 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819
js判断是否移动端及浏览器内核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf(’Trident’) 》 -1, //IE内核
presto: u.indexOf(’Presto’) 》 -1, //opera内核
webKit: u.indexOf(’AppleWebKit’) 》 -1, //苹果、谷歌内核
gecko: u.indexOf(’Firefox’) 》 -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf(’Android’) 》 -1 || u.indexOf(’Linux’) 》 -1, //android
iPhone: u.indexOf(’iPhone’) 》 -1 , //iPhone
iPad: u.indexOf(’iPad’) 》 -1, //iPad
webApp: u.indexOf(’Safari’) 》 -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert(’移动端’);
}123456789101112131415161718192021
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 百度
***隐藏网址***
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById(’myDiv’);var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;
// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}
fullscreen(document.documentElement);12345678910111213

js如何实现木马轮播图效果

首先，我们来看一下木马轮播图效果：
具体代码如下：
（推荐教程：js教程）
html部分代码：
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》旋转木马轮播图《/title》
《link rel="stylesheet" href="css/myStyle.css" rel="external nofollow" /》
《script type="text/javascript" src="js/animate.js"》《/script》
《script type="text/javascript" src="js/my.js"》《/script》
《/head》
《body》
《div id="wrap"》
《div id="slide"》
《ul》
《li》《a href="#"》《img src="images/slidepic1.jpg" alt=""/》《/a》《/li》
《li》《a href="#"》《img src="images/slidepic2.jpg" alt=""/》《/a》《/li》
《li》《a href="#"》《img src="images/slidepic3.jpg" alt=""/》《/a》《/li》
《li》《a href="#"》《img src="images/slidepic4.jpg" alt=""/》《/a》《/li》
《li》《a href="#"》《img src="images/slidepic5.jpg" alt=""/》《/a》《/li》
《/ul》
《div id="arrow"》
《a href="javascript:;" id="arrLeft"》《/a》
《a href="javascript:;" id="arrRight"》《/a》
《/div》
《/div》
《/div》
《/body》
《/html》在html部分引入的myStyle.css文件部分代码
@charset "UTF-8";

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h3,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin:0;
padding:0
}

body,button,input,select,textarea{
font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
color:#666;
}

ol,ul{
list-style:none
}

a{
text-decoration:none
}

fieldset,img{
border:0;
vertical-align:top;
}

a,input,button,select,textarea{
outline:none
}

a,button{
cursor:pointer
}

.wrap{
width:1200px;
margin:100px auto;
}
.slide{
height:500px;
position: relative;
}

.slide li{
position:absolute;
left:200px;
top:0
}

.slide li img{
width:100%
}

.arrow{
opacity:0;
}

.prev ,.next{
width:76px;
height:112px;
position:absolute;
top:50%;
margin-top:-56px;
background:url(../images/prev.png) no-repeat;
z-index:99;
}


.next{
right:0;
background-image:url(../images/next.png);
}在html部分引入的animate.js文件部分代码
/**
* Created by RENPINGSHENG on 2018/4/6.
*/

function animate(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for(var k in json){
if( k == "opacity"){
var leader = getStyle(obj,k) * 100;
var target = json * 100;
var step = (target - leader) /10;
step = step 》 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style = leader /100;
} else if ( k == "zIndex"){
obj.style;
}else{
var leader = parseInt(getStyle(obj,k)) || 0;
var target = json;
var step = (target - leader) /10;
step = step 》0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style = leader + "px";
}

console.log("target:" + target + "leader:" + leader + "step:" + step);
if (leader != target){
flag = false;
}
}

if (flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},15)
}

function getStyle(obj,attr){
if (obj.currentStyle){
return obj.currentStyle;
}else{
return window.getComputedStyle(obj,null);
}
}在html部分引入的my.js文件部分代码
/**
* Created by RENPINGSHENG on 2018/4/6.
*/


window.onload = function () {
var wrap = document.getElementById("wrap");
var slide = document.getElementById("slide");
var ul = slide.children;
var lis = ul.children;
var arrow = document.getElementById("arrow");
var arrRight = document.getElementById("arrRight");
var arrLeft = document.getElementById("arrLeft");

var config = [
{
width:400,
top:20,
left:50,
opacity:0.2,
zIndex:2
},
{
width:600,
top:70,
left:0,
opacity:0.8,
zIndex:3
},
{
width:800,
top:100,
left:200,
opacity:1,
zIndex:4
},
{
width:600,
top:70,
left:600,
opacity:0.8,
zIndex:3
},
{
width:400,
top:20,
left:750,
opacity:0.2,
zIndex:2
}
];

wrap.onmouseover = function () {
animate(arrow,{"opacity":1});
}
wrap.onmouseout = function () {
animate(arrow,{"opacity":0});
}
function assign() {
for(var i = 0;i 《 lis.length;i++){
animate(lis,function(){
flag = true;
})
}
}

var flag = true;
assign();
arrRight.onclick = function () {
flag = false;
config.push(config.shift());
assign();
};
arrLeft.onclick = function () {
flag = false;
config.unshift(config.pop());
assign();
}
}整个页面的文件结构如下图所示：
更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

当单击按钮时 显示搜索框，当再次单击按钮时隐藏搜索框，默认在页面搜索框是隐藏的，求Js特效代码

《script》
function change() {
            var divDisp = document.getElementById("search").style.display;
            if (divDisp == "block") {
                document.getElementById("search").style.display = "none";
            } else {
                document.getElementById("search").style.display = "block";
            }
        }
《/script》
《body》
《input id="btnChange" type="button" onclick="change();" value="点我改变"/》
《div id="search" style="display:none"》
《input id="searchText" type="text" /》
《/div》
《/body》

手机移动端美化弹窗提示确认框js特效代码

《script type="text/javascript"》

$(function(){

  $(’#demo1’).on(’click’, function(){

webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);

  });
  $(’#demo2’).on(’click’, function(){

popTipShow.alert(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’, ,

function(e){

  //callback 处理按钮事件  

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

  }

}

);

  });
  $(’#demo3’).on(’click’, function(){

popTipShow.confirm(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("操作成功","top", 2000);

}, 300);

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000);

}, 300);

  }

}

);

  });
  $(’#demo4’).on(’click’, function(){

var html = "《label》姓名：《input class=’confirm_input’ placeholder=’请输入’》《/label》";

popTipShow.confirm(’弹窗标题’,html,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空！","bottom", 3000);

return;

}

this.hide();

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000);

}, 300);

//按下确定按钮执行的操作

//todo ....

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","top", 2000);

}, 300);

  }

}

);

  });
});

《/script》

手机移动端美化弹窗提示确认框js特效代码

《script type="text/javascript"》

$(function(){

  $(’#demo1’).on(’click’, function(){

webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);

  });
  $(’#demo2’).on(’click’, function(){

popTipShow.alert(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’, ,

function(e){

  //callback 处理按钮事件  

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

  }

}

);

  });
  $(’#demo3’).on(’click’, function(){

popTipShow.confirm(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("操作成功","top", 2000);

}, 300);

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000);

}, 300);

  }

}

);

  });
  $(’#demo4’).on(’click’, function(){

var html = "《label》姓名：《input class=’confirm_input’ placeholder=’请输入’》《/label》";

popTipShow.confirm(’弹窗标题’,html,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空！","bottom", 3000);

return;

}

this.hide();

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000);

}, 300);

//按下确定按钮执行的操作

//todo ....

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","top", 2000);

}, 300);

  }

}

);

  });
});

《/script》

手机移动端美化弹窗提示确认框js特效代码

《script type="text/javascript"》

$(function(){

  $(’#demo1’).on(’click’, function(){

webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);

  });
  $(’#demo2’).on(’click’, function(){

popTipShow.alert(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’, ,

function(e){

  //callback 处理按钮事件  

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

  }

}

);

  });
  $(’#demo3’).on(’click’, function(){

popTipShow.confirm(’弹窗标题’,’自定义弹窗内容，居左对齐显示，告知需要确认的信息等’,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

//按下确定按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("操作成功","top", 2000);

}, 300);

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000);

}, 300);

  }

}

);

  });
  $(’#demo4’).on(’click’, function(){

var html = "《label》姓名：《input class=’confirm_input’ placeholder=’请输入’》《/label》";

popTipShow.confirm(’弹窗标题’,html,,

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr(’class’);

  if(button == ’ok’){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空！","bottom", 3000);

return;

}

this.hide();

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000);

}, 300);

//按下确定按钮执行的操作

//todo ....

  }

  if(button == ’cancel’) {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","top", 2000);

}, 300);

  }

}

);

  });
});

《/script》

JS特效代码--一个很Cool的JS菜单效果

　　《script》

　　function CoolMenuControl(){

　　// 常规变量 this lastScrollX= ; this lastScrollY= ; this lastScrollW= ; this lastScrollH= ; this td_X= ; this td_Y= ; this td_W= ; this td_H= ; this td= ; this mouseon= ; this current=null this _name; this table_name; this menudiv_name; this menutable_name; this ml= ; this menuarray=new Array(); this speed; this href="";

　　// 菜单项目 function menuitem(type value url target){ this type=type this value=value this url=url this target=target }

　　// 插入菜单 this insertmenu=function(type value url target){  this menuarray=new menuitem(type value url target) }

　　// 程序初试化 this init=function(name bdc bgc speed Alpha){  var in="" var cellcount= var lastcellcount= this _name=name+"" this table_name=name+"table" this menudiv_name=name+"menudiv" this menutable_name=name+"menutable" this speed=speed

　　for (i= ;i《this menuarray length;i++)  {  if (this menuarray type==" ") {cellcount= }  if (lastcellcount《cellcount) {lastcellcount++}    }

　　//alert(cellcount)

　　stylecode="cursor:hand;filter:Alpha(style= opacity="+Alpha+");background color:"+bgc

　　suspendcode="《DIV id="+this _name+" style= POSITION:absolute; onclick= "+name+" doClick() 》"  +"《table id="+this table_name+" border= width= cellspacing= style= border collapse: collapse bordercolor= "+bdc+" 》"  +"《tr》《td height= style= "+stylecode+" 》《/td》《/tr》《/table》《/div》"; document write(suspendcode); var fcell=true for (i= ;i《this menuarray length;i++) {  switch(this menuarray value;  }  break;  } } in= 《div id= +this menudiv_name+ onmousemove=" +name+ doOver()"》  + 《table id= +this menutable_name+ border= cellpadding=" " class="menu" cellspacing=" "》  +in  + 《/table》《/div》 ; //alert(in) document write(in);

　　this lastScrollX= ; this lastScrollY= ; this posXY(eval(this menutable_name) cells scrollHeight setInterval(name+" scrollback()" ) }

　　// 单击超连接 this doClick=function(){  //alert(this url)  var url=this href split(" ")  //alert(url=="") return

　　if (url} }

　　// 滑动处理 this scrollback=function(){ diffX=this td_X diffY=this td_Y diffW=this td_W diffH=this td_H percentX=this speed*(diffX this lastScrollX); percentY=this speed*(diffY this lastScrollY); percentW=this speed*(diffW this lastScrollW); percentH=this speed*(diffH this lastScrollH);

　　if(percentX》 )percentX=Math ceil(percentX); else percentX=Math floor(percentX); if(percentY》 )percentY=Math ceil(percentY); else percentY=Math floor(percentY); if(percentW》 )percentW=Math ceil(percentW); else percentW=Math floor(percentW); if(percentH》 )percentH=Math ceil(percentH); else percentH=Math floor(percentH);

　　eval(this _name) style pixelTop+=percentY; eval(this _name) style pixelLeft+=percentX; eval(this table_name) style pixelWidth+=percentW; eval(this table_name) style pixelHeight+=percentH;

　　this lastScrollX=this lastScrollX+percentX; this lastScrollY=this lastScrollY+percentY; this lastScrollW=this lastScrollW+percentW; this lastScrollH=this lastScrollH+percentH; }

　　// 滑出 this doOver=function() {  if (event srcElement tagName=="TD") {  if (event srcElement innerText length== || event srcElement innerText=="|") return  this posXY(event srcElement)  this td_W=event srcElement scrollWidth+    this td_H=event srcElement scrollHeight  } }

　　// 绝对定位 this posXY=function(obj){  _left=obj offsetLeft  _top=obj offsetTop  vParent = obj offsetParent;    while (vParent tagName toUpperCase() != "BODY")  {  _left += vParent offsetLeft;  _top += vParent offsetTop;  vParent = vParent offsetParent;  }    this td_X=_left  this td_Y=_top }

　　// 关于 this about=function(){ alert("OK") }

　　} 《/script》

　　《head》 《meta equiv="Content Language" content="zh cn"》 《style》 b{color=# ;cursor:hand} menu { font family:Arial; cursor:Default; font size: px; border: px # solid; border collapse: collapse; filter:progid:DXImageTransform Microsoft Gradient(gradienttype= startcolorstr=#ffffff endcolorstr=#dddddd)  progid:DXImageTransform Microsoft Shadow(direction= color=#cccccc strength= ); } ht{ font weight:bold } 《/style》 《! 第一步 实体化X Menu类  用法:  var 《实体变量》 new CoolMenuControl() 》 《script language="javascript"》 var CoolMenu =new CoolMenuControl() var about=new Array() about="关于作者nn"这家伙很懒 什么也没留下！！"

　　《/script》 《/head》 《body》 《! 第二步 建立菜单项目    用法:  《实体变量》 insertmenu(类型 Html代码 链接网址 目标)  　类型 0代表菜单标题 1代表树型菜单子项目 2代表横向菜单子项目  　Html代码 显示在菜单上的Html代码  链接网址 不用多说了 网址或Javascript脚本  目标 默认为空 既不在本页打开 "_blank"代表在新的页面打开 例如:   CoolMenu insertmenu(" " "《img src=// blueidea /img/icon/arrow gif》 新浪网" " "_blank") 　 》 《script》 CoolMenu insertmenu(" " "本站首页" "" "") CoolMenu insertmenu(" " "新闻中心" " "_blank") CoolMenu insertmenu(" " "文章中心" " "_blank") CoolMenu insertmenu(" " "图片欣赏" " "_blank") CoolMenu insertmenu(" " "软件下载" " "_blank") CoolMenu insertmenu(" " "娱乐欣赏" " "_blank") 《/script》

用js做网页下拉菜单缓慢向下的特效代码

《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
***隐藏网址***
***隐藏网址***
《head》
***隐藏网址***
《title》下拉菜单《/title》
《style type="text/css"》
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
《/style》
《script type="text/javascript"》
function $(id){return document.getElementById(id)}
window.onload = function(){
$("nav").onclick = function(e){
var src = e?e.target:event.srcElement;
if(src.tagName == "H3"){
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display =="block")?"none":"block";
}
}
}
《/script》
《/head》
《body》
《div id="nav"》
《h3》管理区《/h3》
《div》
《a href="#"》建议《/a》
《a href="#"》链接《/a》
《a href="#"》联系《/a》
《/div》
《h3》交流区《/h3》
《div》
《a href="#"》JavaScript《/a》
《a href="#"》Delphi《/a》
《a href="#"》VC++《/a》
《/div》
《/div》
《/body》
《/html》