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提示信息并自动隐藏的代码
Aug 29 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
vue实现单选和多选功能
Aug 11 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
CI框架附属类用法分析
2018/12/26 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python算术运算符实例详解
2017/05/31 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
《东方明珠》教学反思
2014/04/20 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
开天辟地观后感
2015/06/09 职场文书
初中语文教学研修日志
2015/11/13 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Oracle 死锁的检测查询及处理
2021/09/25 Oracle