jquery实现从不同角度滑入滑出的左右全屏banner.zip_jquery动画图片自动滑入资源-CSDN文库

共26个文件

png：21个

js：3个

html：1个

版权申诉

167 浏览量 2022-11-07 00:25:30 上传评论收藏 1.65MB ZIP 举报

标题 "jquery实现从不同角度滑入滑出的左右全屏banner.zip" 描述了一个使用jQuery库来创建的全屏滑动Banner效果，其中包含了多种滑入滑出动画，可能涉及了不同的视图角度，比如从左侧、右侧或者带有独特视角的过渡效果。这种功能在网页设计中常用于展示产品、图片轮播或者吸引用户注意力。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个项目中，jQuery被用来实现以下关键知识点： 1. **选择器**：jQuery提供了一种简单的方式来选取DOM元素，如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有类名为`class`的元素。 2. **事件绑定**：jQuery允许开发者轻松地绑定各种事件，如`click()`、`mouseover()`等。在这个Banner中，可能会使用`$(document).ready()`确保页面加载完成后执行代码，以及`$(window).scroll()`监听滚动事件。 3. **动画效果**：jQuery的`animate()`函数可以创建自定义的动画效果，例如改变元素的位置、透明度等属性。实现滑入滑出效果时，可能涉及到改变元素的`left`或`right`属性，以及`opacity`值。 4. **CSS3转换**：为了实现“不同角度”的滑动效果，jQuery可能结合了CSS3的`transform`属性，如`rotate()`、`translateX()`或`translate3d()`，来创造出视觉上的空间感和动态感。 5. **轮播功能**：Banner通常具有自动切换和手动切换的功能。这可能通过计时器(`setInterval()`)配合`next()`或`prev()`方法实现，同时还需要考虑触碰边缘时的循环播放逻辑。 6. **触摸事件支持**：对于移动设备，需要处理触摸事件如`touchstart`、`touchmove`和`touchend`，以实现平滑的滑动体验。 7. **响应式设计**：全屏Banner可能需要适应不同屏幕尺寸，这涉及到媒体查询(`@media`)和百分比布局等响应式设计技术。 8. **插件开发**：如果 Banner 是作为一个可复用的组件，可能已经封装成了一个jQuery插件，具备配置项和API供其他开发者调用。 9. **性能优化**：考虑到性能，可能使用了`stop()`防止动画堆积，以及`$.proxy()`保持正确的上下文。 10. **兼容性处理**：对于老版本的浏览器，可能需要引入jQuery的polyfill库，如Modernizr，以确保动画效果在各种环境下都能正常工作。在压缩包内的文件"132677868068919790"中，可能包含HTML文件（展示Banner结构和内容），CSS文件（定义样式和动画），以及JavaScript文件（包含上述提到的jQuery代码逻辑）。通过解压并查看这些文件，可以更深入地了解这个全屏滑动Banner的实现细节。

资源推荐

资源详情

资源评论

收起资源包目录

jquery实现从不同角度滑入滑出的左右全屏banner.zip （26个子文件）

132677868068919790

css

lanrenzhijia.css 3KB

images

02字.png 24KB

07L.png 4KB

06字.png 24KB

03L.png 5KB

04.png 258KB

02L.png 4KB

01.png 178KB

05L.png 4KB

07.png 177KB

04字.png 20KB

01字.png 18KB

06L.png 4KB

04L.png 5KB

02.png 176KB

05字.png 22KB

06.png 203KB

07字.png 25KB

01L.png 5KB

03.png 304KB

03字体左.png 17KB

05.png 177KB

index.html 8KB

jquery.js 92KB

lanrenzhijia.js 37KB

