CSS3+JS滚动数字时钟代码
利用CSS3+JS实现数字时钟的滚动特效,现代感很强,推荐下载使用!
前些日子,在淘宝看到一种叫看图购的效果,觉的非常不错,当时就想这种效果应该是js实现的。不料,在一次偶然的机会下,我接触到了这种效果,当时我震惊了,原来只用css就实现了,再一往下看,狂晕,那么简短!不由的引发深思,原来css可以用的这么灵活,看来自己的技巧能力是远远不够的,应该反省。好了,来看看效果吧,一如既往,一起提供附件下载:
注:简单的说明下原理
利用定位属性来排版,再利用hover伪类来显示背景图片之间的切换,ie6可能兼容不了,因为ie6不兼容hover的伪类,但是可以用csshover.htc等方法解决,请另行查找解决方法,本例不作深一步的解释
背景图片上面加一个层,默认为隐藏,当鼠标经过背景图片的时候显示,即显示出外面的正方形框框
给里面的属性加上hover,当鼠标经过某个里面的区域时,显示出hover的背景图,即正方形框框里面的对焦图
jQuery中间大图两侧小图模糊特效是一款使用两组相同的图片作为前后两组旋转木马,背景使用CSS滤镜将其模糊,两组旋转木马可以同步进行运动。
分享一个基于jQuery控制的左右滚动,自动滚动效果。效果图如下:代码一如既往的简洁易懂,有需要的可以根据自己的情况稍作修改即可直接使用。
3屏支持电脑和手机端的幻灯片轮播代码,兼容主流浏览器,推荐下载!使用方法:1、在head区域引入样式表文件freexyz.css2、在head区域引入jquery文件jquery-2.1.1.min.js3、在你的网