jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图

 本文给大家分享的是使用jQuery结合CSS3制作的仿猎豹浏览器宽屏banner焦点图特效,代码很简单,效果却非常棒,而且兼容各大浏览器,这里推荐给大家,有需要的小伙伴参考下。

 
 

jQuery结合css3动画属性制作猎豹浏览器宽屏banner焦点图切换支持手机触屏滑动焦点图切换代码

 

代码如下:

<div class="slide-main" id="touchMain">
<a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png" /></a>
<div class="slide-box" id="slideContent">
<div class="slide" id="bgstylec">
<a stat="sslink-3" href="" target="_blank">
<div class="obj-e"><img src="images/baomi-t-1.png" /></div>
<div class="obj-f"><img src="images/baomi-kl.jpg" /></div>
</a>
</div>
<div class="slide" id="bgstylea">
<a stat="sslink-1" href="" target="_blank">
<div class="obj-a"><img src="images/bao.png" /></div>
<div class="obj-b"><img src="images/nt-1.png" /></div>
</a>
</div>
<div class="slide" id="bgstyleb">
<a stat="sslink-2" href="" target="_blank">
<div class="obj-c"><img src="images/bao-2.png" /></div>
<div class="obj-d"><img src="images/st-2.png" /><p>全新chrome内核,内存占用最低,轻巧炫酷皮肤</p></div>
</a>
</div>
</div>
<a class="next" href="javascript:;" stat="next1002"><img src="images/r-btn.png" /></a>
<div class="item">
<a class="cur" stat="item1001" href="javascript:;"></a><a href="javascript:;" stat="item1002"></a><a href="javascript:;" stat="item1003"></a>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

 

以上就是本文所述的全部内容了,希望大家能够喜欢。

时间: 2024-09-30 16:13:01

jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图的相关文章

jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图_jquery

jQuery结合css3动画属性制作猎豹浏览器宽屏banner焦点图切换支持手机触屏滑动焦点图切换代码 复制代码 代码如下: <div class="slide-main" id="touchMain">     <a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png

jquery+CSS3模拟Path2.0动画菜单效果代码_jquery

本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋

手把手教你用jQuery做动画插件

CSS样式属性动画 我们现在有很多的动画方法,滑动.淡出淡入.还有其他的显示隐藏动画,但是我们对于精确的控制动画以及动画到底怎么发生的还不太了解.我们这就来介绍一个非常强大的jQuery函数,animate,这个方法可以让你对任何的CSS属性做动画的效果.我们看看代码: $("p").animate({        padding:"20px",        fontSize:"30px"  },2000)  这段代码会动画操作所有的,将他们

CSS3动画:YouTube的红色激光进度条

本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个.   之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相关的内容,这里继续讲一个例子. 前些时候有注意到YouTube网站放出的新特性,那就是在视频页面间切换时,页面顶部会有一道华丽丽的红色激光脉冲掠过. 那不是其他什么为了炫技的东西,它是一个进度条,平时我们见了千百遍经常以转圈形式出现的进度条.当然谷歌对于进度展示的创新不止于此啦,比如用于谷歌加的下载gif

jQuery CSS3相结合实现时钟插件_jquery

废话不多说了,直接给大家贴代码了. 效果图如下所示:   简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></sc

jQuery+css3实现Ajax点击后动态删除功能的方法_jquery

本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv

一个简单的CSS3动画样式

CSS3 动画 当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果. 通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器: •规定动画的名称 •规定动画的时长 今天介绍的是国外的CSS3 Animation Cheat Sheet.Animate.css.magic css3 animation,初次看到几个动画效果,感觉很酷,看了一下代码,才发现原来就是这么简单的,就是使用了transform和animate属性组合来做的.下面将会详细的解释

jQuery+CSS3实现四种应用广泛的导航条制作实例详解_jquery

导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航

CSS3展现精彩的动画效果 css3的动画属性

文章简介:因为CSS3,动画将一切皆有可能. 热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Animation. transform属性虽然看起来可以实现动画的效果,但本质其实是静态的,说白一点其实就是一个图形的变形工具:而transition属性是一个简单 的动画属性,操作起来非常的简单:在这里主要为大家介绍Animations属性,这是个名副其实的动