导航:首页 > 编程语言 > 告白效果js

告白效果js

 发布时间：2025-02-07 21:35:24

⑴ 求CSS代码。想要的效果是鼠标划过菜单时弹出的二级菜单相对该选项居中显示。不要常用的左对齐和右对齐。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{background:#000;margin:0;padding:50px;position:}
ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:"宋体";color:#999;text-decoration:none;text-

align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#eee;width:100%;}
#nav a,#nav a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;

font-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;

border-right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}
hr{width:100%;height:0px;border:none;border-top:1px solid #fff;overflow:hidden;

font-size:1px;display:block;clear:both;line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}
#cbox{position:absolute;top:82px;left:50px;}
#cbox ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul a{width:150px;height:25px;line-height:25px;border-bottom:1px solid #222;display:block;}
#cbox ul a:hover,#cbox ul a.hover{background:#444;color:orange;}
#cbox ul.cb{width:120px;}
#cbox ul.cb li a{width:120px;height:27px;line-height:27px;font-weight:bold;}
</style>
<body>
<div id="navbox">
<ul id="nav">
<li><a href="#">电影</a></li>
<li><a href="#">剧集</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">综艺</a></li>
<li><a href="#">游戏</a></li>
</ul>

<hr class="h1"></hr>
<hr class="h2"></hr>
<hr class="h3"></hr>
<div id="cbox">
<ul id="c1" class="cb">
<li><a href="#">新片    ></a></li>
<li><a href="#">高清    ></a></li>
<li><a href="#">内地    ></a></li>
<li><a href="#">港台    ></a></li>
<li><a href="#">欧美    ></a></li>
<li><a href="#">日韩    ></a></li>
</ul>
<ul id="c2" class="cb">
<li><a href="#">最新    ></a></li>
<li><a href="#">娱乐    ></a></li>
<li><a href="#">新闻    ></a></li>
<li><a href="#">晚会    ></a></li>
<li><a href="#">体育    ></a></li>
<li><a href="#">科教    ></a></li>
</ul>
<ul id="c3" class="cb">
<li><a href="#">最新    ></a></li>
<li><a href="#">电视版  ></a></li>
<li><a href="#">剧场版  ></a></li>
<li><a href="#">OVA     ></a></li>
<li><a href="#">原创    ></a></li>
</ul>
<ul id="c1_1">
<li><a href="#">《将爱情进行到底》</a></li>
<li><a href="#">《戒烟不戒酒》</a></li>
<li><a href="#">《朱莉娅的眼睛》</a></li>
<li><a href="#">《寻龙夺宝》</a></li>
</ul>
<ul id="c1_2">
<li><a href="#">《爱你一万年》</a></li>
<li><a href="#">《人体蜈蚣》</a></li>
<li><a href="#">《一一》</a></li>
</ul>
<ul id="c1_3">
<li><a href="#">《霸王别姬》</a></li>
<li><a href="#">《星月童话》</a></li>
<li><a href="#">《我知女人心》</a></li>
<li><a href="#">《武林外传》</a></li>
<li><a href="#">《风月》</a></li>
</ul>
<ul id="c1_4">
<li><a href="#">《前度》</a></li>
<li><a href="#">《猛男滚死队》</a></li>
<li><a href="#">《失业生》</a></li>
<li><a href="#">《婚前试爱》</a></li>
</ul>
<ul id="c1_5">
<li><a href="#">《美人计》</a></li>
<li><a href="#">《绿野仙踪》</a></li>
<li><a href="#">《乞力马扎罗的雪》</a></li>
<li><a href="#">《88分钟》</a></li>
<li><a href="#">《兰戈》</a></li>
<li><a href="#">《盗梦空间》</a></li>
<li><a href="#">《机械师》</a></li>
</ul>
<ul id="c1_6">
<li><a href="#">《攻壳机动队》</a></li>
<li><a href="#">《女教授的隐秘魅力》</a></li>
<li><a href="#">《天使之恋》</a></li>
<li><a href="#">《妈妈要出嫁》</a></li>
<li><a href="#">《告白》</a></li>
</ul>
<ul id="c2_1">
<li><a href="#">《美人心计》</a></li>
<li><a href="#">《生活大爆炸》</a></li>
<li><a href="#">《画皮》</a></li>
<li><a href="#">《实习医生格蕾》</a></li>
<li><a href="#">《恋爱SOS》</a></li>
</ul>
<ul id="c2_2">
<li><a href="#">《宫锁心玉》</a></li>
<li><a href="#">《爱似百汇》</a></li>
<li><a href="#">《借枪》</a></li>
</ul>
<ul id="c2_3">
<li><a href="#">《爱情公寓》第一季</a></li>
<li><a href="#">《回家的诱惑》</a></li>
<li><a href="#">《梨花泪》</a></li>
<li><a href="#">《风声传奇》</a></li>
<li><a href="#">《女娲传说之灵珠》</a></li>
</ul>
<ul id="c2_4">
<li><a href="#">《只有您》</a></li>
<li><a href="#">《犀利人妻》</a></li>
<li><a href="#">《谁家灶头无烟火》</a></li>
<li><a href="#">《女拳》</a></li>
<li><a href="#">《栋笃神探》</a></li>
<li><a href="#">《国民英雄》</a></li>
</ul>
<ul id="c2_5">
<li><a href="#">《幻世浮生》第一季</a></li>
<li><a href="#">《生活大爆炸》第四季</a></li>
<li><a href="#">《实习医生格蕾》第七季</a></li>
<li><a href="#">《吸血鬼日记》第二季</a></li>
<li><a href="#">《尼基塔》第一季</a></li>
<li><a href="#">《绯闻女孩》第四季</a></li>
<li><a href="#">《行尸走肉》第一季</a></li>
</ul>
<ul id="c2_6">
<li><a href="#">《南瓜花的纯情》</a></li>
<li><a href="#">《深夜食堂》</a></li>
<li><a href="#">《樱花心中》</a></li>
<li><a href="#">《天使的诱惑》</a></li>
<li><a href="#">《示谈交渉人》</a></li>
<li><a href="#">《49日》</a></li>
</ul>
<ul id="c3_1">
<li><a href="#">《银魂》第二季</a></li>
<li><a href="#">《变形金刚：领袖》</a></li>
<li><a href="#">《花开伊吕波》</a></li>
</ul>
<ul id="c3_2">
<li><a href="#">《日常》</a></li>
<li><a href="#">《DOG》DAYS</a></li>
<li><a href="#">《花开伊吕波》</a></li>
</ul>
<ul id="c3_3">
<li><a href="#">《空之境界》最终章</a></li>
<li><a href="#">《夏娃的时间》</a></li>
<li><a href="#">《我的女神》</a></li>
<li><a href="#">《破刃之剑》第四章</a></li>
<li><a href="#">《爷爷与花》</a></li>
</ul>
<ul id="c3_4">
<li><a href="#">《黑礁》第三季</a></li>
<li><a href="#">《校园迷糊大王》</a></li>
<li><a href="#">《高智能方程式Sin》</a></li>
</ul>
<ul id="c3_5">
<li><a href="#">《爷爷与花》</a></li>
<li><a href="#">《十年》</a></li>
<li><a href="#">《37137》</a></li>
<li><a href="#">《魇》</a></li>
<li><a href="#">《我叫MT》</a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
var last_pid=last_cid=pid=cid=0;
var a_h=parseInt($("#c1 a").css("height"))+1;
var a_w=parseInt($("#c1 a").css("width"));
var nav_w=parseInt($("#nav li").css("width"));
function showMenu(){
if(cid!=last_cid){
$("#c"+last_pid+"_"+last_cid).hide();
$("#c"+last_pid+" a").eq(last_cid-1).removeClass("hover");
if(cid){
$("#c"+pid+"_"+cid).css("top",(cid-1)*a_h).css("left",(pid-1)*nav_w+a_w-16+"px").show();
$("#c"+pid+" a").eq(cid-1).addClass("hover");
}
last_cid=cid;
}
if(pid!=last_pid){
$("#c"+last_pid).hide();
$("#nav a").eq(last_pid-1).removeClass("hover");
if(pid){
$("#c"+pid).css("left",(pid-1)*nav_w-16).slideDown();
$("#nav a").eq(pid-1).addClass("hover");
}
last_pid=pid;
}
}

