jquery图片拖动切换效果手机wap网站图片特效.zip资源-CSDN文库

共14个文件

jpg：5个

png：2个

js：2个

182 浏览量 2024-05-02 21:06:03 上传评论收藏 608KB ZIP 举报

在本资源中，"jquery图片拖动切换效果手机wap网站图片特效.zip" 是一个用于创建手机触屏版网站的模板，特别关注于图片的拖动切换效果。这个压缩包包含了一个设计精良、自适应性强的手机网页模板，旨在提供优秀的用户体验，特别是在使用触摸屏设备时。下面将详细介绍涉及的知识点： 1. **jQuery**：jQuery 是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这个项目中，jQuery 被用来实现图片的拖动切换效果，通过编写简洁的代码就能实现复杂的用户交互。 2. **图片切换效果**：这个模板中的关键特性是图片能够通过拖动进行切换。这种效果通常是通过监听用户的触摸事件（如touchstart, touchmove, touchend）来实现的，结合CSS3的过渡和动画属性，使得图片在滑动时平滑地展示下一个或上一个图片。 3. **自适应设计（Responsive Design）**：模板设计采用自适应布局，意味着网站会根据用户设备的屏幕尺寸自动调整其布局和内容。这通常通过使用媒体查询（Media Queries）和百分比单位来实现，确保在不同大小的屏幕上都能保持良好的视觉效果。 4. **手机WAP网站**：WAP（Wireless Application Protocol）是指无线应用协议，常用于早期的移动互联网。在这个上下文中，"wap"可能指的是针对移动设备优化的网站，特别是那些基于文本和简单图形的低带宽体验。然而，考虑到描述中的"触屏版"和"响应式"，这里可能是指现代的手机网页，它们同样适用于WAP环境，但具备更好的功能和视觉体验。 5. **触屏响应**：为了在触屏设备上提供良好的用户体验，模板需要对触摸事件做出响应。这包括确保元素可点击，滑动流畅，以及手势识别，比如双击、捏合缩放等。 6. **企业网站模板**：这个模板设计考虑到了企业网站的需求，可能包含公司介绍、产品展示、联系方式等常见模块。它应该具有专业且易于导航的界面，以便客户能快速了解企业的信息和服务。 7. **CSS3**：CSS3 是CSS的最新版本，提供了许多新的样式规则和功能，如边框半径、阴影、渐变、动画和过渡，这些都被用于此模板中以增强视觉效果和用户体验。这个压缩包提供的资源可以帮助开发者快速构建一个适合手机触屏用户的、具有动态图片切换效果的自适应企业网站。利用jQuery和CSS3的强大功能，开发者可以为用户创造一个既美观又互动的移动浏览体验。

资源推荐

资源详情

资源评论

收起资源包目录

jquery图片拖动切换效果手机wap网站图片特效.zip （14个子文件）

jquery图片拖动切换效果手机wap网站图片特效

inc

jquery.js 70KB

preview-376

default.htm 2KB

down

js_367

style.css 430B

default.htm 3KB

perfectDrag.js 3KB

bg.png 36KB

images

02.jpg 95KB

01.jpg 117KB

05.jpg 109KB

04.jpg 109KB

03.jpg 146KB

images

close.gif 111B

logo.png 19KB

vcss.css 2KB

<!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图片拖动切换效果手机wap网站图片特效-懒人模板【http://www.lanrenmb.com/yidongyunying/shoujijianzhan/】</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="perfectDrag.js"></script> <script type="text/javascript" src="../../inc/jquery.js"></script> <script type="text/javascript"> var oTimer=null; var iSpeed=0; var iNow=0; window.onload=function () { var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0]; var iStartX; new MiaovPerfectDrag ( oUl, function () { return {x:oUl.offsetLeft, y:oUl.offsetTop}; }, function (x, y) { oUl.style.left=x+'px'; //oUl.style.top=y+'px'; }, function () { stopMove(); iStartX=oUl.offsetLeft; }, function () //当拖拽结束 { if(Math.abs(oUl.offsetLeft-iStartX)>=50) { if(oUl.offsetLeft>iStartX) { iNow--; if(iNow<0) { iNow=0; } } else { iNow++; if(iNow>=oUl.getElementsByTagName('li').length) { iNow=oUl.getElementsByTagName('li').length-1; } } } startMove(-iNow*oUl.getElementsByTagName('li')[0].offsetWidth); } ); }; function startMove(iTarget) { if(oTimer) { clearInterval(oTimer); } oTimer=setInterval("doMove("+iTarget+")", 30); } function doMove(iTarget) { var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0]; var l=oUl.offsetLeft; iSpeed+=(iTarget-oUl.offsetLeft)/5; iSpeed*=0.7; l+=iSpeed; if(Math.abs(iTarget-oUl.offsetLeft)<1 && Math.abs(iSpeed)<1) { clearInterval(oTimer); oTimer=null; l=iTarget; } oUl.style.left=l+'px'; } function stopMove() { if(oTimer) { clearInterval(oTimer); } } </script> </head> <body> <div id="iphone">  <div id="wrap"> <ul> <li style="background: url(images/01.jpg)" title="Sunlife阳光妈妈">  </li> <li style="background: url(images/02.jpg)" title="Sunlife阳光妈妈">  </li> <li style="background: url(images/03.jpg)" title="Sunlife阳光妈妈">  </li> <li style="background: url(images/04.jpg)" title="Sunlife阳光妈妈">  </li> <li style="background: url(images/05.jpg)" title="Sunlife阳光妈妈">  </li> </ul> </div> </div> <p align="center">来源：网络　代码整理：<a href="http://www.lanrenmb.com/yidongyunying/shoujijianzhan/" target="_blank">懒人模板</a></p> <p align="center">* 尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> </body> </html>

评论收藏

内容反馈