当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS打造经典鼠标触发显示选项效果

CSS打造经典鼠标触发显示选项效果

来源：中国设计秀作者：点击：1013 加入收藏

关键字：经典鼠标效果

程序代码如下：<br>
<script>
//获取一个对象
function getByid(id) {
if (document.getElementById) {
  return document.getElementById(id);
} else if (document.all) {
  return document.all[id];
} else if (document.layers) {
  return document.layers[id];
} else {
  return null;
}
}

//运行框操作
function creatID(DivID){
var objs=getByid(DivID).getElementsByTagName('textarea');
var inps=getByid(DivID).getElementsByTagName('input');
var buts=getByid(DivID).getElementsByTagName('button');
var labs=getByid(DivID).getElementsByTagName('label');
for (i=0; i<objs.length; i++) {
  objs[i].id="runcode"+i;
  inps[i].id=i
  buts[i].id=i
  labs[i].id=i
}
}
function runCode(obj){ //定义一个运行代码的函数，
   var code=getByid("runcode"+obj).value;//即要运行的代码。
   var newwin=window.open('','',''); //打开一个窗口并赋给变量newwin。
   newwin.opener = null // 防止代码对论谈页面修改
   newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
   newwin.document.close();
}

//复制代码
function doCopy(obj) {
if (document.all){
   textRange = getByid("runcode"+obj).createTextRange();
   textRange.execCommand("Copy");
   alert("代码已经复制到剪切板");
}else{
   alert("此功能只能在IE上有效\n\n请在文本域中用Ctrl+A选择再复制")
}
}
//另存代码
function saveCode(obj) {
        var winname = window.open('','','width=0,height=0,top=200,left=200px');
        winname.document.open('text/html', 'replace');
        winname.document.write(obj.value);
        winname.document.execCommand('saveas','','CSS动态滑动菜单.html');
        winname.close();
}
</script>

<textarea id="runcode0" cols="72" rows="9">　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>css打造鼠标触发效果</title>
<style type="text/css">

</style>
<script type="text/javascript">
<![CDATA[//>
<!]]>
</script>
</head>
<body>
<div class="kw_from">
<form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()">

</textarea>
<br>
<input type="button" value="运行代码" id="0" onClick="runCode(this.id)">  
<input type="button" value="复制代码" id="0" onClick="doCopy(this.id)">   
<input type="button" value="保存代码" id="0" onClick="saveCode(runcode0)">   <br>[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]<br>看到了 CSS+JS打造绝对经典的滑轮新闻显示特效这个特效，都是css+js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 IE 才不得做个js ，以下的代码如果去掉js部分地话，在Opear和Firrfox都能正常的，但是IE下就不行了。<br>大家有兴趣的可以测试一下。也希望能帮到有需要的人。

顶一下

2007-11-18 15:02:13 出处：中国设计秀_网页设计欣赏_平面设计欣赏_设计教程

本文引用地址：http://www.cnwebshow.com/edu/html/article_4035.html

热点文章/相关文章