導航:首頁 > 編程語言 > 告白效果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相關的資料
- javascriptattr
- 告白效果js
- 離散化java
- 右對齊代碼
- 計算機游戲程序設計課程設計
- javasocket獲取埠號
- js簡訊驗證碼倒計時
- 黑馬java培訓怎麼樣
- 美團的程序員累嗎
- 手機qq臨時會話代碼
- datedatetimejava
- java用遞歸求階乘
- jsp跳轉到後台
- java字元串轉編碼
- 左對齊css代碼
- java分頁技術實現視頻教程
- 51單片機的程序改成430
- 肉雞程序
- matlab中子程序
- jquery調用java函數
- windows任務計劃程序
- 錯誤代碼8007007a
- javascript檢查輸入
- mvcjs返回false後台仍執行
- 新手程序員沒人帶
- 移動端js
- javajoin字元串
- 中紅色代碼怎麼辦
- 片源代碼
- java動態代理的原理流程
- jsnew類
- 讀取u盤程序
- 對js對月份加減
- javajive
- 網站設計代碼
- aspnet輸出json
- javalog清空日誌文件
- 三星s5安裝程序到sd卡上
- 華擎0d代碼
- java設置標題欄顏色設置
- b2c電商網站源碼java
- java輸出五行菱形