tdy.rar_javascript资源-CSDN文库

共8个文件

png：3个

html：2个

txt：1个

版权申诉

174 浏览量 2022-09-23 06:57:49 上传评论收藏 53KB RAR 举报

在IT行业中，JavaScript是一种至关重要的编程语言，尤其在前端开发领域。这个名为“tdy.rar_javascript”的压缩包，从其描述“图片倒影效果12.rar”来看，似乎包含了一个实现图片倒影效果的JavaScript代码示例或者教程。图片倒影效果是网页设计中一种常见的视觉增强技术，它可以为网站添加动态感和美学价值。让我们来了解一下JavaScript的基本概念。JavaScript，通常简称为JS，是由Netscape公司的Brendan Eich在1995年发明的。它是一种轻量级、解释型的脚本语言，主要应用于客户端的Web开发，用于控制网页中的HTML、CSS以及JSON数据。JavaScript运行在浏览器环境中，通过DOM（文档对象模型）与网页内容交互，使网页具有动态性。在图片倒影效果的实现上，JavaScript可以通过以下几种方式来完成： 1. CSS3 Transform：CSS3中的`transform: scale(-1)`可以翻转元素，配合`position`和`z-index`，可以创建简单的倒影。然而，这种方法不适用于所有浏览器，尤其是老版本的IE。 2. 使用canvas元素：JavaScript可以操作HTML5的canvas元素，通过绘制原图并进行翻转来创建倒影。这种方法兼容性较好，但需要对canvas API有一定的了解。 3. 利用CSS精灵（Sprite）技术：将原图和倒影合并成一张大图，然后通过JavaScript动态调整CSS的背景位置来显示倒影。这种方法适用于静态倒影，且图片大小可能较大。 4. 创建两个相同图片元素，一个正常显示，另一个翻转显示，通过JavaScript动态调整两者之间的间距来模拟动态倒影效果。压缩包内的“www.pudn.com.txt”可能是一个链接或者说明文件，指向更多关于这个图片倒影效果的资源。而“11”可能是文件编号或者是代码的注释，具体含义需要解压后查看才能确定。这个压缩包提供了使用JavaScript实现图片倒影效果的实例，对于学习JavaScript和前端开发的人员来说是一个很好的学习资源。通过理解这些代码，你可以掌握如何利用JavaScript操控DOM，实现动态效果，同时也可以了解到不同的浏览器兼容性问题以及解决策略。在实际项目中，这种效果可以用于商品展示、头像选择等场景，提升用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

tdy.rar （8个子文件）

www.pudn.com.txt 218B

testsuite.html 4KB

example.jpg 26KB

reflection.js 5KB

reflection.png 9KB

attention.png 3KB

user.png 8KB

readme.html 8KB

