精华内容
下载资源
问答
  • turn.js 试用
    2022-01-06 10:03:18
    • 最近项目想要一个类似于书翻页的效果,baidu了好多终于找到一个插件turn.js,点进github发现竟然是大佬十年前的作品!!!
    • turn.js 可自行下载,记得引用jq和turn.js
    <div id="magazine">
    	<div style="background-image:url(pages/01.jpg);"></div>
    	<div style="background-image:url(pages/02.jpg);"></div>
    	<div style="background-image:url(pages/03.jpg);"></div>
    	<div style="background-image:url(pages/04.jpg);"></div>
    	<div style="background-image:url(pages/05.jpg);"></div>
    	<div style="background-image:url(pages/06.jpg);"></div>
    </div>
    
    <script type="text/javascript">
    	$(window).ready(function() {
    		$('#magazine').turn({
    				display: 'double',  // 获取当前显示的是单页还是双页
    				acceleration: true,  // 设置硬件加速模式,对于触摸设备,此值必须为true
    				gradients: !$.isTouch,  // 翻页过程中显示渐变和阴影
    				elevation:50,  // 转换期间页面的高度
    				when: {
    					turned: function(e, page) {
    						// 翻页后做一些什么事
    					},
    					turning: function(e, page) {
    						// 翻页时做一些什么事
    					},
    				}
    			});
    	});
    
    	//  键盘翻页
    	$(window).bind('keydown', function(e){
    		if (e.keyCode==37)
    			$('#magazine').turn('previous');  // 上一页
    		else if (e.keyCode==39)
    			$('#magazine').turn('next');   // 下一页
    	});
    
    </script>
    
    • 附上一张完成效果
    • 在这里插入图片描述
    • 不足之处望大佬指出
    更多相关内容
  • turn.js+pdf.js资源

    2022-03-21 19:00:37
    turn.js+pdf.js资源
  • turn.js

    2021-02-01 10:19:39
    turn.js
  • 其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人...
  • 主要为大家详细介绍了Turn.js实现很棒的翻书效果,对Turn.js翻书效果的实现进行总结,感兴趣的小伙伴们可以参考一下
  • 基于turn.js官网通过vue实现的一个翻页效果 脚手架使用vue cli4
  • 主要为大家详细介绍了turn.js异步加载实现翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇...
  • turn.js电子书翻页

    2018-09-12 17:43:15
    turn.js电子书翻页
  • 使用turn.js和PDFObject构建的活动簿演示。 将PDF列表显示为可翻转的书,左侧有暂定的暂定目录。 适用于除IE11之外的所有浏览器。 当前正在致力于实现IE11支持和目录功能。
  • TURN.JS 实现翻书效果(自适应单双页)
  • 支持上传pdf,支持放大,缩小,平移,缩略图及目录定位方式阅读,支持动画翻页。支持背景音乐等。
  • 使用Turn JS构建HTML5动画书 帮助将PDF文档转换为可在浏览器上查看的数字杂志
  • turn.js实现PC端的一系列图片形成书本翻页的效果;
  • 利用turn.js制作电子书

    2018-05-18 18:01:52
    电子书包括移动PC端 包括实时页码,放大缩小,下载,全屏,左右滑动点击等事件 PC端使用了turn.js 移动端由于卡顿原因采用了swiper
  • turn.js实现图书翻页

    热门讨论 2016-12-07 16:20:50
    使用turn.js实现图书的翻页预览效果
  • turn.js电子书翻页特效实例

    热门讨论 2014-02-27 12:01:01
    使用turn.js实现的电子书翻页特效。鼠标移到页脚,点击拖动可以实现翻页。有硬板纸和普通纸2种纸张翻页的效果。
  • turn.js+pdf.js实现翻页查看,如何使turn.js销毁并重新加载

    需求实现:

    接到客户需求,需要将网站展示的杂志(pdf格式)实现翻页效果并且不能被下载(浏览器直接打开方式直接宣布gg),所以就选择了使用pdf.js+turn.js+流处理方式实现。

    所需资源(资源均可通过度娘获取),也可-->点击获取:

    jquery.min.1.7.js

    pdf.js

    pdf.worker.js

    modernizr.2.5.3.min.js

    turn.js

    1、pdf文件为本地

    如果pdf文件存储在本地,则直接使用下面页面代码即可:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>turn.js和pdf效果</title>
    		
    	</head>
    	<body>
    		<div style="width: 1440px;height:900px;margin: 0 auto;text-align: center;">
    			<div id="flipbook" style="margin-left: 20%;">
    			</div>
    		</div>
    		
    	</body>
    </html>
    <script type="text/javascript" src="js/jquery.min.1.7.js" ></script>
    <script type="text/javascript" src="js/pdf.js" ></script>
    <script type="text/javascript" src="js/pdf.worker.js" ></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js" ></script>
    <script type="text/javascript">
    
        var flipbook=$("#flipbook");
    	//定义一些参数
    	var pagestr = 1,bid= 1, scale = 1.1;
        window.onload=function(){
        /*	此处传递pdf路径(注:只支持本地文件,如文件为服务器,尤其是前后端分离项目,此处直接填路径可能会报跨域问题*/
        	getpdf("pdf/6666.pdf");
        }
        
        //获取pdf
        function getpdf(url){
        	var loadingTask=PDFJS.getDocument(url);//获取pdf的文件信息
        	loadingTask.promise.then(function(pdf){
        		//根据总页数添加固定的div和canvas
        		for (let i = 1; i <= pdf.numPages;i++) {
    						var id = 'canvaspage' + i;
    						var div = document.createElement('div');
                            div.innerHTML = '<canvas id="' + id + '"></canvas>';
    						flipbook.append(div);
    						setcanvas(i,pdf,id);
    					}
        		
        		//调用turn
    				yepnope({
    					test : Modernizr.csstransforms,
    					yep: ['js/turn.js'],
    					complete: loadApp
    				});
        	})
        	
        }
        //将将pdf添加到canvas里面
    	function setcanvas(i,pdf,id){
    		pdf.getPage(i).then(function(page) {
    			    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById(id);
    			    var context = canvas.getContext('2d');
    				canvas.width = 1440;
    				canvas.height = 900;
    			    var renderContext = {
    			        canvasContext: context,
    			        viewport: viewport
    			    };
    			   page.render(renderContext);
    		})
    	}
    	
    	//用于turn.js
    	function loadApp() {
    		$("#flipbook").turn({
    			  width: 1440,
    			  height: 900,
    			  autoCenter: true,
    			  duration:1000,
    			  gradients:true,
    			  /*when:{  
    			  
    			  	turned: function(event, page, view) {
    							$(this).turn('center');
    							if (page==1) { 
    								$(this).turn('peel', 'br');
    							}				
    						},
    			  }*/
    			});	
    	}
    
    	
    </script>
    
    

    2、pdf文件为服务器存储

    笔者遇到的pdf文件存储与单独的文件服务器,采用上述方式直接跨域报错,所以采用后端流方式:

    前端js方法:

     var url=$(".urlValue").attr("value");
    	var pdf_url="此处传递文件路径";
        var flipbook=$("#flipbook");
    	var arrayMsg=new Array();//定义一个数组,储存每页里是否成功加载图片;false为已储存图片,true为还未储存
    
    	//定义一些参数
    	var pagestr = 1,bid= 1, scale = 1.1;
        window.onload=function(){
    	//var arr=convertPdf();
        	getpdf(convertPdf());
    		//getpdf(pdf_url);//直接读url有跨域问题 pass
        }
    
    	
    	//服务器文件转为文件流(获取的是base64流)
    	function convertPdf(){
    		  var array ="";
    		  $.ajax({
    			  type:"POST",
    			  async:false, // false是不采用异步的方式
    			  data:{"pdf_url":pdf_url},
    			  mimeType:'text/pdf;charset=x-user-defined',
    			  url:"${rootpath}/special/convertPdf.jspx",
    			   success:function (data,textStatus, jqXHR) {
    				  var rawLength = data.length;
    				  console.log("rawLength="+rawLength);
    				  // 转换成pdf.js能直接解析的Uint8Array类型
    				  array = new Uint8Array(new ArrayBuffer(rawLength));
    				  for(var i = 0;i<rawLength;i++){
    					  array[i] = data.charCodeAt(i)&0xff;
    				  }
    				  
    			  },
    	 
    		  });
    		  
    		 return array;
    		  
    	}
        var pagesForzz=0;//杂志的总页数
    	var pdfDoc=null;
        //获取pdf
        function getpdf(url){
        	var loadingTask=PDFJS.getDocument(url);//获取pdf的文件信息
        	loadingTask.then(function(pdf){
        		//根据总页数添加固定的div和canvas
        		//for (var i = 1; i <= pdf.numPages;i++) {
    			        pagesForzz=pdf.numPages;
    					pdfDoc=pdf;
    					setpage(1,pdf);//初始化 从第一页开始
    				//	}
        		
        		//调用turn
    				yepnope({
    					test : Modernizr.csstransforms,
    					yep: ['${res}/js/rczz/turn.js'],
    					complete: loadApp
    				});
        	})
        	
        }
    
    	//设定页码
    	function setpage(number,pdf){
    	    for(var i=number;i<=pdf.numPages;i++){
    			var id = 'canvaspage' + i;
    			var div = document.createElement('div');
    			div.innerHTML = '<canvas id="' + id + '"></canvas>';
    			flipbook.append(div);
    			arrayMsg[i]=true;//初始化设定还未存储图片
    		}
    	}
        //将将pdf添加到canvas里面
    	function setcanvas(i,pdf,id){
    		pdf.getPage(i).then(function(page) {
    			    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById(id);
    				var context='';
    				if(canvas!=null&&canvas!=''){
    				 context = canvas.getContext('2d');
    				 if(i==1){
    				     canvas.width = 720;
    				 }else{
    				     canvas.width = 1440;
    				 } 
    				 canvas.height = 900;
    				 var renderContext = {
    			        canvasContext: context,
    			        viewport: viewport
    			      };
    			     page.render(renderContext);
    				 arrayMsg[i]=false;
    				}			
    			    	
    		})
    	}
    	
    	//用于turn.js
    	function loadApp() {
    		$("#flipbook").turn({
    			  width: 1440,
    			  height: 900,
    			  autoCenter: true,
    			  duration:1000,
    			  gradients:true,
    			  page:1,
    			  pages:5,
    			  when:{  
    				 
    			  
    			  	turned: function(event, pageNo, view) {
    							$(this).turn('center');
    							if (pageNo==1) { 
    							    //setcanvas(1,pdfDoc,'canvaspage' + 1);
    								$(this).turn('peel', 'br');
    							}
    							var thispage=$("#flipbook").turn("page");//获取当前页面页码
    							if(pageNo>=1){
    							    //加载当前页
    								if(arrayMsg[thispage]){
    									setcanvas(thispage,pdfDoc,'canvaspage' + thispage);
    								}
    								//如果没到最后一页,则加载下一页
    								if(thispage<pagesForzz){
    								   if(arrayMsg[thispage+1]){
    									  setcanvas(thispage+1,pdfDoc,'canvaspage' + (thispage+1));
    								   }
    								}
    							     //重新加载上一页						
    							    if(arrayMsg[thispage-1]){
    							      setcanvas(thispage-1,pdfDoc,'canvaspage' + (thispage-1));
    							     }
    							}							
    						},
    			  }
    			});	
    	}

    后端方法:

    @RequestMapping(value = "/special/convertPdf2.jspx")
    	public void converPdf2(HttpServletRequest request, HttpServletResponse response) throws Exception{
    		//前台传入的所有数据(此段获取页面传参使用的公司框架方法,可使用原生写法获取页面传参即可)
            //重点是获取到页面传递的pdf文件路径,根据实际场景调整
    		Map<String, String> analysisMap = 获取前端传递参数;
    		String destUrl=analysisMap.get("pdf_url");//获取服务器pdf路径
    		response.setStatus(HttpServletResponse.SC_OK);
    		response.setContentType("application/pdf");
    		URL url = new URL(destUrl);
    		HttpURLConnection httpUrl = (HttpURLConnection)url.openConnection();
    		httpUrl.setConnectTimeout(20000);
    		httpUrl.setReadTimeout(20000);
    		httpUrl.setRequestMethod("GET");
    		httpUrl.setRequestProperty("Content-type", "application/json");
    		httpUrl.connect();
    		InputStream input=httpUrl.getInputStream();
    		try(ServletOutputStream out = response.getOutputStream()
    		){
    			int read = 0;
    			while(read>-1){
    				read = input.read();
    				out.write(read);//此处一定要逐个字符写,否则会导致pdf文件结构破坏,导致前端解析失败
    			}
    			out.flush();
    		}
    	}

    此处踩坑:即文件写入时,一开始使用方法为每次写入2048字节,但是前端一直提示非法的字符编码、图片未准备好等,并且展示的pdf也不完整,有漏图的现象出现,如图:

     最终尝试发现如果单字节写入的时候此问题不再出现,如果您有更好的解决方法,感谢留言分享:

    最终效果:

    3、turn.js销毁重新加载 

    在实际应用中,会需要将turn.js销毁重新加载,但是$("#flipbook").turn只能加载一次,如果不做处理而进行再次加载,会产生意想不到的异常,如图片尺寸重新计算而变形等,要解决只需要在重新加载turn.js之前做如下处理。

    $("#flipbook").turn('destroy');//销毁页面
    $( window ).unbind( 'keydown' );//推测应该为保证turn.js重新加载成功而解除的事件
    

    举例:

    //实际用例
    function ininturnItem(value){
    	    var str="";
    		for(var i=0;i<imgurlList.length;i++){
    		   str+="<div></div>"; //此处为重新加载标签
    		}
    		//销毁重新加载turn.js
    		$("#flipbook").turn('destroy');//销毁页面
    	    $( window ).unbind( 'keydown' );//推测应该为保证turn.js重新加载成功而解除的事件
    		$("#flipbook").empty();
    		$("#flipbook").append(str);//添加样式
    		turnDiv();  //重新加载turn.js
    	}
    function turnDiv(){
          $("#flipbook").turn({
    	  width: 1280,
    	  height: 768,
    	  autoCenter: true,
    	  duration:600,
    	  gradients:true,
    	  page:1,
    	  when:{
    	  	turned: function(event, page, view) {
    					$(this).turn('center');			
    				},
    	  }
    	});	
     }

     

     参考链接:

    pdf.js使用教程 - kagome1314 - 博客园

    pdf用turn翻页显示_百味苦的博客-CSDN博客

    基于jquery的插件turn.js学习笔记(一个可以实现3d书籍展示效果的插件)_蔡馨的博客-CSDN博客

    展开全文
  • turn.js教程及总结

    2022-04-10 11:12:39
    jquery.jsturn.js 这里面jquery全网一查都是, turn.js官网下载太慢了,嫌慢的码友们可以私信我或留言我会发给大家 基本用法 $('#book').turn({ acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为...

    先看一眼我制作的简单demo演示图

    在这里插入图片描述

    这部分主要用作演示及养眼 接下来我们来抛开演示图来讲一下如何使用

    turn简介

    一个基于jquery用来实现3d翻书效果的插件
    

    使用所需

    jquery.js、turn.js
    这里面jquery全网一查都是, turn.js官网下载太慢了,嫌慢的码友们可以私信我或留言我会发给大家
    

    基本用法

        $('#book').turn({
            acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
    		pages: 11, // 页码总数
    		elevation: 50, // 这个忘记是什么了
    		height: 200, // 高度 单位 px
    		gradients: true, // 是否显示翻页阴影效果
    		when: {
    			// 翻页前触发
    			turning: function (e, page, view) {
    	                    
    			},
    	                // 翻页后触发
    			turned: function (e, page) {
    				
    	        }
    	    }
    	});
    

    以上就是js的基本用法了,只需要创建一个容器元素和一些代表页码的子元素就可以实现基本的翻书效果了

        <div id="book">
    		<div class="odd" id="page1"></div>
    		<div class="even" id="page2"></div>
    		<div class="odd" id="page3"></div>
    		<div class="even" id="page4"></div>
        </div>
    

    效果图
    在这里插入图片描述

    css样式

    
    	#book {
    		width: 90vw;
    		margin: 0 auto;
    		box-shadow: 0 0 15px #4d4c4c;
    	}
    
    	#book .turn-page {
    		background-color: white;
    	}
    
    	#book .cover {
    		background: #333;
    	}
    
    	#book .cover h1 {
    		color: white;
    		text-align: center;
    		font-size: 50px;
    		line-height: 500px;
    		margin: 0px;
    	}
    
    	#book .loader {
    		/* background-image: url(loader.gif); */
    		width: 24px;
    		height: 24px;
    		display: block;
    		position: absolute;
    		top: 238px;
    		left: 188px;
    	}
    
    	#book .data {
    		text-align: center;
    		font-size: 40px;
    		color: #999;
    		line-height: 500px;
    	}
    
    	#book .odd {
    		background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
    		background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
    		background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
    		background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
    		box-shadow: 0 0 15px #4d4c4c;
    	}
    
    	#book .even {
    		background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
    		background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
    		background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
    		background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
    		box-shadow: 0 0 15px #4d4c4c;
    	}
    

    turn常用配置项

    名称介绍默认值可选值
    acceleration是否启动硬件加速,移动端必须设置为true否则将不可使用falsetrue/false
    autoCenter是否自动居中falsetrue/false
    direction翻页方向ltrltr(从左到右) / rtl(从右到左)
    display显示模式doublesingle(单页) / double(双页码)
    duration过渡时间600msinfinite
    gradients是否显示翻页阴影效果truetrue / false
    height高度infinite
    pages页码总数infinite
    when监听事件下方有介绍
    disable是否禁止翻页falsetrue / false

    when 常用监听事件

    监听事件名介绍
    turning翻页前触发
    turned翻页后触发
    start页面开始时触发
    end页面停止时触发
    first第一页触发
    last最后一页触发

    turn 常用方法

    名称用途参数
    page跳转到某一页容器元素.turn(‘page’, 页码)
    addpage在容器中添加页码容器元素.turn(‘addpage’, 元素, 页码)
    destroy删除所有页面容器元素.turn(“destroy”).remove()
    next下一页容器元素.turn(“next”)
    previous上一页容器元素.turn(“previous”)
    removepage删除指定页容器元素.turn(“removepage”, 页码)
    version获取当前发布版本容器元素.turn(“version”)
    stop停止当前过渡效果,可以搭配page方法使用在跳转到某一页时停止效果容器元素.turn(‘page’, 页码).stop()

    以上就是trun的教程了。

    总结

    这真的是一款非常优秀的插件,短短几行就解决了我的业务需求,而且细节处理的非常棒,翻书的阴影效果、翻书到一定角度带来的直角、翻书的效果等,很推荐有要做类似效果的码友们使用,其拓展性极强,甚至可以完全做成一本可以真正意义上的书。

    结语

       天才无非是长久的忍耐,努力吧!
    
    展开全文
  • turn.min.js 演示

    2013-11-20 12:05:42
    turn.minjs 书翻页的效果 亲测可以用 ,注意路径。
  • vue引入turn.js

    千次阅读 2020-05-07 09:58:47
    https://github.com/blasten/turn.js (1) 首先要全局引入jquery 这里我们使用vue-cli3 搭建的项目,所以使用链式引入 vue.config.js文件 chainWebpack: (config) => { if (process.env.NODE_ENV === ...

    github地址:
    https://github.com/blasten/turn.js

    (1) 首先要全局引入jquery

    这里我们使用vue-cli3 搭建的项目,所以使用链式引入

    vue.config.js文件

      chainWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
          //引入ProvidePlugin
          config.plugin("provide").use(webpack.ProvidePlugin, [
            {
              $: "jquery",
              jquery: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery",
            },
          ]);
        }
      },
    

    (2) 首先要全局引入turn.js

    下载turn.js 到本地,然后引入页面,例如:

    import turn from "../../../turn/lib/turn";
    

    如果通过npm安装,引入,会发现,一直报错~

    npm i turn-js
    

    (3)使用方式

    在这里插入图片描述


    (4)参数说明

    在这里插入图片描述

    地址: http://www.turnjs.com/#


    (5)效果展示

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


    (6)代码展示

    <template>
      <div class="body-content">
        <div id="magazine">
          <div v-for="(item, index) in allPages" :key="`test_${index}`">
            <div :class="`text${item.page}`">
              <footer
                v-if="item.page - 1 !== 0 && item.page - 1 !== allPages.length - 1"
                class="current-page"
              >
                <div v-if="(item.page - 1) % 2 == 0" class="even-numbers">
                  {{ item.page - 1 }}
                </div>
                <div v-else class="odd-number">{{ item.page - 1 }}</div>
              </footer>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    import turn from "../../../turn/lib/turn";
    
    export default {
      name: "FenMian2",
      data() {
        return {
          value: "",
          page: 1,
          allPages: [
            {
              page: 1,
              name: "aa"
            },
            {
              page: 2,
              name: "aa"
            },
            {
              page: 3,
              name: "aa"
            },
            {
              page: 4,
              name: "aa"
            },
            {
              page: 5,
              name: "aa"
            },
            {
              page: 6,
              name: "aa"
            }
          ]
        };
      },
      mounted() {
        let self = this;
        $("#magazine").turn("center");
        $("#magazine").turn("page");
        this.$nextTick(() => {
          $("#magazine").turn({
            display: "double",
            elevation: 50,
            duration: 100,
            gradients: true,
            autoCenter: true,
            acceleration: true,
            gradients: !$.isTouch,
            page: self.page,
            width: 1152,
            when: {
              turned: function(e, page, pages) {
                //当前页
                console.log("Current view: ", $(this).turn("view"));
                //总页数
                console.log(
                  "#magazine has " + $("#magazine").turn("pages") + " pages"
                );
                // $("#magazine").turn("hasPage", 10);
                // $("#magazine").turn("pages", 5);
              }
            }
          });
        });
      },
      methods: {},
      components: {}
    };
    </script>
    <style lang="scss" scoped>
    body {
      background: #ccc;
    }
    
    #magazine {
      width: 1152px;
      height: 752px;
      .text1 {
        background: url("../../../turn/pages/01.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .text2 {
        background: url("../../../turn/pages/02.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .text3 {
        background: url("../../../turn/pages/03.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .text4 {
        background: url("../../../turn/pages/04.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .text5 {
        background: url("../../../turn/pages/05.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .text6 {
        background: url("../../../turn/pages/06.jpg") no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 752px;
      }
      .current-page {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 14px;
        .even-numbers {
          width: 30px;
          height: 30px;
          background: #ffcc66;
          color: #fff;
          right: 0;
          position: absolute;
          bottom: 0px;
          line-height: 30px;
          text-align: center;
        }
        .odd-number {
          position: absolute;
          bottom: 0px;
          width: 30px;
          height: 30px;
          background: #cc00ff;
          color: #fff;
          line-height: 30px;
          text-align: center;
        }
      }
    }
    
    #magazine .shadow,
    #magazine.shadow {
      -webkit-box-shadow: 0 4px 10px #666;
      -moz-box-shadow: 0 4px 10px #666;
      -ms-box-shadow: 0 4px 10px #666;
      -o-box-shadow: 0 4px 10px #666;
      box-shadow: 0 4px 10px #666;
    }
    
    #magazine .turn-page {
      background-color: #ccc;
      background-size: 100% 100%;
    }
    .bookmark {
      margin-left: 633px;
      font-size: 20px;
      writing-mode: tb-rl;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-top: 47px;
      .item:nth-child(2n) {
        background: #ccc;
        width: 45px;
        height: 150px;
      }
      .item {
        width: 45px;
        height: 160px;
        background: red;
      }
      .item:nth-child(1) {
        z-index: 4;
        text-shadow: 6px 6px 6px #999;
      }
      .item:nth-child(2) {
        z-index: 3;
        text-shadow: 6px 6px 6px #333;
      }
      .item:nth-child(3) {
        z-index: 2;
        text-shadow: 6px 6px 6px #333;
      }
      .item:nth-child(4) {
        z-index: 1;
        text-shadow: 6px 6px 6px #333;
      }
    }
    </style>
    
    展开全文
  • script type="text/javascript" src="js/turn.js"></script> <scripttype="text/javascript" src="./js/jquery.min.1.7.js"></script> 2 创建html <div id="flipbook"> <div ...
  • jquery插件turn.js

    2018-07-24 11:00:14
    jquery插件turn,有非常丰富的翻页、查看效果,可在网页上呈现杂志的效果。
  • 官方demo:::: ...1.去以上地址把对应的jq 和turn.js 下到本地项目 的public 文件夹下 ,在该文件夹下引入, 2.组件内引入直接使用。 3.npm 未进行安装jq 和turn 如图 ...
  • 在vue中使用turn.js

    千次阅读 2020-07-24 14:03:04
    turn.js是一款实现翻页效果的插件 首先需要安装并引入jQuery,安装完成后引入turn.js 如果使用npm安装引用turn.js会报错 因此需要下载turn.js 到本地,在官网上下载源码,把lib文件拷到assets中, 我在页面中使用了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,260
精华内容 8,104
关键字:

Turn.js

友情链接: session5.zip