HTML图片代码

给图⽚加边框代码图⽚加边框代码这⾥教⼤家只需⽤html代码就能给你的图⽚加出各种漂亮的相框，使⽤⽅法，点“<>”加⼊代码，换上你的图⽚⽹址，适当调整宽度和颜⾊，就可以让你的图⽚锦上添花！下⾯是代码：1、简单线框 <img src="图⽚地址" style="border:5 solid #ffCCCC"> 2、双线框 <img src="图⽚地址" style=" border:7 double #666FF"> 3、虚线框 <img src="图⽚地址" style=" border:3 dashed #990000"> 4、凸出框： <img src="图⽚地址"style="border:10 outset #CCCCFF"> 5、嵌⼊框： <img src="图⽚地址"style="border:15 inset #ff9900"> 6、脊状框： <img src="图⽚地址" style="border:15 ridge #33FF66"> 7、凹槽框 <img src="图⽚地址" style="border:15 groove#CC6666"> 8、粒状阴影框 <img src="图⽚地址"style="filter:progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=30"> 做个效果：⼀原图： 1、简单线框 2、双线框 3、虚线框 4、凸出框： 5、嵌⼊框： 6、脊状框： 7、凹槽框 8、粒状阴影框 代码： —————————————————— ⼆原图： 1. 图⽚单边框的代码:<center><imgsrc="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:3 solid #ff0000"></center> 下⾯是⼀的效果图: 2.图⽚双边框的代码: <center> <imgsrc="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:5 double green"></center> 下⾯是⼆的效果图: 3.⽴体镜框的代码（⼀）: <center><imgsrc=/DownloadImg/2009/3/26/92346_2922658_2.jpgstyle="border:25 outset #ff88ff"></center> 下⾯是三的效果图: 4.⽴体镜框的代码（⼆）: <center><imgsrc="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:25 inset #ff88ff"></center> 下⾯是四的效果图: 5.虚线框的代码:<center> <img src="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:4 dashed #ff0000"></center> 下⾯是五的效果图: 6.凹槽框的代码: <center> <img src="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:25 groove green" border="0"></center> 下⾯是六的效果图: 7.脊状框的代码: <center> <imgsrc="/DownloadImg/2009/3/26/92346_2922658_2.jpg"style="border:25 ridge green" border="0"></center> 下⾯是七的效果图: ⼋：⽴体阴影框代码如下： <TABLE style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)" height=100 cellSpacing=3 cellPadding=15 width=100 border=2><TBODY><TR><TDAlign=center align=middle bgColor=#ffffff><IMG src="图⽚地址"></TD></TR></TBODY></TABLE> 效果图：九：⽴状阴影代码如下： <IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#cc8888,strength=30)" src="图⽚地址"> 效果图：当然以上代码也可⽤在制作⽇记的边框上，或者个⼈档案⾥的⽂字和图⽚，⼤家可以举⼀反三。

