jquery漂亮的翻书效果应用于tp项目中

瑆箫

于 2022-09-13 11:44:30 发布

阅读量548

点赞数

CC 4.0 BY-SA版权

分类专栏：前端后端文章标签： javascript 前端 jquery

本文链接：https://blog.youkuaiyun.com/mo3408/article/details/126830384

前端同时被 3 个专栏收录

309 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

后端

277 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

web

210 篇文章 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍如何将jQuery的翻书效果整合到TP框架的前端展示中，通过展示前台代码和主要的JavaScript实现，展示了动态的翻书视觉体验。

实现的效果：

前台代码：

主要实现的js:

$('.bookmark')
	.on('click', 'li', function() {
		var self = $(this),
		id = self.attr('data-id');
		$('.bookmark li')
			.removeClass('on')
		$(this)
			.addClass('on');
		var dids = $(this)
			.attr('dids');
		$.ajax({
			type: "post",
			url: '{:url("index/hq")}',
			async: true,
			data: {
				id: dids
			},
			success: function(msg) {
				var st = [];
				$('#pic')
					.attr('src', msg['data']['a_img']);
				$('#im1')

了解本专栏