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 相关文章推荐
jquery实现div阴影效果示例代码
Sep 16 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
jquery if条件语句的写法
May 19 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
Bootstrap响应式表格详解
May 23 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 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 数学运算验证码实现代码
2009/10/11 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python Grid使用和布局详解
2018/06/30 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
python输入多行字符串的方法总结
2019/07/02 Python
python excel转换csv代码实例
2019/08/26 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python从Oracle读取数据生成图表
2020/10/14 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
课前三分钟演讲稿
2014/04/24 职场文书
市场营销策划方案
2014/06/11 职场文书
借名购房协议书范本
2014/10/06 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android