`
yuanke
  • 浏览: 72927 次
  • 性别: Icon_minigender_2
  • 来自: 临沂
社区版块
存档分类
最新评论

html5+css3实现触屏左右滑动焦点图特效

html5 
阅读更多

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

 

<title>手机焦点图webkfa</title>

 

<script type="text/javascript" src="http://statics.webkfa.com/js/iscroll5.js"></script>

 

<script type="text/javascript">

 

var myScroll;

 

function loaded () {

myScroll = new IScroll('#wrapper', {

scrollX: true,

scrollY: false,

momentum: false,

snap: true,

snapSpeed: 400,

keyBindings: true,

indicators: {

el: document.getElementById('indicator'),

resize: false

}

});

}

 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>

 

<style type="text/css">

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

 

html {

-ms-touch-action: none;

}

 

body, ul, li {

padding: 0;

margin: 0;

border: 0;

}

 

body {

font-size: 12px;

font-family: ubuntu, helvetica, arial;

overflow: hidden; /* this is important to prevent the whole page to bounce */

}

 

#viewport {

position: relative;

width: 320px;

height: 320px;

margin: 0 auto;

background: #444;

overflow: hidden;

}

 

#wrapper {

width: 320px;

height: 320px;

margin: 0 auto;

}

 

#scroller {

position: absolute;

z-index: 1;

-webkit-tap-highlight-color: rgba(0,0,0,0);

width: 1280px;

height: 320px;

-webkit-transform: translateZ(0);

-moz-transform: translateZ(0);

-ms-transform: translateZ(0);

-o-transform: translateZ(0);

transform: translateZ(0);

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

-webkit-text-size-adjust: none;

-moz-text-size-adjust: none;

-ms-text-size-adjust: none;

-o-text-size-adjust: none;

text-size-adjust: none;

background-color: #444;

}

 

.slide {

width: 320px;

height: 320px;

float: left;

}

 

.painting {

width: 320px;

height: 320px;

}

 

.giotto {

background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1KChvHXXXXXbPXpXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;

}

 

.leonardo {

background: url(http://gi2.md.alicdn.com/bao/uploaded/i2/TB1p9VGHpXXXXbTXXXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;

}

 

.gaugin {

background: url(http://gi4.md.alicdn.com/bao/uploaded/i4/TB1wkQsHpXXXXXXXVXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;

}

 

.warhol {

background: url(http://gi1.md.alicdn.com/bao/uploaded/i1/TB1yC_CHpXXXXaXXpXXXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg) no-repeat;

}

 

#indicator {

position: relative;

width: 110px;

height: 20px;

margin: 10px auto;

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUBAMAAABohZD3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUGCDYztyDUJgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAGFBMVEUAAADNzc3Nzc3Nzc3Nzc3Nzc3Nzc3///8aWwwLAAAABnRSTlMAX5Ks3/nRD0HIAAAAAWJLR0QHFmGI6wAAAFtJREFUGFdjYGBgEHYNMWRAAJE0IHCEc5nSwEABxleD8JOgXMY0KBCA8FlgfAcIXwzGT4TwzWD8ZAjfDcZPgfDDYPxU7Hx09ejmoduH7h5096L7B8O/6OGBGl4APYg8TQ0XAScAAAAASUVORK5CYII=);

}

 

#dotty {

position: absolute;

width: 20px;

height: 20px;

border-radius: 10px;

background: #777;

}

 

</style>

</head>

<body onload="loaded()">

 

<div id="viewport">

<div id="wrapper">

<div id="scroller">

<div class="slide">

<div class="painting giotto" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DVICtvBRjhd3ghojqVNxKsaj7aemm3RqwAdcPAzm7QvSLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg252zljILeUsCJjU1rGI%252FCdg%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>

</div>

<div class="slide">

<div class="painting leonardo" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DgnVnQg%252B7R266k0Or%252B%252BH4tJUNOtS%252ByOHUog%252F3K1zSOxCLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2ThPxtthXNEcSylKFLQGPZA%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>

</div>

<div class="slide">

<div class="painting gaugin" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3DNzTlGEruIm%252B6k0Or%252B%252BH4tNH8sKeq0nsMHF349Ju02cmLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2152ioe3eV9CWdwoF8TjZ%252FA%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>

</div>

<div class="slide">

<div class="painting warhol" onclick="window.open('http://redirect.simba.taobao.com/rd?w=unionnojs&f=http%3A%2F%2Fai.taobao.com%2Fauction%2Fedetail.htm%3Fe%3Df%252BqcdSGgCEm6k0Or%252B%252BH4tJrXuYH566UyLkbXnAd2OqmLltG5xFicOdXrTUTgh9sMDPIwxrc30riTuehU0K12kjPA6v8i1VWY6YEhT8E8egVAUCIL0cVeWm3abJM7sDg2WKmK4Du%252BRklnKKbQjb4E2g%253D%253D%26ptype%3D100010%26from%3Dbasic&k=5ccfdb950740ca16&c=un&b=alimm_0&p=mm_43439014_7536100_25516494')"></div>

</div>

</div>

</div>

</div>

 

<div id="indicator">

<div id="dotty"></div>

</div>

<p style="margin:0 auto;width:320px;">这个代码主要是为了做手机网页的</p>

</body>

</html>

分享到：
| Extjs学习总结之EditGridPanel可编辑表格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5+CSS实现的左右全屏焦点图代码.zip

    在这个"HTML5+CSS实现的左右全屏焦点图代码"中，开发者利用这两者的力量，创建了一个吸引用户的全屏焦点图组件，通常用于展示产品、图片轮播或者作为网站的开场动画。 首先，让我们来看看HTML5的角色。HTML5是超...

    jquery+css3实现的手机端响应式焦点图特效源码.zip

    该压缩包文件“jquery+css3实现的手机端响应式焦点图特效源码.zip”包含了一个使用jQuery和CSS3技术构建的手机端响应式焦点图的实现。这种焦点图是一种常见的网页设计元素，用于展示一组图片或内容，并通过滑动或...

    Flash+Xml+js实现8屏图片自动切换焦点图效果

    【标题】：“Flash+Xml+js实现8屏图片自动切换焦点图效果”指的是利用Adobe Flash、XML（可扩展标记语言）以及JavaScript技术，创建一个能够自动在8个不同屏幕上进行图片切换的焦点图组件。这种组件常用于网站设计中...

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

    在本文中，我们将探讨如何使用jQuery和CSS3技术来创建一个仿猎豹浏览器宽屏的Banner焦点图特效。这个特效不仅具有吸引人的视觉效果，而且兼容各种主流浏览器，包括对手机触屏滑动的支持。 首先，HTML结构是构建焦点...

    jQuery实现的卡片式焦点图动态特效源码.zip

    《jQuery实现的卡片式焦点图动态特效源码详解》 在网页设计中，动态效果能够提升用户体验，使得网站更加生动有趣。jQuery作为一种广泛使用的JavaScript库，因其简洁的API和丰富的插件，使得开发者能轻松实现各种...

    手机网站banner滑动效果

    一款兼容PC端/手机移动端可左右滑动（拖动）焦点图网页特效，可自适应宽度、可用鼠标左右拖动切换图片、可在触屏移动设备上左右滑动切换图片；移动端、触屏设备web前端开发必备JS焦点图代码。请用支持HTML5+CSS3主流...

    Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

    Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css...

    jQuery手机焦点图切换特效代码.zip

    总结来说，利用jQuery实现手机焦点图切换特效，涉及到HTML结构设计、CSS样式调整和jQuery脚本编写等多个环节。通过熟练掌握这些技能，开发者可以创造出更加生动、有趣的移动页面，提高用户在浏览过程中的体验感。...

    jQuery的图片滑块焦点图插件整理推荐

    7. jquery实现的支持手机触屏滑动切换的选项卡切换特效：这款插件专为移动设备设计，通过触摸屏幕左右滑动实现选项卡之间的切换，使得在手机上浏览网页时的导航体验更加流畅。 8. jQuery动态生成订单进度步骤：这款...

    超赞的jQuery图片滑块动画特效代码汇总

    5. **宽屏自动播放左右滑动焦点图**：宽屏设计，支持自动播放，图片切换时有三张图片的互动效果。 6. **宽屏左右切换焦点图**：具备宽屏视觉效果，配备左右切换按钮，提升用户操作体验。 7. **HTML5移动端图片左右...

    Swiper响应式缩略图片幻灯片切换特效

    Swiper利用JavaScript事件监听和处理，以及DOM操作，实现幻灯片的滑动切换、缩略图的交互等特效。 8. **配置选项**：Swiper提供了大量的配置选项，如自动播放、循环模式、滑动手势、分页器、导航箭头等，可以根据...

    jq实现全屏图片轮换效果特效代码

    全屏图片轮换效果可以使网站的焦点图区域更具吸引力，通过左右滚动切换，以及图片的上下自适应布局，提升用户体验。 首先，我们需要理解jQuery库的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、...

Magicbox
Global site tag (gtag.js) - Google Analytics