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 遍历json数组的实现代码
Sep 22 Javascript
js href的用法
May 13 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
javascript检查某个元素在数组中的索引值
Mar 30 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
谈谈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常用字符串比较函数实例汇总
2014/11/24 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
js 操作select相关方法函数
2009/12/06 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
python 编码规范整理
2018/05/05 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
个人对照检查材料
2014/02/12 职场文书
2014年党支部承诺书
2014/05/30 职场文书
老龄工作先进事迹
2014/08/15 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
求职自我评价参考范文
2019/05/16 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
go语言中fallthrough的用法说明
2021/05/06 Golang
CSS基础详解
2021/10/16 HTML / CSS
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL