JS+CSS实现分类动态选择及移动功能效果代码


Posted in Javascript onOctober 19, 2015

本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考,具体如下:

这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,点击运行一下你会知道它的奥妙,它用JavaScript模拟出了Flash动画的效果,很贴切。

运行效果截图如下:

JS+CSS实现分类动态选择及移动功能效果代码

在线演示地址如下:

具体代码如下:

<HEAD>
<TITLE>JS+CSS商品动态选择及移动功能</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style language="javascript">
<!--
body, td{
 font-size: 9pt;
}
.hidden{display:none;}
.show{display:block;}
-->
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var speed=10;//速度
var ci = 10;//运动次数
var left=0;//方框左位置
var top=0;//方框上位置
var width=0;//方框宽
var height=0;//方框高
var aimleft=0;//目标左位置
var aimtop=0;//目标上位置
var aimwidth=0;//目标宽
var aimheight=0;//目标高
var lb=0;//左步长
var tb=0;//上步长
var wb=0;//宽步长
var hb=0;//高步长
var fk = null;
var aim = null;
var aim1 = null;
function initObj(oid){
 if (!fk){fk = document.getElementById('fk');}
 if (!aim){aim = document.getElementById('aim');}
 if (!aim1)aim1 = document.getElementById('aim1');
 if (oid)
  append(fk,document.getElementById(oid),true);
}
function append(o,oc,cloned){
 while (o.hasChildNodes())o.removeChild(o.firstChild);
 if (cloned)oc = oc.cloneNode(true);
 oc.className = 'show';
 o.appendChild(oc);
}
function setSource(obj,oid){
 initObj(oid);
 left = getOffset(obj).Left;
 top = getOffset(obj).Top;
 width = obj.offsetWidth;
 height = obj.offsetHeight;
 aimleft = getOffset(aim).Left;
 aimtop = getOffset(aim).Top;
 aimwidth = aim.offsetWidth;
 aimheight = aim.offsetHeight;
 fk.style.display='';
 clearInterval(MyMar);
}
/**
* 设置方向步长、宽高步长
*/
function setStep(){
 lb = (aimleft-left)/ci;
 tb = (aimtop-top)/ci;
 wb = (aimwidth-width)/ci;
 hb = (aimheight-height)/ci;
}
/**
* 移动
*/
function move(){
 setStep();
 left+=lb;
 top+=tb;
 width+=wb;
 height+=hb;
 if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
  fk.style.left = left+"px";
  fk.style.top = top+"px";
  fk.style.width = width+"px";
  fk.style.height = height+"px";
 }else{
  if (fk)
   while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
  hiddenFK();
  clearInterval(MyMar)
 }
}
function hiddenFK(){
 initObj();
 fk.style.display='none';
}
/**
* 取得某元素在页面中相对页面左上顶点的位置
*/
function getOffset(obj){
 var offsetleft = obj.offsetLeft;
 var offsettop = obj.offsetTop;
 while (obj.offsetParent != document.body)
 {
  obj = obj.offsetParent;
  offsetleft += obj.offsetLeft;
  offsettop += obj.offsetTop;
 }
 return {Left : offsetleft, Top : offsettop};
}
var MyMar=setInterval(move,speed);
//-->
</SCRIPT>
<div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
 <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">ASP</TD>
 <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD>
 <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD>
 <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD>
 <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD>
 <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
<TR>
 <TD id='aim1' valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
<TR bgcolor=#ffffff>
 <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">ASP</TD>
 <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">PHP</TD>
 <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">ASP.NET</TD>
 <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">JSP</TD>
 <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">AJAX</TD>
 <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">DELPHI</TD>
</TR>
</TABLE>
<div id="t1" class="hidden">ASP</div>
<div id="t2" class="hidden">PHP</div>
<div id="t3" class="hidden">ASP.NET</div>
<div id="t4" class="hidden">JSP</div>
<div id="t5" class="hidden">AJAX</div>
<div id="t6" class="hidden">DELPHI</div>
</BODY>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript自然分类法算法实现代码
Oct 11 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 #Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 #Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 #Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 #Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 #Javascript
在JavaScript中如何解决用execCommand(
Oct 19 #Javascript
简单谈谈Javascript中类型的判断
Oct 19 #Javascript
You might like
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
Yii rules常用规则示例
2016/03/15 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python实时获取cmd的输出
2015/12/13 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
迎国庆演讲稿
2014/09/15 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
班主任开场白
2015/06/01 职场文书
学雷锋感言
2015/08/03 职场文书