jquery实现的V字形显示效果代码
本文实例讲述了jquery实现的V字形显示效果代码。分享给大家供大家参考，具体如下：
这里介绍jquery实现的V字形小效果，希望大家喜欢。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-show-v-txt-style-codes/
具体代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>V字形特效</title>
<script src="jquery1.3.2.js"></script>
</head>
<body>
看不到效果 的需要刷新一下...
<script type="text/javascript">
//声明变量
var Tong = {};
Tong.V = {
config: {
//每一个的距离
space:4,
//V 形的最大长度和宽度
height: 1000,
width: 130,
elHeight: 10,
elWidth: 10,
},
Create: function (config, xcolor, ycolor) {
if (!config) {
config = Tong.V.config;
}
//1.跟据 总的目标V字高度和宽度 还有每一层的间隔 计算出层数
//2.跟据 宽度计算出循环
//得到所有的行数 因为每次都是
var row = Tong.V.config.width / (Tong.V.config.space * 2);
var contentDiv = jQuery("<div><div>");
//取整数 丢掉小数部分
row = parseInt(row.toString());
for (i = 0; i < row; i++) {
var margin = i * Tong.V.config.space;
var space = parseInt(Tong.V.config.width - margin * 2);
var div = Tong.V.CreateEl(margin, 0, space, Tong.V.config, xcolor, ycolor);
contentDiv.append(div);
}
//用于返回内容数据功能
return contentDiv;
// jQuery(document.body).append(div);
}
,
//创建一个原素
CreateEl: function (x, y, s, config, xcolor, ycolor) {
var panel = jQuery(document.createElement("div"));
var leftdiv = jQuery(document.createElement("div"));
var rightdiv = jQuery(document.createElement("div"));
var spacediv = jQuery(document.createElement("div"));
//设置CSS
panel.css({
clear: 'both',
});
leftdiv.css({
marginTop: 4 + 'px',
float: 'left',
marginLeft: x + 'px',
width: config.elWidth + 'px',
height: config.elHeight + 'px',
border: "1px solid ",
backgroundColor: xcolor ? xcolor : "#06C"
});
rightdiv.css({
float: 'left',
marginTop: 4 + 'px',
marginLeft: y + 'px',
width: config.elWidth + 'px',
height: config.elHeight + 'px',
border: "1px solid ",
backgroundColor: ycolor ? ycolor : "#ff0000"
});
spacediv.css({
float: 'left',
textAlign: 'center',
backgroundColor: '#00ff00',
textSize:'15px',
width: s + 'px',
height: config.elHeight + 'px'
});
spacediv.hover(function () {
this.style.width= ( this.offsetWidth <= 50 ? 50 : this.offsetWidth)+'px';
}, function () {
this.style.width = parseInt(jQuery(this).attr("s") )+ "px";
});
spacediv.attr("s", s);
spacediv.html(s);
panel.append(leftdiv);
panel.append(spacediv);
panel.append(rightdiv);
return panel;
},
Test: function () {
var xcol = "#06C";
var ycol = "#ff0000";
for (x = 0; x < 3; x++) {
var item= Tong.V.Create(Tong.V.config
,
xcol,
ycol);
var temp = xcol;
xcol = ycol;
ycol = temp;
jQuery("#d" + x).append(item);
}
//Tong.V. Create();
}
};
jQuery(
function () {
//Tong.V.Create();
Tong.V.Test();
}
);
</script>
<div>
<div id="d0"></div>
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
基于jquery实现导航菜单高亮显示（两种方法）
项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
jquery实现鼠标滑过显示二级下拉菜单效果
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>
-
jQuery实现点击小图显示大图代码分享
本文实例讲述了jQuery实现点击小图显示大图效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的点击小图查看大图的代码,适合用于产品展示等环节,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图: ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现点击小图显示大图效果代码如下 <head> <title>jQue
-
jQuery仿淘宝网产品品牌隐藏与显示效果
本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
-
jQuery实现高亮显示网页关键词的方法
本文实例讲述了jQuery实现高亮显示网页关键词的方法.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的高亮显示网页上搜索关键词的代码,当你在文本框中输入的时候,如果下面的正文中包括你输入的内容,也就是关键字,那么这些关键字是会高亮显示的,被动态添加成黄色,看上去很醒目,就像百度快照显示关键词的样子. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type&qu
-
jQuery地图map悬停显示省市代码分享
这是一款基于jQuery实现地图map悬停显示省市代码,这样一个神奇的地图便于我们更好地了解中国,增加自己的地理知识. 下面是效果图是不是很棒. 效果演示 源码下载 为大家分享的jQuery地图map悬停显示省市代码如下 <head> <meta charset="utf-8"> <title>jQuery地图map悬停显示省市代码</title> <script src="js/lib/jquery-1.11.1.min
-
jQuery实现点击小图片淡入淡出显示大图片特效
分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览 源码下载 html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"></div&g
-
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery