代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > html教程 > HTML5+CSS3实现精美VCD包装盒个性幻灯片源码案例

HTML5+CSS3实现精美VCD包装盒个性幻灯片源码案例

html教程 围观4417次 更新日期:2017-06-26 09:13:05 留下足迹

哈,首先感谢下w3cfuns的老师,嗯~

好了,这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。
 
图片切换是不是很个性,效果也很不错,大家可以将其使用到自己的网站上。

代码如下:
  1. <script type="text/javascript" src="../../jquery-1.8.3.js"></script> 
  2. <script type="text/javascript" src="vcd.js"></script> 
  3. <script type="text/javascript">  
  4. $(function ()  
  5. {  
  6. vcd.init();  
  7. vcd.autoPlay();  
  8. });  
  9. </script> 

可以看到div#vcd是最外层容器,给它设置了一个背景;ul li 分别设置图片元素;i#cd设置背景为光盘,然后设置显示位置;div#indexBar中显示图片的索引,供点击。

CSS:

代码如下:
  1. #vcd#vcd ul, #vcd #wrapPager 
  2. width200px
  3. height272px
  4. #vcd#vcd ul, #vcd #wrapPager, #cd 
  5. backgroundurl("images/disk.png"no-repeat 0 0
  6. #vcd 
  7. positionrelative
  8. margin20px auto 0
  9. #vcd ul, #vcd #wrapPager, #cd 
  10. positionabsolute
  11. #vcd ul 
  12. background-position-263px 3px
  13. #vcd ul li, #vcd ul li a, #vcd ul li a img 
  14. displayblock
  15. width178px
  16. height264px
  17. overflowhidden
  18. #vcd ul li 
  19. top: 5px
  20. left: 2px
  21. opacity: 0
  22. /*visibility: hidden;*/ 
  23. -webkit-transition: opacity linear .6s; 
  24. /*-webkit-transition: visibility linear .6s;*/ 
  25. -moz-transition: opacity linear .6s; 
  26. -ms-transition: opacity linear .6s; 
  27. transition: opacity linear .6s; 
  28. positionabsolute
  29. #vcd ul li.active 
  30. opacity: 1
  31. /*visibility: visible;*/ 
  32. #vcd #cd 
  33. top: 64px
  34. left: 78px
  35. width146px
  36. height146px
  37. background-position-510px 0
  38. -webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s; 
  39. -moz-transition: left ease .4s, -moz-transform ease 1.2s .44s; 
  40. -ms-transition: left ease .4s, -ms-transform ease 1.2s .44s; 
  41. transition: left ease .4s, transform ease 1.2s .44s; 
  42. #vcd #cd.switch 
  43. left: 120px
  44. -webkit-transform: rotate(2520deg); 
  45. -moz-transform: rotate(2520deg); 
  46. -ms-transform: rotate(2520deg); 
  47. transform: rotate(2520deg); 
  48. #vcd #wrapPager 
  49. displayblock
  50. left: 0
  51. top: 2px
  52. #vcd #indexBar 
  53. top: 235px
  54. left: 25px
  55. text-aligncenter
  56. overflowhidden
  57. opacity: 0
  58. visibilityhidden
  59. -webkit-transition: opacity linear .6s; 
  60. -moz-transition: opacity linear .6s; 
  61. -ms-transition: opacity linear .6s; 
  62. transition: opacity linear .6s; 
  63. positionabsolute
  64. #vcd:hover #indexBar 
  65. opacity: 1
  66. visibilityvisible
  67. #vcd #indexBar a 
  68. display: inline-block
  69. margin0 4px
  70. height0
  71. width0
  72. border4px #9f9f9f solid
  73. border-radius: 100%
  74. text-indent-200px
  75. overflowhidden
  76. #vcd #indexBar a:hover, #vcd #indexBar a.active 
  77. width4px
  78. height4px
  79. border-color#05c7fe
  80. border-width2px

对于CSS大家可以照着敲一下,对于位置的布局主要就是依赖position:relative和position:absolute;然后大家会发现使用CSS3的过渡和变形:transition和transform 我简单提一下:

1、transition : left 1s ease 0s ;

参数1:需要过渡效果的属性,可以为单个属性:width,left等,也可以设置为all。

参数2:过渡的持续时间

参数3:过渡的速率动画,这个大家有兴趣可以查查,就是先慢后快,匀速之类的。

参数4:过渡开始的延时时间

transition也支持如下写法:

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s ;

2、transform支持几种变形

transform:scale(0.5) 缩放

transform:rotate(90deg)旋转90度

transform:skew(10deg 2deg)斜切,矩形转化为平行四边形

transform:matrix() 这个矩阵变形 http://www.useragentman.com/matrix/ 这个网站提供在线设计矩阵

transform:translate(40px 20px)平移

例外提供了:transform-origin:20% 20%;用于修改变形效果的起点,默认为重点

当然我们这个例子用的是旋转,也就不用修改变形效果起点了。


最后是JS:

代码如下:

  1. /** 
  2. * Created with JetBrains WebStorm. 
  3. * User: zhy 
  4. * Date: 14-6-15 
  5. * Time: 下午6:26 
  6. * To change this template use File | Settings | File Templates. 
  7. */ 
  8. var vcd = { 
  9. /** 
  10. * 常量 
  11. */ 
  12. ID_VCD: "vcd"
  13. ID_INDEXBAR: "indexBar"
  14. ID_CD: "cd"
  15. CLASS_ACTIVE: "active"
  16. CLASS_CD_SWITCH: "switch"
  17. currentIndex: 0, 
  18. isRunning: false
  19. timer: null
  20. init: function () 
  21. /** 
  22. * 初始化数据与事件 
  23. */ 
  24. vcd.vcd = $("#" + vcd.ID_VCD); 
  25. vcd.cd = $("#" + vcd.ID_CD); 
  26. vcd.imgs = $("li", vcd.vcd); 
  27. vcd.indexBar = $("#" + vcd.ID_INDEXBAR); 
  28. vcd.vcd.mouseover(function (event) 
  29. clearInterval(vcd.timer); 
  30. }); 
  31. vcd.vcd.mouseout(function () 
  32. vcd.autoPlay(); 
  33. }) 
  34. $("a", vcd.indexBar).click(vcd.dotClick); 
  35. }, 
  36. /** 
  37. * 按钮点击切换 
  38. * @param event 
  39. */ 
  40. dotClick: function (event) 
  41. //如果当前动画还在运行,则直接返回 
  42. if (vcd.isRunning)return
  43. vcd.isRunning = true
  44. $("a", vcd.indexBar).removeClass(vcd.CLASS_ACTIVE); 
  45. $(this).addClass(vcd.CLASS_ACTIVE); 
  46. vcd.currentIndex = $(this).text(); 
  47. vcd.cd.addClass(vcd.CLASS_CD_SWITCH); 
  48. setTimeout(vcd.resetDotClick, 1500); 
  49. event.preventDefault();//阻止a的默认跳转页面 
  50. }, 
  51. /** 
  52. * 当cd动画结束后,更新图片 
  53. */ 
  54. resetDotClick: function () 
  55. vcd.cd.removeClass(vcd.CLASS_CD_SWITCH); 
  56. vcd.imgs.removeClass(vcd.CLASS_ACTIVE); 
  57. vcd.imgs.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE); 
  58. vcd.isRunning = false
  59. }, 
  60. autoClick: function () 
  61. var as = $("a", vcd.indexBar); 
  62. vcd.currentIndex++; 
  63. if (vcd.currentIndex == as.length) 
  64. vcd.currentIndex = 0; 
  65. as.removeClass(vcd.CLASS_ACTIVE); 
  66. as.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE); 
  67. vcd.cd.addClass(vcd.CLASS_CD_SWITCH); 
  68. setTimeout(vcd.resetDotClick, 1500); 
  69. }, 
  70. /** 
  71. * 自动播放 
  72. */ 
  73. autoPlay: function () 
  74. vcd.timer = setInterval(function () 
  75. vcd.autoClick(); 
  76. }, 3000); 
  77. }; 

单例的写法,定义了一个对象,然后用户通过vcd.init() ;vsd.autoPlay()调用、

代码如下:
  1. <script type="text/javascript">  
  2. $(function ()  
  3. {  
  4. vcd.init();  
  5. vcd.autoPlay();  
  6. });  
  7. </script> 
重置的css我就不贴了

转载请注明:代码学堂>web前端 > html教程 > HTML5+CSS3实现精美VCD包装盒个性幻灯片源码案例

喜欢 (596) or 分享 (140)