jquery.easing.1.3.js 8KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现从不同角度滑入滑出的banner焦点图</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="js/lanrenzhijia.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <link rel="stylesheet" href="css/lanrenzhijia.css" type="text/css"> </head> <body> <div class="banner"> <div id="banner-index-loading"> <div class="banner-index"> <div class="frame960 relative"> <div class="banner-img absolute"> <div class="relative"> <div class="leftimg left1" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="left: -460px; top: 0px; z-index: 0; opacity: 0; "> <img src="images/01字.png" alt="官网上线"></div> <div class="rightimg right1" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="3" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="left: 460px; top: 0px; z-index: 0; opacity: 0; "> <img src="images/01.png" alt="官网上线"> </div> <div class="leftimg left2" moveinderection="8" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="z-index: 9999; left: 0px; top: 0px; opacity: 1; "><a href="http://www.jb51.net/" title="赢家服饰品牌网站建设"><img src="images/02字.png" alt="赢家服饰品牌网站建设"></a></div> <div class="rightimg right2" moveinderection="4" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic" style="z-index: 9999; left: 0px; top: 0px; opacity: 1; "> <a target="_blank" href="http://www.jb51.net/" title="赢家服饰品牌网站建设"><img src="images/02.png" alt="赢家服饰品牌网站建设"></a></div> <div class="leftimg left3" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="3" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.mulandesign.com/cases/84.html" title="万科网络电视台官网建设"> <img src="images/03字体左.png" alt="万科网络电视台官网建设"> </a> </div> <div class="rightimg right3" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="万科网络电视台官网建设"><img src="images/03.png" alt="万科网络电视台官网建设"> </a> </div> <div class="leftimg left4" moveinderection="6" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="2" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.mulandesign.com/cases/62.html" title="朵唯手机品牌网站建设"><img src="images/05字.png" alt="朵唯手机品牌网站建设"> </a> </div> <div class="rightimg right4" moveinderection="2" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="2" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="朵唯手机品牌网站建设"><img src="images/05.png" alt="朵唯手机品牌网站建设"> </a> </div> <div class="leftimg left5" moveinderection="3" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.jb51.net/" title="面点王品牌网站改版"><img src="images/04字.png" alt="面点王品牌网站改版"> </a> </div> <div class="rightimg right5" moveinderection="7" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="7" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="面点王品牌网站改版"><img src="images/04.png" alt="面点王品牌网站改版"> </a></div> <div class="leftimg left6" moveinderection="2" moveinspeed="1700" moveintype="linear" fadeinspeed="500" fadeintype="linear" moveoutderection="6" moveoutspeed="1000" moveouttype="linear" fadeoutspeed="500" fadeouttype="linear"> <a href="http://www.mulandesign.com/cases/94.html" title="华大基因TV网站设计"> <img src="images/06字.png" alt="华大基因TV网站设计"></a> </div> <div class="rightimg right6" moveinderection="6" moveinspeed="1700" moveintype="linear" fadeinspeed="500" fadeintype="linear" moveoutderection="2" moveoutspeed="1000" moveouttype="linear" fadeoutspeed="500" fadeouttype="linear"> <a target="_blank" href="http://www.jb51.net/" title="华大基因TV网站设计"> <img src="images/06.png" alt="华大基因TV网站设计"> </a> </div> <div class="leftimg left7" moveinderection="8" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="4" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a href="http://www.jb51.net/" title="扬智科技品牌网站制作"><img src="images/07字.png" alt="扬智科技品牌网站制作"></a></div> <div class="rightimg right7" moveinderection="4" moveinspeed="1700" moveintype="easeOutCubic" fadeinspeed="500" fadeintype="easeOutCubic" moveoutderection="8" moveoutspeed="1000" moveouttype="easeOutCubic" fadeoutspeed="500" fadeouttype="easeOutCubic"> <a target="_blank" href="http://www.jb51.net/" title="扬智科技品牌网站制作"><img src="images/07.png" alt="扬智科技品牌网站制作"></a> </div> </div> </div> <ul class="banner-bt absolute"> <li><a class="pointer" target="1"><span class="ico" style="background-image: url('images/01L.png')"></span></a></li> <li><a class="pointer active" target="2"><span class="ico" style="background-image: url('images/02L.png')"></span></a></li> <li><a class="pointer" target="3"><span class="ico" style="background-image: url('images/03L.png')"></span></a></li> <li><a class="pointer" target="4"><span class="ico" style="background-image: url('images/05L.png')"></span></a></li> <li><a class="pointer" target="5"><span class="ico" style="background-image: url('images/04L.png')"></span></a></li> <li><a class="pointer" target="6"><span class="ico" style="background-image: url('images/06L.png')"></span></a></li> <li><a class="pointer" target="7"><span class="ico" style="background-image: url('images/07L.png')"></span></a></li> </ul> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