<!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>
分享到:
相关推荐
android上自定义的仿iphone的滑动控件 效果非常棒。类似于HTC内使用的时间控件
iphone 滑动显示效果_真实逼真效果 iphone 手指滑动 图片滑动 主要用于用 手机访问wap 网站效果,实现 手指移动 翻转图片。大家一起研究。
Android仿iphone滑动解锁实例
Android 高仿iphone滑动解锁 代码简单 方便移植
as3.0 滑动技巧 模仿iphone滑动,有缓冲效果。横竖版效果都有
仿iphone滑动特效实现,开机画面,九宫格滑动效果
基于UIControl 实现iphone 滑动解锁效果控件
Android仿iphone滑动解锁,此为APK,如果觉得效果不错,可以在我的资源列表中下载源代码
jquery实现iphone滑动界面,jQuery iPhone UI 是 iPhone 平台上的 UI 界面包。
iPhone滑动解锁效果 iPhone滑动解锁效果 iPhone滑动解锁效果
一个简单的仿iPhone滑动开关的控件,适合项目需要的时候和学习之用,gb编码
wpf仿iphone桌面翻页效果,不满足翻页条件则回滚当页,另外增加了左右翻页按钮。
Android 仿 Iphone 滑动按钮(SlipButton)
jqueryMobile插件仿iPhone滑动出现删除按钮,供大家一起共同分享学习。
Android例子源码高仿iphone滑动解锁源代码
高仿iphone滑动解锁源代码解锁过程中文字会慢慢变淡消失,跟iPhone的滑动解锁效果一样,不过这个例子只是单纯的解锁,可以结合着本站之前的锁屏源码一起来开发。
Android 高仿iphone滑动解锁源代码,如果想先看效果,可以在我的资源列表中免积分下载APK查看效果。
以两种方式实现 slipbutton 高仿Iphone 的滑动方式
NULL 博文链接:https://kenkao.iteye.com/blog/1912491
android实现仿iphone滑动解锁demo 再凑几个字