$("#nav a").hover(function(){
pid=$("#nav a").index($(this))+1;
cid=0;
showMenu();
},function(){
pid=cid=0;
t=setTimeout("showMenu()",50);
});
$("#cbox").mouseover(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
var ppobj=$(obj).parent().parent();
var index=ppobj.find("a").index($(obj));
var ppid=ppobj.attr("id");
var str=ppid.substring(1,ppid.length).split("_");
pid=str[0];
if(str.length==2){
cid=str[1];
}else{
cid=index+1;
}
showMenu();
}
}).mouseout(function(e){
var obj=e.target;
if($(obj).attr("id")!="cbox"){
pid=cid=0;
t=setTimeout("showMenu()",50);
}
});
</script>

原文链接:http://hi..com/lmj80/blog/item/ecea7dff3e750a0009244d3a.html

⑵ 程序员怎么表白

Attention ！！！

再过几天，

就到了恩爱秀满天的日子了！

七夕！中国情人节！

⑶ 520情人节表白网页代码~html+css+js浪漫星空❤爱心3D相册 (含音乐)

一年一度的520情人节、七夕情人节、生日礼物、告白师妹、圣诞节、元旦节跨年、程序员表白，是否想给女朋友或心仪的女生一个惊喜？今天这篇博客将分享如何使用html、css和javascript编写浪漫星空爱心3D相册代码，快来学习制作属于程序员的浪漫吧！