HTML代码中IMG标签的全部属性例:写一段图片HTML代码<img src="http://localhost/phpwind6/zx/6.jpg" id="imgs" lang="en-us" alt="测试">该标签为img的代码中已可以看出已含有了四个属性,包括src id lang alt,加上本身的img标签有5个属性.那么该img标签在正常的情况下倒底还含有多个属性?(包含对象),我现在为大家一一列出来(以上面那句代码为例,并附上它的所有值),所有在IE环境下有效可用的对象属性都在下面.学习HTML的朋友可以借鉴学习,也可以拿去吓人, 以下通过测试的IMG的全属性为156个,不包括子属性,而且还只是这一个img 标签的....虽然有些看起来用在IMG标签上不太合理,但确实是有效使用,IE中无错且有返回值.关键在于看你怎么用了,除了有些不常用的属性不太清楚以外,以下全是手工输的,花了4个小时,对你有用没用就看你怎么想了.不过如果你了解了以下的说明后网页的美化和代码的理解就可以扫盲和DIY了以下的img可用的属性如果你只用过10个不到,那就只能说明你菜.......language = //语言类型,如<script language="vbs">这句代码中的language 属性的值就为vbsscrollHeight = 30 //自身元素的宽度(即显示的宽度)isTextEdit = false //是否可以获取可使用该对象创建一个TextRange的对象currentStyle = 该属性含有114个对象 //返回当前属性的值,不可更改它的值document = 该属性含有209个对象 //这个就不用说了吧,是文档属性,onmouseup = null //鼠标按下后松开鼠标时触发此事件oncontextmenu = null //鼠标点右键后触发的事件isMultiLine = true //是否允许含有多行文本,多用于文本框,用在img标签上无错,但效果不大clientHeight = 30 //当前可见的该标签的高度为30,onrowexit = null //数据源控件更改这个标签内的当前的行时触发某事件,多用在form表中onbeforepaste = null //当在这个标签中粘贴内容时触发某事件,多用在文本框中onactivate = null //当这个控件被触发时(被点击或者焦点移到了该标签上)发生某事件,scrollLeft = 0 //被卷入的离左边界的宽度lang = en-us //语言属性,和language不同,这个等同于网页语言onmousemove = null //当鼠标在该标签上移动时发生某事件onmove = null //浏览器的窗口被移动时触发此事件onselectstart = null //当这个标签中的文本被选择时发生某事件parentTextEdit = 该属性含有352个对象 //又一个华丽的属性....用在框架中,作用详见第3条oncontrolselect = null //当用户将要对该对象制作一个控件选中区时触发某事件canHaveHTML = false //获取表明对象是否可以包含丰富的 HTML 标签的值,效果不明onkeypress = null //当键盘上的被按下时发生某事件,oncut = null //当该标签中发生剪切事件时触发某事件,常用于文本档标签,I onrowenter = null // 当前记录指针被移动时发生某事件,常用于文本档,onmousedown = null //按下鼠标时触发某事件onpaste = null //当在该标签中发生粘贴事件时触发某事件className = //当前标签的样式名称,这个属性常和CSS混用,比如PW的贴子目录页就用了这个id = imgs //该标签的ID值是多少onreadystatechange = null //在同步执行方式下返回的值为多少,该死的XML就和这个经常私混onbeforedeactivate = null //当前对象变为其它对象之前立即触发,好像不常用hideFocus = false //是否隐藏光标,常见于文本框dir = //它定义文字在浏览器中的排列方向,如dir= LTR则为从左到右显示反之则为 RTL,郁闷的特效isContentEditable = false //该标签无素是否可编辑,经常见于某个论坛的发贴"所见即所得"onkeydown = null //当键盘某键被按下时clientWidth = 30 //在IE中可见的高度为多少onlosecapture = null //当对象失去鼠标捕捉时触发某事件parentElement = 该属性含有495个对象 //又来一个华丽的框架获取父页元素的对象...ondrag = null //这个标签被拖动结束时发生某事件ondragstart = null //这个标签被拖动开始时发生某事件oncellchange = null // 在数据供应者中的数据变更时触发,XML可用这个玩意,我还没用过recordNumber = null //获取数据集中生成对象的原始记录,同上,XML可用onfilterchange = null //当该标签中的filter特效被改变时触发某事件onrowsinserted = null //当在当前记录集中插入新行后触发某事件ondatasetcomplete = null //数据设置完成时触发某事件,常用于控件当中,这个属性我也没用过onmousewheel = null //这个就是传说中的可以用鼠标滚动来触发某个事件... ondragenter = null //当鼠标拖动到这个标签中时触发某事件,没用过,不知道有没效onblur = null //当这个标签失去焦点时发生某事件,常见于文本框onresizeend = null //当用户更改完控件选中区中对象的尺寸时触发某事件 onerrorupdate = null //更新数据源对象中的关联数据出错时在数据绑定对象上触发某事件,XML...onbeforecopy = null //在复制前触发某事件ondblclick = null //鼠标双击时触发某事件scopeName = HTML //该元素定义的命名空间类型,不常用,反正我没用过onkeyup = null //当键按下之后被释放时触发某事件onresizestart = null //被开始改变其窗口大小时触发某事件nmouseover = null //当鼠标从该标签上移出去触发某事件onmouseleave = null //当用户将鼠标指针移出这个标签边界时触发某事件outerText = //用来获取该标签中的纯文本,包含起始处innerText = //同上,但不包含起始处onmoveend = null //当前窗口被移动完成时触发某事件tagName = IMG //这个标签的名称是某值,如该值,即IMGtitle = //主题说明,这个不说了,大家都用过offsetWidth = 30 //可见的区域的高,与clientWidth不同,它还包含边线onresize = null //当窗口被改变大小时触发某事件contentEditable = inherit //该标签是否可直接编辑,不为FALSE,能为true,inherit是默认值,继承原设定runtimeStyle = 该属性含有627个对象 //返回该标签的样式(总为空),和style与currentStyle有区别,filters = 该属性含有628个对象 //这个比较郁闷,没用过ondrop = null //拖动时发生某事件onpage = null //常用于XML的在线编辑,偶没用过,不知道具体例子onrowsdelete = null //当行将要从记录集中被删除时触发某事件tagUrn = //设置或获取在命名空间声明中指定的统一资源名称,没用过,应属于稀有属性了offsetLeft = 10 //离左边相对窗口的宽值,常用于浮动的图或层显示clientTop = 0 //距上边相对可见的窗口的高度为多少.这个倒没常用,凡正浮动特效不必靠它style = 该属性含有760个对象 //该标签的风格属性,这个大家都用得多了onfocusout = null //在移动焦点到其它元素之后立即在当前拥有焦点的元素上触发某事件,..clientLeft = 0 //同71,只是值为距左边的值ondatasetchanged = null //记录集中的数据修改完毕时触发某事件,XML中常见canHaveChildren = false //该标签是否可以包含子对象ondeactivate = null //用户切换到另一元素时触发,可见于网页编辑器的保存功能,isDisabled = false //是否可与该标签交互,常见于华丽的选项特效onpropertychange = null //当这标签属性被改变时发生某事件,这个巨有用,可用来作JS的安全检查ondragover = null //拖动移动该标签时发生某事件,感觉用JS写扑克牌游戏时经常用onhelp = null //当被按下F1或帮助按钮时发生某事件,这个可以用来自定义帮助信息,比如用在PW上ondragend = null //在拖动结束的时候,在源对象上出发某事件,这个还是感觉用来写扑克牌的....onbeforeeditfocus = null //在该标签被选中编辑前触发某事件,在线编辑,,,貌视不常用disabled = false //该标签的内容是否为禁止编辑,常见于文本框onfocus = null //当该标签获得焦点时触发某事件,常用于PW的百度广告点击插件..汗...behaviorUrns = 该属性含有762个对象 //附加到该元素行为的URN字符串的集合,这个没用过.....accessKey = //服务器控件指定键盘快捷键,比较好的JS网页游戏这个经常用,汗死......onscroll = null //滚动条被拉动时发生某事件onbeforeactivate = null //控件被触发前发生某事件,按钮之类的常用onbeforecut = null //在内容被剪切前发生某事件readyState = uninitialized //是否为只读属性,常用于该死的XMLHTTPall = 该属性含有763个对象 //all这玩意JS里面常用,是属性全局属性sourceIndex = 4 //获取对象在源序中的依次位置,常用在all集合中,是个很爽的属性onclick = null //当被当击时发生某事件scrollTop = 0 //被卷上去的高值为多少oncopy = null //当被复制时发生某事件onfocusin = null //当将要被设置为焦点之前触发某事件tabIndex = 0 //使用"Tab"键的遍历顺序,后面的数字就是顺序,从0到大的顺序,很爽的一个娱乐类属性onbeforeupdate = null //成功更新数据源对象中的关联对象前触发某事件,XMLHTTP中用outerHTML = //这个就是当前标签(包含标签)的全部内容是什么,返回HTML代码,JS常用的玩意innerHTML = //同上,但不包含标签,即不包含<和>两个符号之间的内容ondataavailable = null //只要一获得有效的数据就会被触发某事件,XMLHTTP.....offsetHeight = 30 //可见区域高,包含边框onmovestart = null //当本标签开始移动时触发某事件onmouseout = null //当鼠标移出该标签时触发某事件scrollWidth = 30 //全标签的宽值offsetTop = 15 //在可见区域中离顶部的高onmouseenter = null //鼠标移入时发生某事件onlayoutcomplete = null //LayoutRect 停止响应后触发某事件offsetParent = //该属性含有906个对象 //指定父座标的属性,...华丽的代码堆.....onafterupdate = null //当成功更新数据源对象中的关联对象后发生某事件 ondragleave = null //当拖曳操作过程中将鼠标移出合法拖曳目标时在该标签上触发某事件children = //该属性含有907个对象 //又是一个数组属性堆....start = fileopen //一个比较牛B的属性,可以定义当某事件发生时再执行该标签内容,常见于多媒体firstChild = null //指定节点的首个子节点的值是什么,XML DOM中用....偶没用过....href = http ://localhost/phpwind6/zx/6. jpg //标签中的链接地址height = 30 //高度值alt = 测试 //图片说明isMap = false //是否为热点图片,就是一个图片上可以有N个链接的那种fileModifiedDate = 04/16/2008 //文件修改日期是多少,在图片上点个右键就可以看到的fileUpdatedDate = 02/13/2008 //同上,但是为最后的更新日期,貌视2个大多数情况下都一样dataSrc = //指定绑定到指定对象的给定数据源的字段,看XML去.....onerror = null //标签中的内容被加载错误时触发某事件hspace = 0 //设置或返回图像的左边缘和右边缘的空白,配合JS又将是一个华丽的图片特效....previousSibling = null //某节点之前紧跟的节点(处于同一树层级) ,又是XML.....loop = 1 //媒体文件的开启次数,这个常见吧?没想到还能用在IMG标签..... protocol = 超文本传输协议 //协议类型lastChild = null //返回指定节点中的最后一个子节点,还是XML.....nodeName = IMG //传回该标签的名称,..为只读属性....这就是和TagName的区别....nodeType = 1 //返回已选节点的节点类型。

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。

