优购物官方网站下载,wordpress不同分类不同模板 插件,wordpress 媒体 路径,网站制作要学多久onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。
主要是利用top与left进行上下移动和左右移动
【使用获取的角度正值还是负值#xff0c;判断是向上还是上下滚动】 $(element).on(mousewheel, function(event){var de event.originalEvent.deltaY; //需要…onmousewheelscript当鼠标滚轮正在被滚动时运行的脚本。
主要是利用top与left进行上下移动和左右移动
【使用获取的角度正值还是负值判断是向上还是上下滚动】 $(element).on(mousewheel, function(event){var de event.originalEvent.deltaY; //需要取反
})
案例城市介绍【照片与城市介绍一样的写法就不写了】 先用HTML和css做出样式 .box中横向分布left和right盒子 .left盒子中纵向分布多个li .right盒子中纵向分布top和bottom盒子 填入城市名城市介绍城市图片
1. 根据选择的城市切换介绍
先隐藏p标签和img标签分别只留一个元素【区分class】
获取所有的li【li数组】获取所有的p标签【p数组】获取所有的img标签【img数组】。
点击li获取该li的行号index循环p和img隐藏所有的元素【切换class】
利用行号将对应的元素切换展示
var ps$(.right p);$(.left).on(click,li,function(){inx$(this).index();for(var i0;ips.length;i){ps[i].classNamepa;}ps[inx].classNamepara;})图片也是一样的
2. 为城市名添加滚动样式【主要】
添加滚动不难但是它会超出已有范围先获取这个可滚动的范围【父盒子 - 子盒子】 在不超过这个范围内更改.left的top属性
top为正绿色盒子向下走
top为负绿色盒子向上走
var pdiv$(.box).height();
var cdiv$(.box.left).height();
var highpdiv-cdiv; // -100
top的更改是随着上次的距离一点一点增加或缩短的-或
用现在的top和最大top值和最小top值进行比较
获取当前top的大小$(element).css(top)【获取的是字符串类型】
将字符串转为数字使用正则表达式获取px前的数字【返回数组】在转换为Number类型进行比较
当角度0,向下走 绿色盒子的top值0就会让绿色盒子向下走直到0这时会使绿色盒子的顶部远离红色盒子顶部所以不在向下走。
当角度0,向上走 绿色盒子的top隐藏值时继续向上奏直到隐藏值 这时会使绿色盒子的底部远离红色盒子底部所以不在向上走。
【de没有取反所以if下内容写反】
reg/\d|-\d/
$(.left).on(mousewheel, function(event){var de event.originalEvent.deltaY;tp$(this).css(top);var tpnNumber(tp.match(reg)[0]);if(de 0){if(tpn 0){$(this).css(top,10px);}else{$(this).css(top,0px);}}else{if(tpn high){// 距离顶部的距离 子盒子隐藏的距离$(this).css(top,-10px);}else{$(this).css(top,highpx);}}
}) 总代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script srcjquery-3.6.0.min.js/scripttitleDocument/titlestyle*{padding: 0;margin: 0;list-style: none;}.box{position: relative;width: 400px;height: 200px;border: 1px solid black;margin: 0 auto;overflow: hidden;}.left{position: relative;top: 0px;width: 60px;}.leftli{height: 30px;line-height: 30px;border-top: 1px solid;border-top: 1px solid;border-color: green;}.right{width: 338px;border-left: 1px solid;position: relative;}.right.top{background-color: antiquewhite;height: 70px;}.right.bottom{width: 100%;height: 128px;position: relative;overflow: hidden;}.boxdiv{text-align: center;float: left;}p{position: relative;top: 0px;font-size: 15px;text-indent: 2em;text-align: left;}.pa{display: none;}/style
/head
bodyscript$(function(){var pdiv$(.box).height();var cdiv$(.box.left).height();var highpdiv-cdiv; // -100reg/\d|-\d/$(.left).on(mousewheel, function(event){var de event.originalEvent.deltaY;tp$(this).css(top);var tpnNumber(tp.match(reg)[0]);if(de 0){//为负时远离顶部top增加if(tpn 0){$(this).css(top,10px);}else{$(this).css(top,0px);}}else{if(tpn high){// 距离顶部的距离 子盒子隐藏的距离时可以继续向下$(this).css(top,-10px);}else{$(this).css(top,highpx);}}});var ps$(.right p);$(.left).on(click,li,function(){inx$(this).index();for(var i0;ips.length;i){ps[i].classNamepa;}ps[inx].classNamepara;})})/scriptdiv classboxdiv classleftli铜川市/li li宝鸡市/li li西安市/li li榆林市/li li汉中市/li li延安市/lili安康市/li li商洛市/li li渭南市/li li南阳市/li li郑州市/li li洛阳市/li li开封市/li li信阳市/li /divdiv classrightdiv classtop!-- img src02_09.png alt --/divdiv classbottomp classpara铜川市别称同官陕西省辖地级市地处西北地区东部、陕西中部、关中盆地和陕北高原的接交地带,属温带季风气候。全市总面积3882平方千米。截至2022年10月铜川市辖3区1县。截至2022末铜川市常住人口70.5万人。/pp classpa宝鸡市古称陈仓、雍城、西虢、西岐、西府等陕西省辖地级市是关中平原城市群副中心城市、关天经济区副中心城市全市常住人口326.47万人。/pp classpa西安市古称长安、镐京陕西省辖地级市是陕西省省会、副省级市、特大城市、国家中心城市、西安都市圈以及关中平原城市群核心城市国务院批复确定的中国西部地区重要的中心城市国家重要的科研、教育和工业基地。截至2022年末全市下辖11个区、2个县总面积10108平方千米常住人口为1299.59万人城镇人口1034.34万人城镇化率79.59%。/pp classpa榆林市陕西省辖地级市古称上郡别称驼城、小北京、塞上明珠等位于陕西省最北部陕北地区和河套地区黄土高原和毛乌素沙地交界处是黄土高原与内蒙古高原的过渡区系陕、甘、宁、蒙、晋五省区交界地温带大陆性季风气候总面积42920.2平方千米。截至2023年4月榆林市下辖2个市辖区、9个县代管1个县级市。市人民政府驻榆阳区。2022年末榆林市常住人口361.61万人。/pp classpa汉中市简称“汉”陕西省辖地级市位于陕西省西南部北与宝鸡市、西安市毗连东与安康市接壤南与四川省的广元市、巴中市、达州市相连西与甘肃省陇南市相邻区域面积27246平方千米地处内陆东亚季风气候区内气候温和湿润年平均气温约14.5℃。截至2022年10月汉中市辖2个区、9个县另有5个经济功能区。汉中市人民政府驻地汉台区。2022年末汉中市户籍总人口378.98万人。/pp classpa延安市/pp classpa安康市/pp classpa商洛市/pp classpa渭南市/pp classpa南阳市/pp classpa郑州市/pp classpa洛阳市/pp classpa开封市/pp classpa信阳市/p/div/div/div
/body
/html