在表白前，我们的留言区已开放，快来展示你的独特表白方式，向心仪的人表白吧！

程序员520/七夕情人节/1314/表白/求婚，是否想给女朋友或心仪的女生一个惊喜？html、css和javascript编写的浪漫星空爱心相册表白效果，酷炫迷人，助你轻松赢得芳心，祝愿大家有情人终成眷属，天长地久。快来学习制作属于程序员的浪漫吧！

一、PC端演示：在线演示地址

二、H5端演示

❉ 代码文件目录

一、3D相册(代码实现)

1. html(相册部分)

2. js(星空部分)

❉ 3D相册裁剪(教程)

1. 需要一张图片(可自定义)

2. 相片裁剪(教程)

首先：下载美图秀秀/网络下载/或者软件安装，或使用在线链接裁剪→在线裁剪图片链接

2. 美图秀秀(电脑版)裁剪图片

1. 选择需要裁剪的图片

2. 图片裁剪大小建议在600px *600px左右，否则图片太大，页面会出现卡顿现象

3. 保存相片

❉ 歌曲mp3更换教程(教程)

如需更换mp3背景音乐，可自行下载更换即可~ mp3免费下载地址

1. 搜索需要的歌曲

2. 下载

3. 获取歌曲id

4. 关注公众号后/复制链接到浏览器打开

5. 下载mp3~下载完毕后自行替换mp3文件即可(如不想修改代码，必须保持名称一致)

❉ 做好的网页效果，如何通过发链接给别人看？

1.1 解决部署上线→部署上线工具(可永久免费使用)

1. 不需要买服务器就能部署线上，全世界都能访问你的连接啦，这里给大家推荐一个程序员必备神器~ 插件集成了超级多好用的插件，免费下载安装，简单易懂，简直神器~ 需要可在文章下方公众号获取

2. 把你的代码效果做好了以后，部署到线上，把链接发给别人，就可以让对方通过你的连接点击进去，就能看到你的网页效果啦，电脑端和手机端都可以噢！(不然别人看你的网页都要发文件过去，体验感不太好哦~)

1.1 部署流程

1.2 哇~ 部署成功

哇~ 部署成功！将你写好的页面部署上线后，全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

❉ 前端零基础入门到高级(视频+源码+开发软件+学习资料+面试题)一整套(教程)

适合入门到高级的童鞋们入手~

❉ 源码获取

❉ 关注我，点赞博文~ 每天带你涨知识!

❉ 1.看到这里了就[点赞+好评+收藏]三连~ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习：各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业模板、期末大作业模板等！「在这里有好多前端开发者，一起探讨前端Node知识，互相学习」！

❉ 3.以上内容技术相关问题可以相互学习，可关注↓公众号获取更多源码！

❉ 更多表白源码

❤100款表白源码演示地址

阅读全文

与告白效果js相关的资料

热点内容
win10安装不是打印机 浏览：822
核桃编程为什么要融资呢 浏览：28
win10软件商店怎么用 浏览：296
联想怎么启动无线网络 浏览：647
高仿苹果有ios系统吗 浏览：384
孤岛危机哪个版本好玩 浏览：228
最简单的上位机编程软件有哪些 浏览：492
缺省的文件名的扩展名 浏览：296
模联工作文件是干什么的 浏览：663
苹果手机光绘 浏览：836
怎么把窗体压缩文件 浏览：212
javascriptattr 浏览：834
包厢打碟在哪个网站下载曲子 浏览：547
粘贴被覆盖的文件如何恢复 浏览：889
lol版本52 浏览：676
如何去掉文件左下角蓝色箭头 浏览：990
告白效果js 浏览：566
离散化java 浏览：755
linux获取时间微秒 浏览：366
懒人工具箱怎么安装 浏览：965

友情链接