html背景图片设置背景颜色属性(background-color)这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor 属性。

body {background-color:#99FF00;}上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

演示示例背景图片属性(background-image)这个属性为HTML元素设定背景图片，相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/background.jpg)"> 上面的代码为Body这个HTML元素设定了一个背景图片。

演示示例背景重复属性(background-repeat)这个属性和background-image属性连在一起使用，决定背景图片是否重复。

如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。

repeat-x 背景图片横向重复repeat-y 背景图片竖向重复no-repeat 背景图片不重复body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}上面的代码表示图片竖向重复。

演示示例背景附着属性(background-attachment)这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。

这个属性有两个值，一个是scroll，一个是fixed。

缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}上面的代码表示图片固定不动，不随内容滚动而动。

插入图片的代码（9种不同效果）<img src="图片路径地址" width="440" height="330"/>插入图片的代码（9种不同效果）①图片简易代码：<IMG src="图片地址" height=280 width=210>②图片超链接代码：<A href="要链接的网址"><IMG src="图片地址" height=280 width=210></A>③插入左右滚动图片：<MARQUEE width=380 height=80 onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><img src="第一张图片地址"><img src="第二张图片地址"></MARQUEE>④图片页面移动：<DIV id=Layer2 style="Z-INDEX: 2; LEFT: 10px; WIDTH: 211px; POSITION: absolute; TOP: 100px; HEIGHT: 120px"> <TABLE cellSpacing=10 cellPadding=0 width="60%" border=0><TBODY><TR class=unnamed1><TD vAlign=top width="90%" height=274><DIV align=center><MARQUEE style="FLOAT: none; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" scrollAmount=10 scrollDelay=99 direction=up width=400 height=1000 border="0"><FONT color=#0000ff><FONT face=隶书 color=red size=5><B>Qzone 联盟欢迎您加入</B></FONT><BR><BR><BR><IMG src=图片URL地址></FONT></MARQUEE></div></TD></TR></TBODY></TABLE>⑤插入背景图片： <BODY BACKGROUND="背景图片Url地址">⑥图片朦胧圆形效果：<IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">⑦图片朦胧方形效果：<IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">⑧带框图片的代码：<center><img src="图片地址" style="border-top-style:outset;border-bottom-style:outset;border-right-style:outset;border-left-style:outset"></center>⑨图片不让别人盗代码：<A HREF="void(0)" onMouseover="alert('对不起,图片不能随便下载!')"><IMG SRC="http//图片地址" Align="center" Border="0" width="99" height="50"></A>。

