pc端 前端页面 js灯箱效果能放大缩小吗

可以监听滚轮事件 mousewheel 判断是点击的是否显示，显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform ：scale属性，也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理

一、实验目的
1．了解12864点阵型液晶显示器的显示原理。
2．掌握12864点阵型液晶显示器的接口设计。
3．利用12864点阵型液晶显示器来实现LCD广告字幕机的设计。
二、实验内容与要求
利用12864点阵型液晶显示模块设计一个可显示图形和中文字符的LCD广告字幕机。
1．基本要求：
1) 能够显示图形和文字。
2) 要求显示的图形或文字稳定、清晰无串扰。
3) 在目测条件下LCD显示屏各点亮度均匀、充足。
2．提高要求
4) 图形或文字显示有静止、移入移出等显示方式。
5) 显示屏刷新频率要求达到85Hz。
一 引言
LCD液晶显示器是 Liquid Crystal Display 的简称，LCD 的构造是在两片平行的玻璃当中放置液态的晶体，两片玻璃中间有许多垂直和水平的细小电线，透过通电与否来控制杆状水晶分子改变方向，将光线折射出来产生画面。比CRT要好的多，但是价钱较其它显示器贵。
FPGA是英文Field－Programmable Gate Array的缩写，即现场可编程门阵列，它是在PAL、GAL、CPLD等可编程器件的基础上进一步发展的产物。它是作为专用集成电路（ASIC）领域中的一种半定制电路而出现的，既解决了定制电路的不足，又克服了原有可编程器件门电路数有限的缺点。
FPGA采用了逻辑单元阵列LCA（Logic Cell Array）这样一个概念，内部包括可配置逻辑模块CLB（Configurable Logic Block）、输出输入模块IOB（Input Output Block）和内部连线（Interconnect）三个部分。FPGA的基本特点主要有：
1）采用FPGA设计ASIC电路，用户不需要投片生产，就能得到合用的芯片。
2）FPGA可做其它全定制或半定制ASIC电路的中试样片。
3）FPGA内部有丰富的触发器和I／O引脚。
4）FPGA是ASIC电路中设计周期最短、开发费用最低、风险最小的器件之一
5) FPGA采用高速CHMOS工艺，功耗低，可以与CMOS、TTL电平兼容。
二．工作原理
四、12864点阵型液晶显示器
本设计所用的JM12864A是一种图形点阵液晶显示器，它主要由行驱动器、列驱动器及128×64全点阵液晶显示器组成。可完成图形显示；也可以显示8×4个(16×16点阵)汉字。 1．12864点阵型液晶显示器的显示原理
12864液晶显示屏共有128×64点阵，即每行显示128点，每列显示64点。此种型号的液晶显示屏以中间间隔平均划分为左屏和右屏分别显示，均为64×64点阵，而且各自都有独立的片选信号控制选择。先显示左屏，左屏全部显示完后才能显示右屏。显示屏上的显示数据由显示数据随机存储器DDRAM提供。DDRAM每字节中的每1个bit，对应显示屏上的1个点。bit值为1，对应点显示，反之不显示。
DDRAM与显示屏的对应位置如图1所示。每半屏显示数据共有512字节的DDRAM，分为8个数据页来管理，这些页对应显示屏从上到下编号为0－7页，每页64字节，涵盖半边显示屏的64行×64列×8bit点阵数据。向显示屏写数据实际上是向DDRAM中写数据，DDRAM不同页和不同列中的字节数据唯一对应显示屏一行的8个显示点。例如，向DDRAM第0页的第0列写入数据00010100B，则显示屏左上角第0列的8个显示点只有从上往下的第3和5点显示。不同页和不同列DDRAM的寻址，通过左半屏和右半屏各自的页地址计数器和列地址计数器实现，因此对显示屏DDRAM写显示数据前，需要先设置页地址和列地址。

图1 12864液晶显示屏与内部RAM的对应关系
2．12864液晶显示器的内部结构及外部引脚
1）12864液晶显示器的内部结构
12864液晶显示器的内部结构框图如图2。

