网络干货 ·

[教程]实现多款鼠标在线预览


月宅发现某昴想做一个在线预览鼠标指针的一个功能,然后月宅大概思考了10秒钟后给出了一种极为简单快捷的方法来实现,那就是用<iframe>标签实现实时效果。

效果图

网页用作鼠标的格式不单单是“cur”格式,还有其他的jpg、png图片格式均可以实现。只要是web可显示的。


具体实现

本教程粗略的实现效果,美化及其布局自行用CSS解决。

首先需要新建一个“index.html”文件,录入以下代码(自己手打...因为我的代码框架出问题了,直接显示出来效果了)

不要吐槽太多了,这就是个毛坯代码,用了不到1分钟撸出来的。。(找了半天的/div,原来打到最下面了,无视他)

接着你需要1.html 2.html 写入以下代码(1.2.3.4.5.html的鼠标地址都不一样,自行替换)

然后你就可以看见首图的效果啦,是不是巨简单。不要吐槽那么多...具体的布局与CSS样式表,靠自己咯。(并不推荐把全部CSS写在html中,新建一个css用link引用比较好)


 

参与评论

  • 狂放

    大佬用div不就好了吗,css大法好

    8月前 (10-20)
    回复
    回复狂放
  • 无人小站

    过来个给你看个锤子

    1年前 (2017-06-21)
    回复
    回复无人小站
  • 月宅

    过来给你看个大棒

    1年前 (2017-06-21)
    回复
    回复月宅
  • jrotty

    明明写两个div,分别定义不同的鼠标样式就可以了

    1年前 (2017-06-20)
    回复
    回复jrotty
  • 狂放

    就是就是 月宅大佬明明想多了

    8月前 (10-20)
    回复
    回复狂放
  • 月宅

    哈哈,当时没想到2333 这是个好办法

    1年前 (2017-06-20)
    回复
    回复月宅
  • 狂放

    搜索引擎可不喜欢iframe哦,可以试一试用js嵌入iframe23333

    1年前 (2017-06-17)
    回复
    回复狂放
  • 情醉中国风

    这个我就不折腾了(⁄ ⁄•⁄ω⁄•⁄ ⁄)

    1年前 (2017-06-16)
    回复
  • 某昴

    :黄色滑稽脸: 很实用ww

    1年前 (2017-06-16)
    回复
    回复某昴