利⽤HTML、CSS实现的图⽚预览弹出层的教程 本篇效果利⽤HTML、CSS和Jq实现的图⽚点击预览功能，在预览时也可以点击切换图⽚。

图⽚1为整体效果，图⽚2是点击图⽚1后出现被点击图⽚的预览图⽚的名称以及说明。

图⽚1图⽚2 实现的代码： html代码：XML/HTML Code复制内容到剪贴板1. <div id="ImageMain"> <img src="1img1.jpg"/><img src="1img2.jpg"/> <img src="1img3.jpg"/> <img src="1img4.jpg"/> <img src="1img5.jpg"/> <img src="1img6.jpg"/> </div>2. <div id="ImageScaBg"></div>3. <div id="ImageSca">4. <div id="ImageContainer">5. <img id="imgCenter" src="1img3.jpg"/>6. <div id="imgLunbo"><img class="imgLunboItem" src="1img1.jpg"/></div>7. </div>8. <div id="ImageInfo">9. <h3 id="imgName"></h3>10. <p id="imgInfo"></p>11. </div>12. </div> css3代码：CSS Code复制内容到剪贴板1. #ImageMain {2. width: 630px;3. height: 500px;4. margin: 0 auto;5. margin-top: 100px;6. }7. #ImageMain>img{8. width:200px;9. height:200px;10. cursor:pointer;11. float:left;12. margin-left:10px;13. margin-top:10px;14. }15. #ImageMain>img:hover{16. opacity:0.8;17. }18. #ImageScaBg{19. position:fixed;20. background-color:#000;21. top:0px;22. left:0px;23. opacity:0.6;24. width:100%;25. height:100%;26. display:none;27. }28. #ImageSca{29. position:absolute;30. background-color:#333;31. border:1px solid #ccc;32. -webkit-border-radius:5px;33. -moz-border-radius:5px;34. border-radius:5px;35. display:none;36. }37. #ImageContainer{38. float:left;39. text-align:center;40. }41.42. #ImageInfo{43. float:left;44. width:300px;45. background-color:#fff;46. -webkit-border-radius:0 3px 3px 0;47. -moz-border-radius:0 3px 3px 0;48. border-radius:0 3px 3px 0;49. }50. #imgName{51. font: 15px "微软雅⿊", Arial, Helvetica, sans-serif;52. padding-left:10px;53. font-weight:500px;54. }55. #imgInfo{56. font: 13px "微软雅⿊", Arial, Helvetica, sans-serif;57. padding-left:10px;58. color:#808080;59. }60. #imgLunbo{61. height:80px;62. position:absolute;63. margin-left:50px;64. }65. .imgLunboItem{66. width:76px;67. height:76px;68. margin-left:10px;69. } JQ的代码：复制内容到剪贴板var ImageScaHandler={ImageMaxWidth:800,ImageMaxHeight:600,ImagePathJson:[{imgName:"预览弹出层测试图⽚1",imgPath:"1img1.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"},{imgName:"预览弹出层测试图⽚2",imgPath:"1img2.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"},{imgName:"预览弹出层测试图⽚3",imgPath:"1img3.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"},{imgName:"预览弹出层测试图⽚4",imgPath:"1img4.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"},{imgName:"预览弹出层测试图⽚5",imgPath:"1img5.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"},{imgName:"预览弹出层测试图⽚6",imgPath:"1img6.jpg",imgInfo:"HTML图⽚预览弹出层测试图⽚-豪车图⽚集锦(图⽚均来⾃互联⽹)"}],Init:function(){$("#ImageSca").css("width",ImageScaHandler.ImageMaxWidth 200 "px");$("#ImageSca").css("height",ImageScaHandler.ImageMaxHeight 10 "px");$("#ImageSca").css("top",($(window).height()-$("#ImageSca").height())/2 "px");$("#ImageSca").css("left",($(window).width()-$("#ImageSca").width())/2 "px");$("#ImageContainer").css("width",$("#ImageSca").width()-300 "px").css("height",$("#ImageSca").height());$("#imgLunbo").css("width",$("#ImageSca").width()-300-100 "px").css("top",$("#ImageSca").height()-90 "px");$("#ImageInfo").css("height",$("#ImageSca").height());$("#ImageMain>img").click(function(){ImageScaHandler.ChangeImage($(this));});ImageScaHandler.GetImage();$("#ImageSca").click(function(event){event.stopPropagation();});$("#ImageScaBg").click(function(event){ImageScaHandler.Hide();});},Show:function(){$("#ImageSca").css("display","block");$("#ImageScaBg").css("display","block");},Hide:function(){$("#ImageSca").css("display","none");$("#ImageScaBg").css("display","none");},GetImage:function(){$("#imgLunbo").children().remove();for(var i=0;i<ImageScaHandler.ImagePathJson.length;i ){var mImage=document.createElement("img");mImage.className="imgLunboItem";mImage.src=ImageScaHandler.ImagePathJson[i].imgPath;$("#imgLunbo").append(mImage);mImage.onclick=function(){$(".imgLunboItem").css("border","0px solid #000");ImageScaHandler.ChangeImage($(this));}}},ChangeImage:function(target){$("#ImageContainer>img").attr("src",$(target).attr("src"));$("#ImageContainer>img").css("margin-top",100 "px");ImageScaHandler.Show();$(".imgLunboItem").css("border","0px solid #000");for(var i=0;i<ImageScaHandler.ImagePathJson.length;i ){if(ImageScaHandler.ImagePathJson[i].imgPath==$(target).attr("src")){$("#imgName").html(ImageScaHandler.ImagePathJson[i].imgName);$("#imgInfo").html(ImageScaHandler.ImagePathJson[i].imgInfo);$($(".imgLunboItem")[i]).css("border","2px solid #efefef");}}}}　以上就是利⽤HTML、CSS和Jq实现的图⽚点击预览功能，谢谢阅读，希望能帮到⼤家，请继续关注，我们会努⼒分享更多优秀的⽂章。