<html> <head> <title>reflection.js</title> <script type="text/javascript" src="reflection.js"></script> <style type="text/css"> a { color: white; font-style:italic; } body { background-color: black; color: white; font-family: Georgia; line-height: 1.5; } </style> </head> <body> <table><tr><td style="padding-right: 15px;"> <h1><img src="reflection.png" class="reflect" alt="reflection.js" style="float:left;" /></h1> </td><td style="line-height: 1.5; font-style: italic;"> <p><strong>Reflection.js 1.6</strong> allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean.</p> <p>It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it'll degrade and your visitors won't notice a thing. Best of all, it's under 5KB.</p> </td></tr></table> <h2>Contents</h2> <ul> <li><a href="#settingup">Setting Up</a></li> <li><a href="#using">Using It</a></li> <li><a href="#custom">Customizing Reflections</a></li> <li><a href="#scripting">Scripting Reflections</a></li> <li><a href="#issues">Known Issues</a></li> <li><a href="#improvements">Improvements</a></li> <li><a href="#changelog">Changelog</a></li> <li><a href="#credits">Credits</a></li> </ul> <h2 id="settingup" style="clear:left;">Setting Up</h2> <p>Upload reflection.js and prototype.js and include them into your webpage.</p> <code> <script type="text/javascript" src="reflection.js"></script> </code> <h2 id="using">Using It</h2> <p>To add a reflection just add a class="reflect" to the image. View source to see example.</p>  <img src="example.jpg" alt="Example Image" class="reflect" /> <p>The reflection will automatically fade into the background colour.</p> <p>If you run a forum, you can modify your templates and add class="reflect" to the avatar HTML code to add reflections.</p> <h2 id="custom">Customizing Reflections</h2> <p>By default, the reflection will have a height 50% of the original image. Thus the height of an image with a reflection will be 1.5 times the height of the original image. The default opacity of reflections is 50%.</p> <ul> <li><p><strong>Varying the Height</strong><br />You can vary the height of a reflection by adding rheight followed by the desired height in percent to the CSS class list.</p> <p>To use a reflection 33% the height of the original image:</p> <code>class="reflect rheight33"</code> <p>Example:</p> <table><tr> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect rheight33" alt="" /><code>class="reflect rheight33"</code></td> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect rheight66" alt="" /><code>class="reflect rheight66"</code></td> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect rheight100" alt="" /><code>class="reflect rheight100"</code></td> </tr></table> <p>Tip: Especially for larger photographs, small reflections work really well (try 10%).</p> </li> <li><p><strong>Varying the Opacity</strong><br />You can vary the opacity of a reflection by adding ropacity followed by the desired opacity in percent to the CSS class list.</p> <p>To use a reflection with 30% opacity:</p> <code>class="reflect ropacity30"</code> <p>Example:</p> <table><tr> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect ropacity33" alt="" /><code>class="reflect ropacity33"</code></td> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect ropacity66" alt="" /><code>class="reflect ropacity66"</code></td> <td style="vertical-align: top; text-align: center;"><img src="user.png" class="reflect ropacity100" alt="" /><code>class="reflect ropacity100"</code></td> </tr></table> </li> </ul> <p>You can combine these two options. To create a 80% height 40% opacity reflection use:</p> <code>class="reflect rheight80 ropacity40"</code> <h2 id="scripting">Scripting Reflections</h2> <p>If you want tons of flexibility, use scripted reflections. You can make your reflections respond to user actions (e.g. changing the reflection opacity when the image is hovered over) or add reflections to scripts such as Lightbox.</p> <p><code>Reflection.add(image, options);</code></p> <blockquote> <p>Adds or modifies a reflection to an image using Javascript. If the image is already reflected but the specified opacity or height has changed, the reflection will be changed accordingly.</p> <p><em>image</em> should be an image element.</p> <p><em>options</em> can contain a value for opacity or height. Both values should be between 0 and 1.</p> <code>Reflection.add(document.getElementById("ohboy"), { height: 3/4, opacity: 2/3 });</code> </blockquote> <p><code>Reflection.remove(image);</code></p> <blockquote> <p>Removes the reflection from an image.</p> <code>Reflection.remove(document.getElementById("orly"));</code> </blockquote> <code>Reflection.defaultHeight = height;<br />Reflection.defaultOpacity = opacity;</code> <blockquote> <p>Changes the default height and opacity of reflections. The default value for both settings is 0.5.</p> </blockquote> <h2 id="issues">Known Issues</h2> <img src="attention.png" alt="Attention!" class="reflect" style="float: left;" /> <ul style="margin-left: 75px;"> <li>Reflections of animated images only work correctly in Internet Explorer.</li> <li>Reflections of scaled images will look stretched in Internet Explorer.</li> </ul> <h2 id="improvements" style="clear: left;">Improvements</h2> <p>If you've made any changes or bug fixes to reflection.js, feel free to publish and distribute them. If you contact me through <a href="http://cow.neondragon.net/index.php/383-Reflectionjs-Demo">my blog</a> I can also include the changes in the main reflection.js download.</p> <h2>Supported Browsers</h2> <ul> <li>Internet Explorer 5.5+</li> <li>Mozilla Firefox 1.5+</li> <li>Opera 9+</li> <li>Safari 2+</li> </ul> <h2 id="changelog">Changelog</h2> <p>Version 1.6</p> <ul> <li>Don't create a <div> in browsers not supporting canvas but supporting JS</li> <li>Fix gap between image and reflection in XHTML Strict</li> </ul> <p>Version 1.5</p> <ul> <li>Fix issue with reflection not appearing for wide images</li> <li>Add scriptable reflections - Reflection.add(), Reflection.remove()</li> <li>Make reflection of images with specified dimensions better</li> <li>Fix Safari issue</li> <li>Removed wholeimage class</li> <li>Created Test Suite</li> </ul> <p>Version 1.0</p> <ul> <li>Add Internet Explorer support</li> <li>Remove prototype.js dependency (filesize down from 32KB to 4KB)</li> <li>Code cleanup</li> </ul> <p>Version 0.4</p> <ul> <li>Fix problem with floated images, borders, etc.</li> <li>Removed unnecessary linebreak</li> </ul> <p>Version 0.3</p> <ul> <li>Fix for Safari in standards compliant mode</li> </ul> <p>Version 0.2</p> <ul> <li>Fix for Safari</li> </ul> <p>Version 0.1</p> <ul> <li>Initial Release</li> </ul> <h2 id="credits">Credits</h2> <p>Original idea and inspiration for the script came from <a href="http://www.jroller.com/page/gfx/">Romain Guy</a>'s <a href="http://www.jroller.com/page/gfx/?anchor=cool_effect_with_the_canvas">Crystal CD Case</a>. <a href="http://www.sitharus.com/">Sitharus</a> made it all work in Safari. <a href="http://www.andreaslinde.de/">Andreas Linde</a> helped make the script work better with CSS styles. Tralala at <a href="http://www.vbulletin.org">vBulletin.org</a> did a great job of finding bugs with reflection in Safari and fixed them! <a href="http://rakaz.nl/">Niels Leenheer</a> provided a fix for an issue in Opera 8.5 where Reflection.js may move images around. "Withi

评论收藏

内容反馈

版权申诉