用JS将图片链接从 <img src=&quot 如何转成引号;xx/img.jpg&quot 如何转成引号;> 改为 <img src=&quot 如何转成引号;xx/

来源：蜘蛛抓取(WebSpider) 时间：2016-03-30 00:20 标签： quot 如何转成引号
<A HREF="2013-2014/SEASON.HTML">&L..
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
<A HREF="/SEASON.HTML"><IMG ALT="" SRC=" ...
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口网页设计师-用JS代码控制Retina图像_吞吐思的博客_天涯博客
今日访问：[$DayVisitCount$]
总访问量：520
开博时间：
博客排名：170118
厚学网文章简介：Web设计师如何制作Retina图像。
苹果公司发布了更多的产品适应Retina屏幕。到目前为止，我们知道苹果设备中支持Retina屏幕技术的有%26iPhone%26、%26iPod%26、%26iPad%26和%26Macbook Pro%26，这些设备能为用户呈现更细腻、平滑和高质量的图片效果，提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢？这就是我们今天要学的一个东东。为什么要支持Retina显示最初我并期望采用较大的图片来满足Retina屏幕显示采用巨大的图像，因为他毕竟是一个全新的技术。但后来我花了点时间做了一个统计，才意识到苹果的设置占据了很多移动端的份额，这些设备大多数是%26iPhone%26、%26iPod%26和%26iPad%26,而且这些设备都支持Retina屏幕技术。大部分使用13、15寸Retina显示屏的用户都通过%26Chrome%26、%26Firefox%26、%26Safari%26和%26IE%26上网，如果你需要支持%26Opera%26浏览器，那是你在迎合一些小众用户。（我自己的网站统计数据，就是这样的一个情况）如何创建Retina图像你可能为认为，Retina图像只需要使用高分辨率（PPI）来保存就可以，但事实并不是如此。所有你需要做的是为Retina显屏保存放大两倍的中图片，比如说你保存一张200%26200像素（css像素）的图生，你需要将图片保存成400%26400像素。这些超大型的图像显示成原始图像的大小尺寸，有助于在Retina屏幕上创建光滑和清爽的外观效果。听起来很简单，那你要怎么获取双倍大小的图像呢？使用Illustrator设计Logo和Icon图标矢量图是创建Retina图像的完美解决方案。如果你有一个Logo或ICON是EPS或者Ai文件，在导出或者复制图片到Photoshop时，矢量图它能够扩展到任何尺寸大小。粘贴的元素可以作为一个智能对象，经将保留其矢量路径，因此他可以翻一番，导了出来，作为适合Retina的一个特殊图像。使用Photoshop的矢量特性Photoshop是一个像素图形的应用软件，但这并不意味着他不具有制作矢量图形的特性。每一个图形工具都可以创建一个矢量层，而不仅仅是像素层，这样一来所有图层样式效果依然可以伸缩的。如果你把元素都乘以2，所有的效果几乎都能精确的放大两倍大小。扩大你的像素图像其中有一条规则，作为设计师的我们不想轻意的去扩大一个图像，但是如果想回去给已经你设计的网站添加Retina屏幕显示的图像，而且你也不想手动的去重新创建每个图像。通常扩展一个图像会层致一个模糊和锯齿点状，但是有一个小选项在Photoshop的图像有一个菜单选择%26Neares Neighbor%26,这样就可以勉强帮你避免模糊的外观和大量的锯齿,这样图像就可以用了。在元素还没有加载完时，他不会加载进来，但是他提供了一个晳时的替换。设计在200%，然后是缩小？你可能会想，我为什么不能创建一个两倍大小的Web布局页面，这样我就可以缩小元素来创建需要的图标。在传统的印刷设计理论中是可行的，但是在Web设计中是不行的。因为Web设计是工作在一个像素的基础上，用来创造完美的形状和线条。就算是我们按一定的比例绽放图片，然后通过Photoshop软件导出来，那么导出来的图片也是一个外表模糊的，特别是小图标的时候。如何代码控制Retina图像一旦你创建了一个标准图片的副本，而且这个副本是标准图片大小的两倍像素，那么你就可以使用不同的方法把他们加载到你的页面中。这里有一个快速对文件命名的方法，把标准图片和Retina屏幕下图片放在一个相同的文件目录下，并且Retina下图片命名的方式是在普通图像的文件名的末尾上加个%26@2x%26，比如说普通图像文件名是%26snarf.jpg%26，在Retina下我们就把图像另外命名为%26snarf@2x.jpg%26。简单的javascript方法%26script src=%26js/retina.js%26%26%26/script%26绝对简单的方法，就是使用retina.js脚本来控制调用Retina图像。简单点说，retina.js会自动检查你图片目录中的%26@2x%26图像，然后在Retina设备下替换普通的图片。CSS修改方法@media only screen and （-webkit-min-device-pixel-ratio： 2）， only screen and （min-device-pixel-ratio： 2） {header h1 a {background-image： url（images/blogspoon-logo@2x.png%26script type=%26text/javascript%26%26/* %26！［CDATA［ */（function（）{try{var s，a，i，j，r，c，l=document.getElementById（%26__cf_email__%26）;a=l.classNif（a）{s=%26%26;r=parseInt（a.substr（0，2），16）;for（j=2;a.length-j;j+=2）{c=parseInt（a.substr（j，2），16）^r;s+=String.fromCharCode（c）;}s=document.createTextNode（s）;l.parentNode.replaceChild（s，l）;}}catch（e）{}}）（）;/* ］］%26 */%26/script%26）;background-size： 164px 148}}或者，你可以通过手动修改css文件来控制Retina设备下调用Retina图像。通过媒体查询，如果媒体中条件含有%26min-device-pixel-ration：2%26,在目标元素上就调用适合Retina设备的图片%26@2x%26，但是不能忘了结对对应的元素设置%26background-size%26背景图片的尺寸和常规图片大小一样。HTML的img标签%26img src=%26images/snarf@2x.jpg%26script type=%26text/javascript%26%26/* %26!［CDATA［ */（function（）{try{var s，a，i，j，r，c，l=document.getElementById（%26__cf_email__%26）;a=l.classNif（a）{s=%26%26;r=parseInt（a.substr（0，2），16）;for（j=2;a.length-j;j+=2）{c=parseInt（a.substr（j，2），16）^r;s+=String.fromCharCode（c）;}s=document.createTextNode（s）;l.parentNode.replaceChild（s，l）;}}catch（e）{}}）（）;/* ］］%26 */%26/script%26%26 width=%26300px%26 height=%26150px%26 /%26CSS的方法是通过%26media queries%26来控制元素的背景图片，但是在HTML中可以使用%26img%26的图片标签，非常的简单，在%26img%26标签中加载%26@2x%26图像，然后通过%26img%26标签的%26width%26和%26height%26属性值来缩放图像，以达到普通图像的尺寸。英文地址：how to create retina graphics for your web designs，编译：w3cplus %26 大漠
　　厚学网拥有全国10万家培训机构,您要的培训这里都有,找培训,上厚学网
分类： |* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：515329次
积分：13105
积分：13105
排名：第548名
原创：818篇
评论：25条

我要回帖

更多关于 quot 如何转成引号 的文章

 

随机推荐