使⽤HTML截图并保存为本地图⽚的实现代码具体代码如下所⽰：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html2canvas_download</title><style>a {cursor: pointer;color: rgb(85, 26, 139);text-decoration: underline;}</style></head><body><div id="oDiv" style="width: 300px; height: 300px; margin: 10px; background: red; border: 5px solid gray;"><h1>hello world!</h1></div><!-- <script type="text/javascript" src="../dist/html2canvas.js"></script> --><script src="https:///html2canvas/0.5.0-beta4/html2canvas.min.js"></script><script type="text/javascript">var oDiv = document.getElementById('oDiv');// body截图// html2canvas(document.body).then(function(canvas) {// document.body.appendChild(canvas);// });html2canvas(oDiv).then(function(canvas) {document.body.appendChild(canvas);var oCavans = document.getElementsByTagName('canvas')[0];var strDataURI = oCavans.toDataURL();downLoadFn(strDataURI);});//判断浏览器类型function myBrowser() {var userAgent = erAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera") > -1;if(isOpera) {return "Opera"}; //判断是否Opera浏览器if(userAgent.indexOf("Firefox") > -1) {return "FF";} //判断是否Firefox浏览器if(userAgent.indexOf("Chrome") > -1) {return "Chrome";}if(userAgent.indexOf("Safari") > -1) {return "Safari";} //判断是否Safari浏览器if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; //判断是否IE浏览器if(userAgent.indexOf("Trident") > -1) {return "Edge";} //判断是否Edge浏览器}//IE浏览器图⽚保存本地function SaveAs5(imgURL) {var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");for(; oPop.document.readyState != "complete";) {if(oPop.document.readyState == "complete") break;}oPop.document.execCommand("SaveAs");oPop.close();}// chrome14+,firefox20+,pera15+,Edge 13+,Safari未实现function download(strDataURI) {var link = document.createElement('a');link.innerHTML = 'download_canvas_image';link.download = 'mypainting.png';link.addEventListener('click', function(ev) {link.href = strDataURI;}, false);document.body.appendChild(link);};function downLoadFn(url) {if(myBrowser() === "IE" || myBrowser() === "Edge") {SaveAs5(url);} else {download(url);}}</script></body></html>总结以上所述是⼩编给⼤家介绍的使⽤HTML截图并保存为本地图⽚的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

