<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style>
img{border:0px; cursor:pointer;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $mouseX = 0; //鼠标X轴坐标
var $scrollLeft = 0; //滑动位置标记
var $width = 0;
//初始化
(function init(){
$("#play_list").scrollLeft($scrollLeft); //回到第一帧
$("#play_list a").click(function(){return false;}) //取消所有click
})();
//开始工作，记录鼠标位置
$("#play_list img").mousedown(function(e){$mouseX = e.pageX;return false; });
$("#play_list img").mouseup(function(e){
if($mouseX > 0){
var $move = $mouseX-e.pageX;//滑动偏移量
//点击处理
if($move==0){
window.location = $(this).parent().attr("href");
return false;
}
$mouseX = 0;$width = 0; //还原设置值
$(this).parent().prevAll().each(function() {$width += $(this).width(); }); //前面元素宽度累加
$scrollLeft = $width+$(this).width() * (($move > 0)?1:-1); //1为向左滑动 -1这向右滑动
$("#play_list").animate({ scrollLeft: $scrollLeft },500); //设置滑动位置及动画效果
}
return false;
});
//图片跟随鼠标滑动
$("#play_list img").mousemove(function(e){
if($mouseX > 0){
var $move = $scrollLeft + $mouseX-e.pageX;
$("#play_list").scrollLeft($move);
}
return false;
});
});
</script>
</head>
<body>
<div id="play_list" style="overflow:hidden; width:341px; height:191px; white-space:nowrap;">
<a href="http://koyoz.com/1.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/1.jpg" alt="相恋9年尔冬升再婚娶相恋9年女友" />
</a>
<a href="http://koyoz.com/2.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/2.jpg" alt="恋情变贤周海媚公开6年恋情变贤妇" />
</a>
<a href="http://koyoz.com/3.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/3.jpg" alt="为啥这么“熊猫”阿宝为啥这么红？" />
</a>
<a href="http://koyoz.com/4.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/4.jpg" alt="男友被捕安妮-海瑟薇前男友被捕" />
</a>
<a href="http://koyoz.com/5.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/5.jpg" alt="开价一亿天后王菲“复出”开价一亿" />
</a>
<a href="http://koyoz.com/6.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/6.jpg" alt="赞郑伊健阿Sa赞郑伊健“保存”得好" />
</a>
<a href="http://koyoz.com/7.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/7.jpg" alt="死跑龙套北影演员：甘当‘死跑龙套的’" />
</a>
<a href="http://koyoz.com/8.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/8.jpg" alt="潘玮柏死潘玮柏死盯辣妹脱衣解带" />
</a>
<a href="http://koyoz.com/9.jpg">
<img src="http://www.koyoz.com/demo/html/autoplay_xunlei/imgs/9.jpg" alt="张曼玉分尔冬升深爱张曼玉分手发呆" />
</a>
</div>
</body>
</html>
分享到：
相关推荐
在本教程中，我们将探讨如何实现仿 iPhone 的滑动显示效果，以达到真实且逼真的用户体验，特别是针对手机访问 WAP 网站时的图片浏览。这种效果是 iPhone 用户界面的一大特点，使得用户可以通过手指滑动来轻松浏览和...
- 重写`onTouchEvent(MotionEvent event)`方法，监听用户的滑动操作。当用户触摸屏幕时，记录起始坐标；当手指移动时，更新路径坐标；当手指抬起时，判断是否完成解锁动作。 4. **手势识别**： - 实现滑动解锁的...
例如，可以使用`swipe`事件来监听用户的滑动操作，然后通过jQuery的动画功能实现平滑的界面过渡。同时，通过调整CSS3的过渡和动画属性，可以进一步优化滑动效果，使其更加流畅自然。 总的来说，"jQuery iPhone UI...
"仿iPhone滑动开关"就是这样一个自定义控件的例子，它提供了更多的定制选项，比如颜色、尺寸、动画效果等，使得开发者能够更好地融入自己的应用设计。 实现这样的自定义滑动开关，首先需要了解并掌握UIKit框架，这...
通过以上步骤，开发者可以在Android应用中实现一个仿Iphone的滑动按钮。虽然实现过程可能较为复杂，但这种自定义组件能为应用增添独特的交互体验，提升整体的用户体验。在实际开发中，应根据项目需求进行适当的调整...
本篇文章将详细探讨如何利用jQuery Mobile插件来实现一个仿iPhone滑动出现删除按钮的功能，这一功能在很多移动应用中常见，例如邮件、联系人或任务管理器。 首先，我们需要理解jQuery Mobile的核心概念。它基于...
3. **触摸事件处理**：实现`onTouchEvent()`方法，监听用户的滑动操作。当用户触摸并滑动按钮时，更新滑块的位置，并触发相应的状态改变回调。 4. **动画效果**：为了达到iOS滑动开关的流畅感，我们可以添加平滑的...
它模拟了iPhone滑动解锁的交互方式，用户通过在屏幕上滑动手指来完成解锁操作。 2. **手势识别**：`SlideViewDemo`的核心在于手势识别。它使用Android的`GestureDetector`类来检测用户的滑动手势。`GestureDetector...
总的来说，要在Windows CE上实现iPhone滑动效果，开发者需要深入理解操作系统的基础、触摸事件处理以及自定义GUI组件的创建。通过这个压缩包提供的代码示例，开发者可以学习如何在限制资源的环境中创造出与iPhone...
总的来说，"仿Iphone实现滑动选择器"是一个涉及Android视图自定义、数据绑定、事件处理、动画效果、版本兼容性和交互设计等多个方面的工作。通过这样的组件，开发者可以为Android应用带来更加丰富和多样的用户界面，...
本资源提供了一个高仿iPhone滑动解锁的源代码，可以帮助开发者实现类似的功能，提升应用的用户交互性。 首先，我们要理解滑动解锁的核心机制。在iOS系统中，滑动解锁是通过滑动一个滑块来解锁屏幕。这个滑块通常...
本教程将详细讲解如何利用jQuery实现一个仿iPhone的向右滑动解锁效果，该效果常见于移动应用或网页中，为用户提供了一种直观且有趣的交互体验。 首先，我们需要理解这个效果的基本原理：当用户在特定区域内向右滑动...
在本项目中，“jQuery CSS仿iPhone手机滑动解锁屏幕”是一个使用jQuery和CSS技术实现的交互效果，旨在为Web应用或网页提供一种类似iPhone手机上滑动解锁的体验。这个功能通常用于增加用户验证环节的安全性和趣味性。...
在Android平台上开发一款仿iPhone滑动锁屏界面的应用，涉及到多个关键知识点，涵盖了用户界面设计、触摸事件处理、动画效果实现以及系统级别的交互。以下是对这些知识点的详细说明： 1. **用户界面设计**：首先，你...
- 实现触摸事件处理，包括`onTouchEvent()`，处理用户的滑动操作。 2. **绘制滑轮效果**： - 使用`Canvas`对象进行绘图，包括滑轮的背景、选中项高亮、分隔线等元素。 - 可以使用`BitmapShader`来创建平滑滚动的...
在本资源中，我们主要探讨的是如何利用jQuery库来实现一个仿iPhone的向右滑动解锁效果。这个功能常用于增强网页或应用的交互性，尤其是对于那些希望提供类似移动设备体验的网页开发者来说，这是一个非常有趣且实用的...
本项目以"仿Iphone样式的滑动效果"为主题，主要探讨了如何实现类似iPhone的滑动翻页功能，并且支持鼠标操作。 首先，让我们聚焦于"滑动效果"这一核心概念。在iPhone上，滑动是一种非常自然的交互方式，用户可以通过...
【标题】"高仿iPhone滑动解锁功能效果"是一个针对iOS平台开发的代码示例，旨在模拟iPhone设备上的经典滑动解锁机制。这个项目对于学习iOS编程，特别是UI设计和交互实现的开发者来说，是非常有价值的参考资料。 ...
【标题】"iPhone手机滑动解锁源码"揭示了一个基于JavaScript实现的仿iPhone手机滑动解锁功能。在网页上，用户可以通过鼠标操作，模仿iPhone的滑动解锁体验，即按住屏幕底部的滑块并向右滑动以解锁屏幕。这个功能的...
在Android平台上实现“仿iPhone滑动解锁”功能，主要涉及到Android UI设计、触摸事件处理以及动画效果的实现。以下是对这个知识点的详细说明： 1. **Android UI设计**： Android系统提供了丰富的UI组件，如...