`
happysoul
  • 浏览: 403491 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

弹出可拖动DIV,CSS圆角

阅读更多
拖动效果不是很好,明显有拖拉现象,不过暂时没有找到好的方法解决。。。

重点放在CSS的圆角,不过只有3个像素高,暂时没有弄出来更高的显示效果,多了太难看
一直在研究遮挡层的代码简化,不过最后也就到了现在这种程度
入门级的练习代码



<!--用t这个div控制整个遮挡层是否可见-->
<div id="t" style="display:none;">
<!--单独的半透明遮挡层,通过iframe遮挡页面中的select元素-->
<div style="z-index:98;" class="al" id="back_div">
  <iframe frameborder="0" scrolling="no" width="100%" height="100%" class="al2"></iframe>
</div>
<!--我们希望看到的弹出内容,同样是绝对定位方式,层级在遮挡层上方-->
<DIV style="width:500px; position:absolute;top:25%; left:30%; z-index:999;" id="t_div">
<U class="f1"></U><U class="f2"></U><U class="f3"></U>
<div class="d_top" onMouseDown="moveEvent(event,'t_div')">
<span>测试弹出div</span>
<!--这里可以换成div,因为FF下面a的href如果用#,而且没有对应锚点会导致页面的刷新-->
<a href="javascript:" onClick="cl('t')">×</a>
</div>
<DIV class="d_body" >
测试CSS圆角
</DIV>
<div class="d_foot"></div>
<U class="f3"></U><U class="f2"></U><U class="f1"></U>
</DIV>
</div>

  • 大小: 22.5 KB
0
0
分享到:
评论

相关推荐

    DIV+CSS漂亮的样式

    总的来说,"漂亮样式CSS"这个资源包中的`DIV+CSS`样式实例为我们展示了如何利用这些技术创造出吸引人的交互体验和视觉效果。学习并掌握这些技巧,不仅可以提升网页设计的美观度,还能提高用户体验,使网站在竞争激烈...

    div做各式弹出窗口案例

    本案例集主要探讨如何利用"div"配合CSS(层叠样式表)和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要,如消息提示、登录框、模态对话框等。 首先,我们来看"iframe的div遮罩层(可...

    div弹出层,带拖动

    在网页设计中,"div弹出层,带拖动"是一个常见的交互功能,它涉及到HTML、CSS和JavaScript的综合运用。下面将详细讲解这个知识点。 首先,`div`是HTML中的一个块级元素,用于组织页面结构。在创建弹出层时,我们...

    JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例

    在现代Web开发中,实现可拖拽的圆角特效弹出层是用户界面设计中常见的需求,它不仅可以提高用户交互体验,还可以在视觉上给用户留下深刻印象。从给定文件中提取到的知识点涵盖了用JavaScript和CSS实现具有圆角和可...

    div CSS+JS特效大集合(网络收集)

    4. **背景与边框**:background-image、background-size、border-radius等属性可创建丰富多彩的背景和圆角效果。 5. **阴影与透明度**:box-shadow和opacity属性能为div添加立体感和透明效果,提升视觉层次。 然后...

    一款好看的DIV+CSS滚动条

    标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条,它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现,允许用户浏览隐藏的部分。在默认情况下,浏览器会...

    模仿windows窗口DIV+CSS

    总结来说,"模仿windows窗口DIV+CSS"是一个结合了HTML、CSS和JavaScript技术的综合应用,通过细致的样式设计和交互实现,能够在浏览器中创造出与Windows系统窗口相似的用户体验。这不仅是一种技术挑战,也是提升前端...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一...

    div弹出模式窗体,消息框样式。

    在创建弹出模式窗体时,`&lt;div&gt;`通常被用作一个容器,包含所有消息框的元素,如标题、内容、按钮等,并通过CSS控制其显示和隐藏。 2. **模态对话框**: 模态对话框是一种阻止用户与页面其余部分交互,直到他们与...

    带滑动条的DIV CSS JS登录框代码.rar

    在网页设计中,创建一个带有滑动条的DIV CSS JS登录框是提升用户体验的重要方法。这个"带滑动条的DIV CSS JS登录框代码.rar"压缩包提供了实现这一功能的具体代码资源,主要涉及JavaScript(JS)特效和CSS样式设计。...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    jquery dialog css3弹出对话框插件实例

    这个“jquery dialog css3弹出对话框插件实例”提供了使用jQuery UI库和CSS3技术实现对话框的实践案例。 jQuery Dialog是jQuery UI库的一部分,该库提供了大量的用户界面组件,如滑块、日期选择器和拖放功能。...

    纯js实现可拖拽和点击的悬浮球

    接下来,我们需要编写CSS来定义悬浮球的样式,例如圆角、颜色和位置: ```css .ball { width: 50px; height: 50px; border-radius: 50%; background-color: #33ccff; position: absolute; /* 使元素可定位 */ ...

    webQQ效果,可拖拽div以及自动翻页

    为了实现拖拽div的功能,开发者通常会监听鼠标的`mousedown`、`mousemove`和`mouseup`事件,计算鼠标与div的相对位置,然后在`mousemove`事件中更新div的位置。例如,可以使用以下代码片段: ```javascript var ...

    jquery实现右下角弹出多个信息框

    为了使用户体验更好,还可以考虑添加一些额外的功能,比如设置信息框的自动消失时间、支持拖动、可配置的动画效果等。这需要进一步扩展jQuery代码,并可能涉及到更复杂的CSS和JavaScript技术。 总结起来,通过...

    js弹出对话框 源代码

    综上所述,创建一个带有圆角和关闭按钮的JS弹出对话框涉及HTML结构设计、CSS样式编写以及JavaScript事件处理。通过结合这些技术,我们可以实现高度定制化的对话框,以满足不同场景下的需求。对于更复杂的对话框功能...

    css3如何实现滑块

    在CSS3中,实现滑块通常涉及到创建一个可拖动的元素,该元素可以在特定的轨道上移动,以此来调整某个值或者展示不同的内容。这个功能广泛应用于各种界面设计,如音量控制、进度条、选择器等。下面将详细介绍如何使用...

    div滚动条优化

    在网页设计中,div元素是常用的布局容器,而滚动条则是当内容...通过CSS和JavaScript,我们可以创建出既美观又实用的滚动条,同时要注意跨浏览器兼容性和性能优化,确保在不影响功能的前提下,提供最佳的用户交互体验。

    Jquery 弹出对话框 与QQ校友相似

    在本话题中,我们将深入探讨如何使用jQuery实现与QQ校友相似的弹出对话框功能。 首先,理解“弹出对话框”在网页交互中的作用至关重要。对话框通常用于提供一种中断用户流程的方式,展示额外信息、询问用户或执行...

Global site tag (gtag.js) - Google Analytics