您现在的位置是:首页 > 正文

《中软笔记》仿京东图片浏览

2024-02-01 01:05:43阅读 2

本片文章的内容为仿京东商品图片浏览时放大的效果

如图所示:
Alt
效果分析:
当鼠标移上左边时候该图片就会被放大,并且在右边显示;移动的时候还可以查看该物品的其他部位;鼠标移除就会被隐藏起来,不占物理空间。

解决思路:
1.写样式
不管啥情况先写出来看看再去搞功能
右边一个div,放入图片设置图片宽高,左边一个设置为右边div图片的 两倍大;
Alt
2.写事件
分析可知有三种事件(通过触发小盒子的事件,来修改大盒子样式)

  1. onmouseover:移入显示
  2. onmouseout:移出隐藏
  3. onmousemove:获取实时鼠标坐标,修改大盒子的背景图片位置

3.具体内容

  1. 在css文件中写了一个hiDe的类。并且给大盒子加上。

    .hiDe {
    	display: none;
    }
    
  2. 给小盒子添加事件给大盒子加上hiDe

    //小盒子
    <div id="cunfangimg" onmouseover="Onr()" onmouseout="Ont()" onmousemove="One(event)">
    		<--放入的图片(图片原图大小为800*800)-->
    		<img src="img/JDimg.jpg" width="200px" height="200px"/>
    </div>
    
    //大盒子
    <div class="hiDe" id="imgBackground"></div>
    

    3 当触发onmouseover时去掉大盒子的hiDe类

     //获取大盒子的对象
    var o = document.getElementById("imgBackground");
    
     //onmouseover事件
    function Onr(){
    	o.classList.remove("hiDe");// 去掉hiDe类
    }
    
        //onmouseout事件
        function Ont(){
       	o.classList.add("hiDe");// 加上hiDe类
       }
       //onmousemove事件
        function One(event){
       		var x = event.clientX;   //获取横坐标
       		var y = event.clientY;   //获取纵坐标
       		 //获取背景图片对应坐标
       		x = (x-100)/200*(800-400);      
       		y = (y-100)/200*(800-400);
       		//修改大盒子的背景坐标,以显示该部位的图片
       	o.style.backgroundPositionX = '-'+x+'px';
       	o.style.backgroundPositionY = '-'+y+'px';
       }
    

    最后的效果图:
    在这里插入图片描述

    学习总结:
    .当做一个页面特效无从下手时,可以一层一层的来"剥它"。
    1.首先将页面样式写好
    2.然后分析它需要写写什么事件,以及触发事件后需要修改的样式。
    3.逐条将想好的事件和要修改的样式记录在纸上。
    4.理清事件的先后,再逐个的绑定上去。不要急着一下写完。不熟练的时候就需要绑一个就去看一下,看能否触发或者有没有语法错误,虽然很浪费时间,但是感觉有必要。以免最后漏洞百出,不知道从哪改起。
    5.不知道问度娘,一次只解决一共问题,别前面没懂又找下一个。

网站文章

  • pycharm编写pyspark设置

    pycharm编写pyspark设置

    1、安装好pycharm后,打开pycharm创建项目2、创建项目,指定python位置(可用python虚拟环境)2.1、配置pycharm环境然后:apply==>ok2.2 、添加spark安装包下面的python文件夹中的两个pyspark的zip包3、配置流程4、提交代码到spark上运行...

    2024-02-01 01:05:36
  • Makefile经典教程

    支持原创,请移步陈浩大神博客:http://blog.csdn.net/haoel/article/details/2886这篇文章是对多篇博客的修改和整合,有意见可以私信我,谢谢!Make程序的命令行选项和参数Make命令参数的典型序列如下所示:make [-f makefile文件名][选项][宏定义][目标]这里用[]括起来的表示是可选

    2024-02-01 01:05:28
  • QQ网站登录的RSA加密传输缺陷分析

       QQ网站登录处没有使用https进行加密,而是采用了RSA非对称加密来保护传输过程中的密码以及敏感信息的安全性。 QQ是在javascript中实现整个过程的。这个想法非常新颖,但是也是存在严重缺陷的。如果被黑客利用,则可能被捕获明文密码。分析报告如下:Author: axisDate: 2007-11-23Team: http://www.ph4nt0m.org  (http://ps

    2024-02-01 01:04:59
  • 复旦大学计算机专业自考,2020年复旦大学自考专业一览表

    复旦大学计算机专业自考,2020年复旦大学自考专业一览表

    复旦大学(Fudan University)复旦大学是一所世界知名、国内顶尖的综合性研究型大学,2017年,学校入选“双一流”建设高校名单,确立了27个“双一流”建设学科,在QS世界大学排名中列全球第...

    2024-02-01 01:04:53
  • android自动打开键盘,Android弹出式对话框AlertDialog中的EditText自动打开软键盘

    private void confirmPhoneGurdPswd(final String guardPswd) {// 1.创建弹出式对话框final AlertDialog.Builder al...

    2024-02-01 01:04:46
  • 令考研人讨厌的10大行为排行榜!第一句话就忍不了...

    令考研人讨厌的10大行为排行榜!第一句话就忍不了...

    No.1老问他能考上吗?我每天早晨六点起床七点开始学习晚上十点离开自习室回宿舍每天被梦想叫醒晚上与知识共枕这些你都无法理解我能不能考上不需要向你汇报,好吗!No.2对他说“尽力就好”明明考试还没开始明...

    2024-02-01 01:04:17
  • Linux操作系统

    Linux操作系统

    第11讲SElinux管理(SELinux的上下文,端口号,布尔值)1 Linux系统的安全机制分为四层(1)Filesystem:chmod, chown, setfacl 基于文件系统的保障用户...

    2024-02-01 01:04:11
  • Linux部署lamp(centos 7),照做就行

    Linux部署lamp(centos 7),照做就行

    大家好,今天我们来分享一下Linux上部署lamplamp指的是Linux+Apache+MySQL数据库+php几者相结合的web框架结构虽然我在这之前,就写过有关于这方面的博客,但是那个不详细今天...

    2024-02-01 01:03:54
  • Spring声明式事务管理的两种方式(XML和Annotation)

    Spring声明式事务管理

    2024-02-01 01:03:25
  • selenium学习

    selenium学习

    selenium学习

    2024-02-01 01:03:19