收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1633|回复: 1

[网络] 用Jquery实现翻书特效

[复制链接]
发表于 2014-5-16 11:38:37 | 显示全部楼层 |阅读模式
此Jquery特效是一款非常实用的功能,翻书效果一直很受人喜欢,目前功能比较简单,暂时只实现了左右翻书的效果,功能还可以无限的扩展。

翻书功能代码js代码如下:

var $pageheight = 189;
var $pagewidth = 146;
var $pageYpos = 0;
$(document).ready(function(){
    //点击左边页面翻书事件
    $("#leftpage").click( function() {
        $pageYpos = $pageYpos + $pageheight;
        $("#leftpage").css("background-position", "0px "+$pageYpos+"px");  
        $("#flip").css("background-position", "top right");
        setTimeout ('$("#flip").css("background-position", "top center");', 200);
        setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);      
           
    });               
     
    //点击右边页面翻书事件
    $("#rightpage").click( function() {
        $pageYpos = $pageYpos - $pageheight;
        $("#rightpage").css("background-position", "0px "+$pageYpos+"px");
        $("#flip").css("background-position", "top left");
        setTimeout ('$("#flip").css("background-position", "top center");', 200);
        setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);
    });
});

HTML代码如下:
view sourceprint?
<div id="turner">
    <div id="flip"></div>
    <div id="leftpage"></div>
    <div id="rightpage"></div>
</div>

本文为Anyforweb技术分享博客,需要了解网站建设及更多web应用相关信息,请访问anyforweb.com。
发表于 2014-5-21 17:31:54 | 显示全部楼层
都是些什么呀
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-12 05:57 , Processed in 0.109101 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表