mutongwu
- 浏览: 452442 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
-
ubuntu的疯狂：
推荐一份完整的教程：http://blog.ddlisting ...
Emberjs学习 -
ptz19：
请问，如果把合并前的文件，不要dest 目标目录来。如： js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008：
楼主，还有个问题，<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008：
感谢楼主，用到了您的代码， 但现在好像有改动 否则会报错：修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj：
感谢分享~
Emberjs学习
HTML页面代码
相关CSS
实现的js
<body onload="init();"> <h2>Tab Menu 6</h2> <div id="div1"> <div id="divWrapper"> <ul> <li id="cnt1" class="showContent"> <div class="imgDiv"> <a href="#"><img class="imgCls" src="img/1.jpg" title="标题标题标题标题标题标题1" /></a> </div> <div class="opacityBg"></div> <div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题1</span></a></div> </li> <li id="cnt2" class="hideContent"> <div class="imgDiv"> <a href="#"><img class="imgCls" src="img/2.jpg" title="标题标题标题标题标题标题2" /></a> </div> <div class="opacityBg"></div> <div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题2</span></a></div> </li> <li id="cnt3" class="hideContent"> <div class="imgDiv"> <a href="#"><img class="imgCls" src="img/3.jpg" title="标题标题标题标题标题标题3" /></a> </div> <div class="opacityBg"></div> <div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题3</span></a></div> </li> <li id="cnt4" class="hideContent"> <div class="imgDiv"> <a href="#"><img class="imgCls" src="img/4.jpg" title="标题标题标题标题标题标题4" /></a> </div> <div class="opacityBg"></div> <div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题4</span></a></div> </li> </ul> </div> <div id="menuDiv"> <ul><li class="menuActive">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </div> <div style="clear:both;margin:0px;padding:0px;border:1px solid #000;diplay:block">some other message</div> </body>
相关CSS
/* ie6的hack */
<!--[if ie 6]>
<style>
.opacityBg{
top:-45px;
}
.imgTitle{
top:-63px;
}
</style>
<![endif]-->
*{
margin:0px;
padding:0px;
border:none;
}
body{
}
ul,li{
list-style-type:none;
}
img{
border:none;
}
/*---------------------------------------------------------------*/
#div1{
display:block;
margin-left:300px;
background-color:#ccc;
width:300px;
}
#divWrapper{
width:300px;
height:300px;
overflow:hidden;
}
.imgDiv{
height:282px;
}
.imgCls{
width:300px;
height:320px;
}
.opacityBg{
position:relative;
border:none;
width:300px;
height:20px;
background-color:#99ccff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
.imgTitle{
position:relative;
top:-20px;
}
.imgTitle a{
font:90%;
text-decoration :none;
color:#000;
}
.imgTitle a:hover{
font:90%;
color:#990000;
text-decoration :underline ;
}
/*
------------------------------------------------------
*/
#menuDiv{
width:300px;
background-color:#999;
}
#menuDiv ul{
display:inline;
margin-left:200px;
padding:0px;
background-color:#999;
}
#menuDiv ul li{
color:#fff;
background-color:#000;
display:inline;
cursor:pointer;
padding:0 2px;
margin:0 2px;
}
/*
.showContent{
display:block;
}*/
.hideContent{
display:none;
}
#menuDiv ul li.menuActive{
color:#fff;
background-color:#ff0000;
}
实现的js
function init(){
....
var menuDiv = document.getElementById('menuDiv');
// EventUtil.addHandler(menuDiv,'click',menuDivOnclick);
EventUtil.addHandler(menuDiv,'mouseover',menuDivOnMouseOver);
EventUtil.addHandler(menuDiv,'mouseout',menuDivOnMouseOut);
//全局变量
g_changeCounter = 1;
g_changeTimer = null;
//启动自动切换
activeTimer();
}
function activeTimer(){
g_changeTimer = setInterval(function(){
if(g_changeCounter == 5){
g_changeCounter = 1;
}
changeImage(g_changeCounter);
changeAcitveMenu(g_changeCounter);
g_changeCounter++;
},3000);
}
function cancelTimer(index){
clearInterval(g_changeTimer);
g_changeCounter = index || 1;
}
function changeImage(index){
var lis = $('#divWrapper li');
for(var i=0,len = lis.length; i < len; i++){
if(i != index -1){
lis[i].className = 'hideContent';
}
else{
lis[i].className = '';
}
}
}
function changeAcitveMenu(index){
var menuDiv = document.getElementById('menuDiv');
var lis = menuDiv.getElementsByTagName('li');
for(var i=0,len=lis.length; i < len; i++){
if(i+1 == index){
lis[i].className = 'menuActive';
}
else{
lis[i].className = '';
}
}
}
function menuDivOnclick(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.tagName.toLowerCase() == 'li'){
var index = target.firstChild.nodeValue;
changeAcitveMenu(index);
changeImage(index);
}
}
function menuDivOnMouseOver(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.tagName.toLowerCase() == 'li'){
var index = target.firstChild.nodeValue;
cancelTimer(index);
changeAcitveMenu(index);
changeImage(index);
}
}
function menuDivOnMouseOut(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.tagName.toLowerCase() == 'li'){
activeTimer();
}
}
- 大小: 23.2 KB
分享到：
发表评论
-
webpack简单打包PC网站前端资源
2016-02-23 14:30 1712:arrow: 1. 纯前端的打包输出,比较有局限 2 ... -
grunt构建基于seajs的网站实现
2015-06-16 16:49 1149Gruntfile.js module.exports ... -
js平滑滚动回到顶部
2015-06-10 11:42 4037优先使用 requestAnimationFrame实现。 实 ... -
fis-amd 的使用与修改
2015-05-26 16:14 3971https://github.com/fex-team/fis ... -
scrollMagic 视差与滚动动画GSAP
2015-05-19 18:14 4480scrollMagic（https://github.com/ ... -
skrollr-视差滚动动画插件
2015-05-19 14:18 1761skrollr ( https://github.com/Pr ... -
stellar插件的使用
2015-05-18 17:30 1835<!DOCTYPE html> < ... -
icon font VS svg font
2015-05-14 15:21 1225关于字体图标和SVG图标，CSS TRICK网站有较好的说明。 ... -
gulp下静态资源的合并、压缩、MD5后缀
2015-05-05 15:48 22672var gulp = require('gulp'); ... -
DOMContentLoaded VS onload VS onreadystatechange
2015-04-30 14:50 70341. DOMContentLoaded 在页面html、scr ... -
简单的css3全屏滚动
2015-04-27 16:41 1472<!DOCTYPE html> <ht ... -
jquery插件treetable 的使用
2015-04-20 16:12 12042插件的文档写得不是很好，为了能弄出异步加载的功能，小折腾了一番 ... -
sublime 侧边栏字体大小修改
2015-04-16 10:46 3848【转载自：http://jekhy.com ... -
移动端的“点透”问题
2015-04-15 14:13 1678移动端的“点透”问题，这篇博文有较好的说明： http://w ... -
scheme缺少,ie的bug
2015-04-01 17:34 545在页面上定位一个资源（JS/CSS/image），通常的url ... -
大整数相加
2015-03-26 22:18 949function repeatStr(ch, n){ ... -
getBoundingClientRect 跨浏览器实现
2015-03-18 18:30 1160<head> <script ... -
window.name 跨域
2015-03-18 17:29 922window.name跨域的基础是：iframe页面在其url ... -
window.name 跨域
2015-03-18 17:27 1window.name跨域的基础是：iframe页面在其ur ... -
HTML History API
2015-03-13 18:05 1152// 替换当前浏览器history的最后一项记录。 hi ...
相关推荐
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
MMC整流器技术解析：基于Matlab的双闭环控制策略与环流抑制性能研究,Matlab下的MMC整流器技术文档：18个子模块，双闭环控制稳定直流电压，环流抑制与最近电平逼近调制，优化桥臂电流波形，高效并网运行。,MMC整流器（Matlab），技术文档 1.MMC工作在整流侧，子模块个数N＝18，直流侧电压Udc＝25.2kV，交流侧电压6.6kV 2.控制器采用双闭环控制，外环控制直流电压，采用PI调节器，电流内环采用PI＋前馈解耦； 3.环流抑制采用PI控制，能够抑制环流二倍频分量； 4.采用最近电平逼近调制（NLM）， 5.均压排序：电容电压排序采用冒泡排序，判断桥臂电流方向确定投入切除； 结果： 1.输出的直流电压能够稳定在25.2kV； 2.有功功率，无功功率稳态时波形稳定，有功功率为3.2MW，无功稳定在0Var； 3.网侧电压电流波形均为对称的三相电压和三相电流波形，网侧电流THD＝1.47％<2％，符合并网要求； 4.环流抑制后桥臂电流的波形得到改善，桥臂电流THD由9.57％降至1.93％，环流波形也可以看到得到抑制； 5.电容电压能够稳定变化 ,工作点关键词：MMC
Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构，Simulink建模，MPPT最大功率点追踪，扰动观察法采用功率反馈方式，若ΔP>0，说明电压调整的方向正确，可以继续按原方向进行“干扰”；若ΔP<0，说明电压调整的方向错误，需要对“干扰”的方向进行改变。 ,Boost升压;光伏并网结构;Simulink建模;MPPT最大功率点追踪;扰动观察法;功率反馈;电压调整方向。,光伏并网结构中Boost升压MPPT控制策略的Simulink建模与功率反馈扰动观察法
STM32F103C8T6 USB寄存器开发详解(12)-键盘设备
科技活动人员数专指直接从事科技活动以及专门从事科技活动管理和为科技活动提供直接服务的人员数量
Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真，Flyback反激式开关电源仿真 ,Matlab; Simulink仿真; Flyback反激式; 开关电源仿真,Matlab Simulink在Flyback反激式开关电源仿真中的应用
基于Comsol的埋地电缆电磁加热计算模型：深度解析温度场与电磁场分布学习资料与服务,COMSOL埋地电缆电磁加热计算模型：温度场与电磁场分布的解析与学习资源,comsol 埋地电缆电磁加热计算模型，可以得到埋地电缆温度场及电磁场分布，提供学习资料和服务， ,comsol;埋地电缆电磁加热计算模型;温度场分布;电磁场分布;学习资料;服务,Comsol埋地电缆电磁加热模型：温度场与电磁场分布学习资料及服务
1、文件内容：ibus-table-chinese-yong-1.4.6-3.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ibus-table-chinese-yong-1.4.6-3.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
基于51单片机protues仿真的汽车智能灯光控制系统设计（仿真图、源代码） 一、设计项目 根据本次设计的要求，设计出一款基于51单片机的自动切换远近光灯的设计。 技术条件与说明： 1. 设计硬件部分，中央处理器采用了STC89C51RC单片机； 2. 使用两个灯珠代表远近光灯，感光部分采用了光敏电阻，因为光敏电阻输出的是电压模拟信号，单片机不能直接处理模拟信号，所以经过ADC0832进行转化成数字信号； 3. 显示部分采用了LCD1602液晶，还增加按键部分电路，可以选择手自动切换远近光灯； 4. 用超声模块进行检测距离；
altermanager的企业微信告警服务
MyAgent测试版本在线下载
Comsol技术：可调BIC应用的二氧化钒VO2材料探索,Comsol模拟二氧化钒VO2的可调BIC特性研究,Comsol二氧化钒VO2可调BIC。 ,Comsol; 二氧化钒VO2; 可调BIC,Comsol二氧化钒VO2材料：可调BIC技术的关键应用
C++学生成绩管理系统源码
基于Matlab与Cplex的激励型需求响应模式：负荷转移与电价响应的差异化目标函数解析,基于Matlab与CPLEX的激励型需求响应负荷转移策略探索,激励型需求响应 matlab +cplex 激励型需求响应采用激励型需求响应方式对负荷进行转移，和电价响应模式不同，具体的目标函数如下 ,激励型需求响应; matlab + cplex; 负荷转移; 目标函数。,Matlab与Cplex结合的激励型需求响应模型及其负荷转移策略
scratch介绍（scratch说明）.zip
内容概要：本文全面介绍了深度学习模型的概念、工作机制和发展历程，详细探讨了神经网络的构建和训练过程，包括反向传播算法和梯度下降方法。文中还列举了深度学习在图像识别、自然语言处理、医疗和金融等多个领域的应用实例，并讨论了当前面临的挑战，如数据依赖、计算资源需求、可解释性和对抗攻击等问题。最后，文章展望了未来的发展趋势，如与量子计算和区块链的融合，以及在更多领域的应用前景。 适合人群：对该领域有兴趣的技术人员、研究人员和学者，尤其适合那些希望深入了解深度学习原理和技术细节的读者。 使用场景及目标：①理解深度学习模型的基本原理和结构；②了解深度学习模型的具体应用案例；③掌握应对当前技术挑战的方向。 阅读建议：文章内容详尽丰富，读者应在阅读过程中注意理解各个关键技术的概念和原理，尤其是神经网络的构成及训练过程。同时也建议对比不同模型的特点及其在具体应用中的表现。
该文档提供了一个关于供应链管理系统开发的详细指南，重点介绍了项目安排、技术实现和框架搭建的相关内容。 文档分为以下几个关键部分： 项目安排：主要步骤包括搭建框架（1天），基础数据模块和权限管理（4天），以及应收应付和销售管理（5天）。 供应链概念：供应链系统的核心流程是通过采购商品放入仓库，并在销售时从仓库提取商品，涉及三个主要订单：采购订单、销售订单和调拨订单。 大数据的应用：介绍了数据挖掘、ETL（数据抽取）和BI（商业智能）在供应链管理中的应用。 技术实现：讲述了DAO（数据访问对象）的重用、服务层的重用、以及前端JS的继承机制、jQuery插件开发等技术细节。 系统框架搭建：包括Maven环境的配置、Web工程的创建、持久化类和映射文件的编写，以及Spring配置文件的实现。 DAO的需求和功能：供应链管理系统的各个模块都涉及分页查询、条件查询、删除、增加、修改操作等需求。 泛型的应用：通过示例说明了在Java语言中如何使用泛型来实现模块化和可扩展性。 文档非常技术导向，适合开发人员参考，用于构建供应链管理系统的架构和功能模块。
这份长达104页的手册由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队精心编撰，内容详尽，覆盖了从基础概念、技术原理到实战案例的全方位指导。它不仅适合初学者快速了解DeepSeek的基本操作，也为有经验的用户提供了高级技巧和优化策略。
主题说明： 1、将mxtheme目录放置根目录 | 将mxpro目录放置template文件夹中 2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro 模板目录填写html 3、网站模板选择好之后一定要先访问前台，然后再进入后台设置 4、主题后台地址： MXTU MAX图图主题,/admin.php/admin/mxpro/mxproset admin.php改成你登录后台的xxx.php 5、首页幻灯片设置视频推荐9，自行后台设置 6、追剧周表在视频数据中，节目周期添加周一至周日自行添加，格式：一,二,三,四,五,六,日
运行GUI版本，可二开