图2 12864点阵型液晶显示器的内部结构框图
IC1控制模块的左半屏，IC2控制模块的右半屏。IC3为行驱动器。IC1，IC2为列驱动器。IC1，IC2，IC3含有如下主要功能器件。了解如下器件有利于对LCD模块的编程。
a) 指令寄存器(IR)
IR是用来寄存指令码，与数据寄存器寄存数据相对应当D/I=1 时，在E信号下降沿的作用下，指令码写入IR。
b) 数据寄存器(DR)
DR是用来寄存数据的，与指令寄存器寄存指令相对应当D/I=1时，在E信号的下降沿作用下，图形显示数据写入DR，或在E信号高电平作用下由DR读到DB7~DB0 数据总线DR 和DDRAM之间的数据传输是模块内部自动执行的。
c) 状态寄存器
有效数据位3位，用于记录“忙”信号标志位（BF），复位标志位（RST）以及开/关显示状态位（ON/OFF）。
d) XY地址计数器
XY地址计数器是一个9位计数器。高三位是X地址计数器，低6位为Y地址计数器，XY地址计数器实际上是作为DDRAM的地址指针，X地址计数器为DDRAM的页指针，Y地址计数器为DDRAM的Y地址指针。
X地址计数器是没有记数功能的，只能用指令设置。
Y地址计数器具有循环记数功能，各显示数据写入后，Y地址自动加1，Y地址指针从0到63。
e) 显示数据RAM(DDRAM)
DDRAM是存贮图形显示数据的。DDRAM与地址和显示位置的关系见图1。
f) Z地址计数器
Z地址计数器是一个6位计数器，此计数器具备循环记数功能，它是用于显示行扫描同步。当一行扫描完成，此地址计数器自动加1，指向下一行扫描数据，RST复位后Z地址计数器为0。
Z地址计数器可以用指令DISPLAY START LINE 预置。因此，显示屏幕的起始行就由此指令控制，即DDRAM的数据从哪一行开始显示在屏幕的第一行。此模块的DDRAM共64行，屏幕可以循环滚动显示64行。
2）12864液晶显示器的外部引脚
12864液晶显示模块共有20个引脚，包括8位双向数据线、6条控制线及电源线等。具体引脚功能见下表所示。
管脚号 管脚名称 电平 管脚功能描述
1 VSS 0V 电源地
2 VDD 50V 电源电压
3 V0 - 液晶显示器驱动电压
4 D/I H/L D/I=“H”,表示DB7~DB0为显示数据
D/I=“L”,表示DB7~DB0为显示指令数据
5 R/W H/L R/W=“H”,E=“H”,数据被读到DB7~DB0
R/W=“L”,E=“H→L”, DB7~DB0的数据被写到IR或DR
6 E H/L 使能信号：R/W=“L”,E信号下降沿锁存DB7~DB0
R/W=“H”,E=“H” DRAM数据读到DB7~DB0(使能端，高电平有效)
7 DB0 H/L 数据线
8 DB1 H/L 数据线
9 DB2 H/L 数据线
10 DB3 H/L 数据线
管脚号 管脚名称 电平 管脚功能描述
11 DB4 H/L 数据线
12 DB5 H/L 数据线
13 DB6 H/L 数据线
14 DB7 H/L 数据线
15 CS1 H/L 左半屏片选信号，低电平有效
16 CS2 H/L 右半屏片选信号，低电平有效
17 RESET H/L 复位信号,低电平复位
18 VEE -10V LCD驱动负电压
19 IED+ DC+5V 背光板电源
20 IED- DC0V 背光板电源
3．12864液晶显示器的编程指令
1) 显示开关控制(DISPLAY ON/OFF)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 0 0 0 0 1 1 1 1 1 1
设置屏幕显示开/关。D/I=1，开显示。D=0，关显示。不影响DDRAM中的内容。
2) 设置显示起始行(DISPLAY START LINE)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 0 0 1 1 A5 A4 A3 A2 A1 A0
前面在介绍Z地址计数器时已经描述了显示起始行是由Z地址计数器控制的。A5~A0 6位地址自动送入Z地址计数器，起始行的地址可以是0~63的任意一行。
例如：选择A5~A0是62,则起始行与DDRAM行的对应关系如下：
DDRAM 行：62 63 0 1 2 3 •••••••••••••••••28 29
屏幕显示行： 1 2 3 4 5 6••••••••••••••••• 31 32
3) 设置页地址（SET PAGE “X ADDRESS”)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 0 0 1 0 1 1 1 A2 A1 A0
所谓页地址就是DDRAM的行地址，8行为一页,模块共64行即8页,A2~A0表示0~7页。读写数据对地址没有影响,页地址由本指令或RST信号改变复位后页地址为0。
4) 设置Y地址(SET Y ADDRESS)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 0 0 0 1 A5 A4 A3 A2 A1 A0
此指令的作用是将A5~A0送入Y地址计数器，作为DDRAM的Y地址指针。在对DDRAM进行读写 *** 作后，Y地址指针自动加1,指向下一个DDRAM单元。
5) 读状态(STATUS READ)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 1 0 BUSY 0 ON/OFF RET 0 0 0 0
当R/W=1 D/I=0时,在E信号为“H”的作用下，状态分别输出到数据总线(DB7~DB0)的相应位。
BF：BF＝1，内部正在进行 *** 作，BF＝0，空闲状态。
ON/OFF：ON/OFF＝1，表示显示打开，ON/OFF＝0，表示显示关闭。
RST: RST=1表示内部正在初始化，此时组件不接受任何指令和数据。
6) 写显示数据(WRITE DISPLAY DATE)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 0 1 D7 D6 D5 D4 D3 D2 D1 D0
D7~D0为显示数据，此指令把D7~D0写入相应的DDRAM单元,Y地址指针自动加1。
7) 读显示数据(READ DISPLAY DATE)
代码 R/W D/I DB7 DB6 DB5 DB4 DB3 DB2 DB1 DB0
形式 1 1 D7 D6 D5 D4 D3 D2 D1 D0
此指令把DDRAM的内容D7~D0读到数据总线DB7~DB0，Y地址指针自动加1。
五、12864点阵型液晶显示器的接口电路设计
通过前面对12864显示屏引脚功能的分析可以知道，该模块有一个整体的片选信号“E”，只有当该信号为高电平时，所有的电路才会有效。另外左右半屏各有一个选择信号CS1和CS2，CS1和CS2各自为低电平时，分别选中左半屏和右半屏。为了区分读写的是数据还是指令，还设置了一个数据/指令控制线D/I。根据这些原则，设计出接口电路如图3所示。
图3 液晶显示器的接口电路
由于CS0的地址范围为280H－283H，由接口电路的设计可得液晶屏的相关地址，如下表。
*** 作 A1A0 端口地址
向左半屏写指令 00 280H
向右半屏写指令 10 282H
读/写左半屏数据 01 281H
读/写右半屏数据 11 283H
读状态寄存器 00 280H
五、软件设计
对12864的具体结构有了比较深入的了解，12864分左右两屏，像素点为12864个像素点，行有128个像素点，列有64个像素点，行又设置为8页，在12864默认状态下中文字体都是1616的大小，每个页包含8个像素行，所以要显示一个中文就需要2页；初始行的设定可以使得你要显示的字出现在任意你想要的位置。对液晶显示器的编程就是向DDRAM中写数据。在写DDRAM之前，需要先清除RAM，且左屏和右屏要分别进行清除。方法就是向RAM的所有单元写入0值。12864写驱动程序的时候需要写七个指令分别是：“检忙”，“写指令”，“写数据”，“写显示开关”，“写页”，“写列”，“写初始行”。
向LCD写显示数据的流程图如下： 液晶显示器的编程流程如下图：
六．LCD的应用
广告字幕机是用LCD输出不同的汉字和图形。要液晶显示器显示不同的图形或汉字，就是向DDRAM中写入不同的数据。根据前面所说的液晶显示屏与DDRAM的对应关系，可以构造不同的数据来显示不同的图形和汉字。

SCLK--IOB15
STD--IOB14
CS--IOB13
PSB--接地 选择串行工作方式
VSS--GND(0V)
VDD--逻辑电源(+5V)
IOB是对应的引脚

---