请教3个一样的JS效果,如何并在一起

oicq12 2018-01-11 02:54:52
<script type="text/javascript">
$(function(){
var slideHeight = 200; // px
var defHeight = $('#wrap').height();
if(defHeight >= slideHeight){
$('#wrap').css('height' , slideHeight + 'px');
$('#read-more').append('<a href="#">展开</a>');
$('#read-more a').click(function(){
var curHeight = $('#wrap').height();
if(curHeight == slideHeight){
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more a').html('收起');
$('#gradient').fadeOut();
}else{
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more a').html('展开');
$('#gradient').fadeIn();
}
return false;
});
}
});
</script>


<div id="wrap">
<div><p>内容部分,长内容可展开收缩</p></div>
<div id="gradient"></div>
</div>
<div id="read-more"></div>



我对JS完全不懂
在网上找了一段展开隐藏效果的代码,但是只能用一个地方,我有2-3个地方需要这种效果,应该怎么弄
比如,想增加,#wrap2 #wrap3,#read-more2,#read-more3
虽然复制3段一样的JS,稍作改下可以实现,但代码太多了。应该怎么写,可以实现多个地方调用同一段JS??
非常感谢,在知道发帖,多天求助无果,希望这里大神能帮我解决这个问题,再次感谢
...全文
384 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
化工厂很高 2018-01-11
  • 打赏
  • 举报
回复
给你要引的标签建立class别用Id,然后在用$获取,因为Id只可以出现一次,不可以重复,而class就可以重复。 eg: <input class="inp" type="text" value=" "/> //这是第一个需要做隐藏的地方 <input class="inp" type="text" value=" "/> //这是第二个需要做隐藏的地方 <input class="inp" type="text" value=" "/> //这是第三个需要做隐藏的地方 这样你就写一个js获取的时候用$(".inp")就可以获取了
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用。 它是一个纯javascript工具,不需要跟其它js一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下
Blumentals Easy Button & Menu Maker Pro 中文特别版版是一款专业的网页按钮和网页菜单制作工具,程序帮你快速创建复杂的按钮和动态菜单,程序内置了非常多而且非常精美的模板可以供选择,支持中文输入,所见即所得的操作方式,非常方便。 对于不会使用制图软件的通知,需要制作一些按钮可能比较麻烦,使用Blumentals Easy Button and Menu Maker Pro这个软件可以方便的做出3D立体效果的按钮。你可以从软件提供的模板中快速制作出gif,jpg格式按钮。里面自带的按钮模板比较多,一般按钮制作都够了。 可视化拖拽编辑器 直接的视觉菜单和按钮编辑器是轻松愉快的一起工作 完整的Web浏览器支持更新! 支持所有的现代和所有流行的,但旧的浏览器 CSS的唯一菜单更新! 如果JavaScript被关闭,菜单仍然在CSS-only模式的工作原理 创建移动就绪菜单 创建于平板电脑的正常工作和智能手机的新菜单! 快速,重量轻 Easy Button & Menu Maker 创建轻量级的菜单,加载瞬间产生有效的 HTML5 代码生产现代和有效的,但向后兼容的代码 图标和模板更新! Easy Button & Menu Maker 模板和图标 搜索引擎友好 菜单被视为与被搜索引擎 易于插入和更新 创建菜单轻松发布和更新 更好的价值 目前市场上最超值 无限网站,全套模板,没有到期,一切都包括在内。从刚才29.95美元价格,EASY按钮和菜单制作是最好的选择。 狂热的客户服务 如果有必要,我们将真正看到你的网站,并请教你。 更好的结果 最新视觉样式 我们已经包括了一组最新时尚的Windows7,Mac上,玻璃和地铁样式。 设计师认可的模板 我们的菜单模板是由专业的设计师和可用性专家的认可。色彩的对比,字体大小和间距都恰到好处! 惊人的视觉效果 我们的菜单制造商提供按更好的视觉淡出,淡入淡出和阴影效果选择,比任何竞争对手。 高质量 生成的菜单的代码是干净的,重量轻,符合标准的。 汉化更新:对软件中的一些语言进行更新修正。
微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088
“小红书”——给你安利几个小程序的“坑”微信小程序写在前面  小程序发布至今已有一年多时间,很多人都已经在小程序道路上狂奔。最近我也开始了学习小程序,学了一段时间后,想看看这段时间的学习效果,于是边学习边开始了我的第一个小程序。相信很多人都用过小红书吧,我可是被它安利了很多好东西呢,所以想着就仿写一个小红书的微信小程序吧。下面我就给大家“安利”几个我在写的过程中的“坑”。  因为花的时间不多,功能有很多没有完善,页面写的不是很好看,请各位将就着看啦。╮(╯▽╰)╭   准备工作  1. 开发环境:WXML(HTML),WXSS(CSS),Javascript  2. 开发工具:vscode,微信开发者工具  3. 辅助工具:Markman:图标标注工具,可用于取色、测量。Easy-Mock:可以伪造假数据,在js中引用就好了。点这里可以查看我的项目数据。Markdown:在线编辑器GifCam:Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库:各种需要的小图标都有哦遇到的几个问题1、首页导航栏左右滑动效果图:  这部分,是通过微信小程序的scroll-view组件来完成的。代码如下:效果图:  这部分,是通过微信小程序的swiper组件来完成的。代码如下:                                                                                                    {{notes.title}}                              <!-- 作者信息 -->                                              {{notes.writer}}                                                {{notes.like}}                                    使用swiper组件,将所有文章列表包起来,每个swiper-item表示不同的列表模块。之前在导航栏各列表项绑定了不同

50,503

社区成员

发帖
与我相关
我的任务
社区描述
Java相关技术讨论
javaspring bootspring cloud 技术论坛(原bbs)
社区管理员
  • Java相关社区
  • 小虚竹
  • 谙忆
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