首页 > 代码库 > Java SSH 项目总结——JS实现图片悬浮
Java SSH 项目总结——JS实现图片悬浮
前言
先说下要实现什么功能,页面上有图片,当鼠标移动到图片上时,图片呈放大悬浮的效果.试验了几种方法,比如用鼠标事件控制div中图片的显示和隐藏,还有其它方法,最后采用了开源的JS来实现图片的悬浮效果。
效果
先看下效果图,当鼠标移动到图片上时,图片就会放大悬浮到页面中间,鼠标移走时,图片就会从悬浮的页面中间消失,页面上原有的样式也不会有任何改变。
实现
看完效果图,我们来看下实现过程:
<span style="font-family:KaiTi_GB2312;">//引用js和css文件 <head> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/default.include.b2676e.css" media="all" />>
这只是实现图片悬浮的一个demo,在demo中同样的图片其实是两张,一张是大图、一张是小图,其实一张图片也可以实现,只要我们设置图片的大小即可,如果我们项目中需要使用的话,只需要加载相应的图片即可。
关于js的代码的书写,这里只是设置了悬浮效果显示的位置和图片大小,而悬浮效果的具体实现是在相应的js中。
小结
我们想实现某一个功能时,方法一定会有很多种。我们要学会站在巨人的肩膀上,没有必要说我们自己也一定要去封装这么一套js来实现各种各样的功能,站在巨人的肩膀上,更加方便和快捷的来实现我们的功能。
Java SSH 项目总结——JS实现图片悬浮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。