Contoh dalam artikel ini menerangkan kesan pengindahan mesra lungsur turun jQuery Kod pengindahan mesra lungsur jQuery ialah kesan pengindahan lungsur turun Ia dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Penyampaian operasi:
Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.
Kod kesan pengindahan mesra lungsur jQuery yang dikongsi dengan semua orang adalah seperti berikut
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery下拉友情链接美化代码</title> <style> BODY { FONT: 12px "宋体", "微软雅黑", Arial, Tahoma, Helvetica, STHeiti, "Hiragino Sans GB"; COLOR: #363636 } DIV { PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px } SELECT { PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px } SELECT { BOX-SIZING: content-box; BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 1px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) } OPTION { PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px } .footer-select { POSITION: absolute; RIGHT: 620px; TOP: 19px } .footer_sel { BORDER-BOTTOM: #d6d6d6 1px solid; BORDER-LEFT: #d6d6d6 1px solid; LINE-HEIGHT: 22px; WIDTH: 190px; HEIGHT: 22px; COLOR: #afafaf; BORDER-TOP: #d6d6d6 1px solid; BORDER-RIGHT: #d6d6d6 1px solid } </style> <script type=text/javascript src="js/jquery-1.4.1.min.js"></script> </head> <body> <!-- 代码 开始 --> <div class=footer-select> <select id=FriendLink class=footer_sel> <option selected value="">友情链接</option> <option value="http://www.jb51.net/">脚本之家</option> <option value="http://www.jb51.net/">网页制作</OPTION> <option value="http://www.jb51.net/">脚本专栏</option> <option value="http://www.jb51.net/">脚本下载</option> <option value="http://www.jb51.net/">网络编程</option> <option value="http://www.jb51.net/">电子书籍</option> <option value="http://www.jb51.net/">数据库</option> </select> </div> <script type=text/javascript src="js/newbase.js"></script> <!-- 代码 结束 --> <div style="text-align:center;margin:250px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>