html插⼊图⽚⽰例（html添加图⽚）在html插⼊图⽚让图⽚显⽰需要HTML标签来实现，使⽤img标签即可实现。

⼀、html图⽚标签语法复制代码代码如下:<img src="divcss5-logo-201305.gif" width="165" height="60" />img介绍：src 后跟的是图⽚路径地址width 设置图⽚宽度height 设置图⽚⾼度⼆、具体html 图⽚显⽰实例 - TOP我们在html源代码中分别插⼊三张图⽚，⼀张原始⼤、⼀张将宽度⾼度改⼩⼩、⼀张将宽度⾼度改⼤。

1、实例完整html代码：复制代码代码如下:<!DOCTYPE html><html><head><meta charset="utf-8" /><title>图⽚插⼊html 在线演⽰ <a href="</title"></title</a>></head><body><p>原始⼤图⽚</p><p><img src="divcss5-logo-201305.gif" width="165" height="60" /></p><p>改⼩图⽚</p><p><img src="divcss5-logo-201305.gif" width="105" height="30" /></p><p>改⼤图⽚</p><p><img src="divcss5-logo-201305.gif" width="365" height="120" /></p></body></html>2、html插⼊图⽚实例截图html图⽚插⼊显⽰实例截图。

html中css设置图片大小html中利用css能控制图片大小，是个很方便的方法。

