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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
js漂浮广告实现代码
Aug 15 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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单例模式应用详解
2013/06/03 PHP
php备份数据库类分享
2015/04/14 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JS编程小常识很有用
2012/11/26 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
hammer.js实现图片手势放大效果
2017/08/29 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
原生js实现日历效果
2020/03/02 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python实现合并两个数组的方法
2015/05/16 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python字典底层实现原理详解
2019/12/18 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
什么是唯一索引
2015/07/05 面试题
授权委托书范本(单位)
2014/09/28 职场文书
师德师风自查总结
2014/10/14 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
特岗教师个人总结
2015/02/10 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
联谊会开场白
2015/06/01 职场文书