jquery 图片中划线

最新推荐文章于 2019-07-10 11:12:41 发布

原创最新推荐文章于 2019-07-10 11:12:41 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #dreamweaver #javascript #html #function #class

这篇博客介绍如何利用jQuery实现图片上的水平线效果。通过JavaScript代码展示了如何动态设置线条的位置和宽度，以及在不同元素选择下应用此效果。涉及到的库包括jQuery和Dreamweaver中的一些CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE="JavaScript" src="./jslib/jquery-1.2.6.js" mce_src="jslib/jquery-1.2.6.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <IMG id="testimg" SRC="./images/0.jpg" mce_SRC="images/0.jpg" ALT=""> <hr id="navhr" style=" position:absolute; z-index:999; border-style:solid; border-width:1px; border-top-width:0px; border-left-width:0px; border-right-width:0px; border-color:#f00;" mce_style=" position:absolute; z-index:999; border-style:solid; border-width:1px; border-top-width:0px; border-left-width:0px; border-right-width:0px; border-color:#f00;" /> </BODY> </HTML> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head> <title>您好</title> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .line{ border-style:solid; border-width:1px; border-color:#808080 #fff #fff #808080; width:95%; } div.line{ border-style:solid; border-width:1px; border-color:#808080 #fff #fff #808080; width:95%; height:0px; overflow:inherit!important;/*没有这个dreamweaver 显示不正常*/ overflow:hidden; clear: both; float: none; margin:auto; line-height:0px; }</style> </head> <body style="background-color:#dddddd" mce_style="background-color:#dddddd"> <hr class="line" /> <div class="line">此处显示 class "line" 的内容</div> <p> </p> </body> </html> <html> <head> <mce:style></mce:style><style mce_bogus="1"> .tvline{width:240px;height:180px;border:0;} .tvline td{border-top:1 solid #000000;font:1px;filter:alpha(opacity=30)} </style> </head> <body> <table class=tvline cellpadding="0" cellspacing="0" background="photo1.jpg"> <mce:script type="javascript" language="Javascript"></mce:script> </table> </body> </html>

jquery 图片 中划线

jquery 图片中划线