JS+CSS实现分类动态选择及移动功能效果代码
本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码。分享给大家供大家参考，具体如下：
这是一个类似选项卡功能的选择插件，与普通的TAb区别是加入了动画效果，多用于商品类网站，用作商品分类功能，不过其它网站也可以用，点击运行一下你会知道它的奥妙，它用JavaScript模拟出了Flash动画的效果，很贴切。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/
具体代码如下：
<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程序设计有所帮助。
相关推荐
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
JS简单实现城市二级联动选择插件的方法
本文实例讲述了JS简单实现城市二级联动选择插件的方法.分享给大家供大家参考.具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的.本效果只是为了演示如何实现,里面的数据不全,需要的自己可以添加. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ejld-city-cha-plug-codes/ 具体代码如下: <htm
-
JS实现的5级联动Select下拉选择框实例
本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se
-
js实现Select头像选择实时预览代码
本文实例讲述了js实现Select头像选择实时预览代码.分享给大家供大家参考.具体如下: 这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/ 具体代码如下: <!DOCTYPE ht
-
JS实现网页游戏中滑块响应鼠标点击移动效果
本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html
-
js模拟淘宝网的多级选择菜单实现方法
本文实例讲述了js模拟淘宝网的多级选择菜单实现方法.分享给大家供大家参考.具体如下: 这是一款基于js模拟淘宝网的多级选择菜单代码,这款菜单是模拟淘宝网的,是很早时候的淘宝网,现在已经没有了,本款菜单可以像级联菜单那样一级一级的选择数据,最后确定出数据. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ftaobao-select-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D
-
js实现的简单radio背景颜色选择器代码
本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT
-
JS和css实现检测移动设备方向的变化并判断横竖屏幕
方法一:用触发手机的横屏和竖屏之间的切换的事件 复制代码 代码如下: window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false); 方法二:监听调整大小的改变 复制代码 代码如下: window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度,内
-
js判断浏览器类型及设备（移动页面开发）
下面主要用javascript代码来判断浏览器类型及设备访问该网页面,支持手机上的所有浏览器,具体代码如下. <!DOCTYPE html> <html> <head> <title>JS判断是什么设备是什么浏览器-www.jb51.net</title> <meta charset="utf-8"> <meta name="apple-touch-fullscreen" content=
-
键盘上下键移动选择table表格行的js代码
//这是要操作的表格: 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 var rowNo= -1; var tableId = 'tb'; var inputId = 'show'; var selectedColor = "#FF0000" function document.onkeydown() { //事件的标识代码 if (event.keyCode == 38) { for(var k=0;k [Ctrl+A 全选 注:如需引入外部Js需刷新才能执