做出的一个图片的自动展示效果(JS版本)-阿里云开发者社区

开发者社区> 科技小能手> 正文

做出的一个图片的自动展示效果(JS版本)

简介:
+关注继续查看

在国外的网站看到一个很不错的图片自动展示效果,于是就自己做了起来,在查看代码时发现是一个JavaScript爱好者自己写了一个库文件来调用,确实看的不太懂,但效果是做出来了,页面的调用代码只需引用固定的JS文件和CSS文件,然后用户可以自己定义展示的图片。

页面调用代码如下:


  1. --表头引用的CSS文件和JS文件  
  2. <head runat="server"> 
  3. <title>无标题页</title> 
  4. <link rel="stylesheet" href="backbox.css" type="text/css" /> 
  5. <script type="text/javascript" src="js/prototype.compressed.js"></script> 
  6. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> 
  7. <script type="text/javascript" src="js/lightbox.js"></script> 
  8. <script type="text/javascript" src="js/dhtmlHistory.js"></script> 
  9. <script type="text/javascript" src="js/customsignsheader.js"></script> 
  10. </head> 
  11.  
  12. --页面调用代码(其实中主要展示是一个Div层的效果)  
  13. <div> 
  14. <div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()"> 
  15. <a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes"> 
  16. <img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a> 
  17. </div> 
  18. <a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a> 
  19. <a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a> 
  20. <a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a> 
  21. </div> 
  22.  
  23. --最后引用的库文件  
  24. <script type="text/javascript" src="js/customsignsfooter.js"></script> 

演示完整的代码DEMO下载地址: http://good.gd/159245.htm




本文转自chenkaiunion 51CTO博客,原文链接:http://blog.51cto.com/chenkai/765475

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
自动化测试|录制回放效果差异检测
闲鱼技术-深宇 概述   回归测试是指修改了旧代码后,重新进行测试以确认修改没有引入新的错误或导致其他的代码出现错误。传统的自动化回归测试需要手动编写脚本获得页面元素的视图树,与原有的元素视图树进行比对。
8177 0
ML之FE:基于单个csv文件数据集(自动切分为两个dataframe表)利用featuretools工具实现自动特征生成/特征衍生
ML之FE:基于单个csv文件数据集(自动切分为两个dataframe表)利用featuretools工具实现自动特征生成/特征衍生
36 0
3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效
 1 TiledGrid3D //TiledGrid3D //CCFadeOutTRTiles * action = CCFadeOutTRTiles::create(2, CCSize(20,20)); //CCFadeOutBLTiles * action = CCFadeOutBLTiles::create(2, CCSi
1645 0
写一个图片轮播效果的Demo(自动播放)附代码
js图片轮播切换 .imgCon { width: 450px; height: 300px;...
842 0
flash版本更新导致shopex后台上传图片无效的问题
4.8.4~4.8.5版本好像都有这个问题,下面是官方bbs上找到的补丁包,通过ftp上传覆盖就行了 文件清单文件名          文件路径:                                  说明component.
781 0
MICROSOFT IGNITE 2018 大会成功举办,Docker 现场揭秘全新版本内容!
9月24日,在佛罗里达州奥兰多举行的 Microsoft Ignite 大会上 Docker 向大家展示了最新版本的 Docker Enterprise。
1537 0
23706
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载