怎么把文件放到网站的根目录,专业网站建设公司用织梦吗,如果网站设计时,资源库网站建设前端:运用htmlcssjs模仿百度热搜电影榜鼠标移入特效 1. 实现原理2. 界面布局3. js实现对鼠标移入和移出的监听4. 参考代码如下#xff1a; 1. 实现原理
百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入… 前端:运用htmlcssjs模仿百度热搜电影榜鼠标移入特效 1. 实现原理2. 界面布局3. js实现对鼠标移入和移出的监听4. 参考代码如下 1. 实现原理
百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入时元素布局有一些不同而已)。至于鼠标移入时出现延迟效果则是在css上设置transition(用于设置过渡效果的)实现的。我的实现效果如下(只把那个特效实现其他元素布局没有搞)
2. 界面布局
使用ul标签和li标签把li标签高度设置为30px同时设置li标签属性overflow:hidden;(超出部分隐藏) 为li标签设置相对定位。为li标签设置一个class属性这个class属性的p标签(用于设置标题)和img标签(图片)设置绝对定位。当鼠标移入到这个li标签上时改变这个li标签的class属性即可。
html代码如下 css样式代码如下
3. js实现对鼠标移入和移出的监听
主要涉及mouseover和mouseout这两个事件它们分别表示为鼠标移入和移出这个元素时执行的操作。我们要做的操作就是当鼠标移入li标签时把其他li标签元素class属性设置为空把当前li标签元素class属性设置上述说到的那个。而鼠标移出ul标签时(恢复到默认效果即第一个li标签class属性值为上述说到的那个。)把其他li标签元素class属性设置为空把第一个li标签class属性值设置上述那个属性值即可。参考代码如下 使用jquery这样代码量可以得到明显的降低。
4. 参考代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title特效/titlestyle typetext/css*{margin: 0;padding: 0;}ul{margin: 20px auto;list-style: none;width: 160px;}ul li{height: 30px;position: relative;overflow: hidden;cursor: pointer;transition: all 0.5s;}ul li p{width: 100%;line-height: 30px;text-align: center;}ul .cur_li{height: 107px;}ul .cur_li img{width: 80px;height: 107px;position: absolute;top: 0;left: 0;}ul .cur_li p{width: 80px;position: absolute;top: 10px;left: 80px;}/stylescript srchttps://pss.bdstatic.com/static/superman/js/lib/jquery-1-edb203c114.10.2.js/script
/head
bodyulli classcur_lip八角笼中/pimg srchttps://fyb-2.cdn.bcebos.com/hotboard_image/fe8e114ab0561124539454972d4a2cbc?x-bce-processimage/resize,m_fill,w_160,h_214 alt/lilip封神第一部/pimg srchttps://fyb-2.cdn.bcebos.com/hotboard_image/427d971c382982519908c4d9d1aa0f83?x-bce-processimage/resize,m_fill,w_160,h_214alt/lilip消失的她/pimg srchttps://fyb-2.cdn.bcebos.com/hotboard_image/b7459789f21ff9fd635a55c996c81b65?x-bce-processimage/resize,m_fill,w_160,h_214alt/li/ul
/body
script typetext/javascriptvar fun function(){$(ul li).each((i,e){$(e).attr(class,);});}$(ul li).each((i,e){$(e).mouseover(() {fun();$(e).attr(class,cur_li);});});$(ul).mouseout((){fun();$(document.querySelector(ul li)).attr(class,cur_li);});
/script
/html
