博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery--仿制360右下角弹出窗口
阅读量:4982 次
发布时间:2019-06-12

本文共 771 字,大约阅读时间需要 2 分钟。

原文:

先发浏览器效果图,给大家看。

要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置

CSS代码很灵活,我写的只是简单的一种而已,仅供参考:

第二步,要考虑写Jquery动画,其实我首先想到的是将.bottomshow这个DIV给出style=“display:none”,然后在Jquery(.bottomshow).show('slow')但是这种方式无法改变动画出来的方向,于是我放弃了。随后选着了animate()先将bottom默认设置为-320px刚好是图片的高度,所以图片就在浏览器的下部的外面,这时候通过animate({bottom:‘0px’},‘slow’)就做到了从下往上弹出360效果,Jquery代码如下,

第三步就要考虑广告是可以关闭的,点击图片右上角的X就可以关闭,这时候就要用到 img  map click了。具体用法请参考代码理解:

img map:

Sun

加入href主要是让鼠标放上去变手型,map加上style=“cursor:pointer“是不起作用的。

之后在写close():

function bottomclose(){                     $(".bottomshow").animate({bottom:"-320px"},'slow');    }

最后如果图片广告需要跳转链接,只需要Jquery选择到此图片加入onclick链接即可。

代码尚不成熟,欢迎吐槽。

posted on
2014-05-28 11:15 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/lonelyxmas/p/3756682.html

你可能感兴趣的文章
Linux 如何实现 VLAN - 每天5分钟玩转 OpenStack(12)
查看>>
Gym - 101252H
查看>>
2019年2月15日,复习
查看>>
线性布局Row和Column
查看>>
关键路径(代码讲解)- 数据结构和算法68
查看>>
if语句三种格式
查看>>
CentOS 7 单用户模式修改root密码
查看>>
Linux DHCP原理
查看>>
Thread.currentThread()和this的区别——《Java多线程编程核心技术》
查看>>
mysql 5.1 Data 文件夹路径
查看>>
delegate的参数也可泛型【简单源码示例】
查看>>
Mycat SqlServer 技术栈 实现 主从分离
查看>>
为何要学编程?如何学编程?用什么语言最好?有什么好书?
查看>>
剑指Offer的学习笔记(C#篇)-- 反转链表
查看>>
Android精品资源整理2018年3月21日 星期三
查看>>
查询当前库中包含某个字段并且包含自增的表
查看>>
SSH整合报错:No result defined for action and result input
查看>>
1963-带妹子去看电影
查看>>
数据结构和算法之栈排序
查看>>
HBASE的预分区设计
查看>>