下面由店铺为大家整理了html用css设置图片大小的相关知识，希望对大家有帮助!html用css设置图片大小方法一图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢?我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。

我们看下面的代码：div img {max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px": "auto");overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。

但在IE6中无效。

◎ width:600px; 在所有浏览器中图片的大小为600px;◎ 当图片大小大于600px，自动缩小为600px。

在IE6中有效。

◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

html用css设置图片大小方法二css代码如下：img,a img{border:0;margin:0;padding:0;max-width:590px;width:expression(this.width>590?"590px":this.width);max-height:590px;height:expression(this.height>590?"590px":this.height);}这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。

html图⽚⾃适应屏幕⼤⼩（⼿机）body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul {margin: 0;padding: 0}body {min-width: 320px;font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;color: #333;-webkit-text-size-adjust: none}fieldset,img {border: 0}ol,ul {list-style: none}address,em {font-style: normal}a {color: #000;text-decoration: none}table {border-collapse: collapse}#clear {clear: both;width: 100%;background-color: #fff}#clear: after {display: block;clear: both;height: 1px;content: ''}img, fieldset {border: 0;}img {height: auto;width: auto\9;width:100%;}.content-step ul li .red{ color:#e5362b; background:none; width:inherit; vertical-align:inherit}* {-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box}.doc {padding:10px;margin: 0 auto;}.doc h1 {font-size:16px;color:#333;padding:10px 0;font-weight:500;}.shop-title {padding:10px 0;}.author {padding:10px 0;font-size:12px;}.author span {color:#333;}.author a {color:#2B8CB2;}.content {padding:20px 0;}.f-bold {background-color:#CCC5C0;color:#E5362B;padding:5px;line-height:24px;font-size:14px;}.content p {line-height:24px;padding:10px 0;text-indent:2em; font-size:14px;}.content-time {padding:20px 0;color:#000;font-weight:500;line-height:40px;}.content-time span {color:#000;}.content-time em {color:#E5362B;}.content-step {}.content-step ul {padding:20px 0;}.content-step ul li {line-height:30px;color:#5D5D5D; font-size:14px; padding-top:0}.content-step ul li .icon{ display:inline-block; background:url(../images/icon.jpg) no-repeat scroll; width:20px; height:20px; background-size:20px 20px; vertical-align:middle; margin-right:8px;} .shop-list {}.shop-list li {text-align:center;padding:20px 0;}.shop-list li p {text-align:left;color:#7A7878; text-indent:2em;}.shop-list li img {margin:0 auto;}.content-contact {color:#F15050;padding:20px 10px;line-height:30px;text-indent:2em;}.cmbc-qrcode {text-align:center;padding:20px 0;}.down-cmbc {text-align:center;display:block;margin:0 auto;}.down-cmbc img {margin:0 auto;}/*@media screen and (min-width: 480px) {.doc {font-size: 21px}}@media screen and (min-width: 640px) {.doc {font-size: 28px}}*/.list li{display:-moz-box;display:-webkit-box;display:box;}.list li p{ width:90%}.last{ text-align:right ; font-size:12px; color:#bdbdbd; padding-right:20px; margin-bottom:10px;}<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width; initial-scale=1.0"><meta name="keywords" content="test"/><meta name="description" content=""/><title>test</title><link rel="stylesheet" type="text/css" href="style/css/mobile.css"/></head><body><div class="doc"><h1>房屋装修</h1><div class="author"><span>20014-07-08</span></div><div class="shop-title"><img src="style/images/5.jpg" width="640" height="406" alt=""/></div><div class="content"><span class="f-bold">家居体验</span><p>好的家具让当代⼈⼼情愉悦，放松，好的家居设计⾮常重要。

html设置图片高度Html中如果要设置图片的高度，我们有两种方法可以达到目的，下面由店铺为大家整理了html设置图片高度的方法，希望对大家有帮助!html设置图片高度HTML中设置图片的长度和宽度有两种方法：HTML属性直接设置、css样式设置，现在一般设置样式都是使用css来设置。

设置图片高度方法一、HTML方法设置图片宽度高度1、可以直接使用HTML的元素的属性来设置图片的宽高，代码如下：<img src="test.jpg" height="200px">2、同理也可以设置width属性，不建议同时设置防止图片变形。

设置图片高度方法二、css方法设置图片的宽度和高度1、可使用css代码设置图片的宽高的代码如下：<img src="test.jpg" style="width:200px;height:200px;">补充：使用百分比值设置高度和宽度使用width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。

这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。

因此，如果要创建一个宽度与显示窗口宽度相同，高度为 30 个像素的彩色横条，可以这样实现：<img src="/i/ct_1px.gif" width="60%" height="30px" />当文档窗口的大小改变时，这个图像的大小也会随之改变提示：如果提供了一个百分比形式的 width 值而忽略了 height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。

这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。

请看下面的 HTML：<img src="/i/ct_1px.gif" width="20%" />也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像(这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形)：。

<!DOCTYPE HTML><html ><head ><title >Example</title><style type="text/css">#src>*{float: left;}#target,#src>img{border: thin solid black;padding: 2px;margin: 4px;height: 100px;width: 100px;}#target{height: 123px;width: 220px;text-align: center;display: table;}#target>p{display: table-cell;vertical-align: middle;}#target>img{margin: 1px;}img.dragged{background-color: orange;}</style></head><body ><div id="src"><img src="../../Public/Pictures/Sample Pictures/Hydrangeas.jpg" width="1024" height="768" id="tu1" alt="tu1" draggable="true"><img src="../../Public/Pictures/Sample Pictures/Lighthouse.jpg" width="1024" height="768" id="tu2" alt="tu2" draggable="true"><img src="../../Public/Pictures/Sample Pictures/Tulips.jpg" width="1024" height="768" id="tu3" alt="tu3" draggable="true"><div id="target"><p id="msg">drop here</p></div></div><script >var src=document.getElementById("src");var target=document.getElementById("target");var msg=document.getElementById("msg");var draggedID;target.ondragenter=handleDrag;target.ondragover=handleDrag;function handleDrag(e){e.preventDefault();}target.ondrop=function(e){var newElem=document.getElementById(draggedID).cloneNode(false);target.innerHTML="";target.appendChild(newElem);e.prevenDefault();}src.ondragstart=function(e){draggedID=e.target.id;e.dataTransfer.setData("Text",draggedID);e.target.classList.add("dragged");}src.ondragend=function(e){var elems=document.querySelectorAll(".dragged");for(var i=0;i<elems.length;i++){elems[i].classList.remove("dragged");}}src.ondrag=function(e){msg.innerHtml=e.target.id;}</script></body></html>。