jQuery全屏广告图片拖拽预览特效.zip资源-CSDN文库

共14个文件

png：9个

js：2个

css：1个

版权申诉

jQuery特效

CSS特效

网页特效

34 浏览量 2023-10-08 20:49:07 上传评论收藏 3.52MB ZIP 举报

【jQuery全屏广告图片拖拽预览特效】是一种在网页设计中常见的互动功能，它允许用户通过拖动鼠标来预览全屏广告图片的不同部分。这个特效基于JavaScript库jQuery实现，jQuery是一个轻量级、高性能的JavaScript框架，极大地简化了DOM操作、事件处理和动画效果。同时，该特效还涉及到CSS样式和网页布局技术，使得广告图片能够适应全屏展示，并且具有良好的用户体验。在实现这个特效时，首先需要在HTML中设置一个全屏的容器元素，通常是一个`div`，用来承载广告图片。这个容器需要设置相应的CSS属性，如`width`、`height`、`position`等，以确保它能完全覆盖浏览器视口。此外，广告图片作为背景图应用到这个容器上，可以使用CSS的`background-image`和`background-size`属性来控制。接着，引入jQuery库，通过`$(document).ready()`函数确保在页面加载完成后执行相关的JavaScript代码。在这个函数内部，可以监听鼠标的`mousedown`、`mousemove`和`mouseup`事件，以实现拖拽的效果。当鼠标按下时记录初始位置，移动时更新容器的位置，松开鼠标时停止更新，这样就能实现图片随鼠标移动而移动的预览效果。在CSS特效方面，可能需要利用CSS3的`transition`属性来平滑过渡容器的位置变化，增加视觉效果。同时，为了提高在不同设备和浏览器上的兼容性，需要考虑响应式设计，确保在移动设备上也能正常工作。此外，如果需要进行二次修改，可以对JavaScript代码进行优化，例如添加防止图片超出屏幕边界的功能，或者调整拖拽灵敏度。对于CSS，可以更改背景颜色、边框样式、阴影效果等，以匹配网站的整体风格。总结来说，"jQuery全屏广告图片拖拽预览特效"是一个结合了jQuery库、CSS样式和网页布局技术的交互功能，它提供了用户友好的广告浏览体验。通过理解和修改提供的代码，开发者可以根据自己的需求定制个性化的全屏广告展示。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery全屏广告图片拖拽预览特效.zip （14个子文件）

jiaoben8296

jquery.min.js 86KB

script.js 11KB

img

nike.png 620KB

arrowDown.png 1KB

cagencylogo.png 11KB

clogotemp.png 3KB

arrowbblakc.png 1KB

clogotemp2.png 5KB

fud.png 588KB

rpo.jpg 803KB

orangetyhing.png 1.49MB

slogowhite.png 11KB

css

style.css 15KB

index.html 8KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery全屏广告图片拖拽预览特效 - 站长素材</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class='cursor'> <div class='cursor_point'></div> <div class='cursor_outer'></div> </div> <div class='portfolio'> <div class='portfolio_home'> <div style='position: fixed; z-index: -99; width: 2320px; height: 180%; left: 0;top: -38%;'> <iframe frameborder="0" height="100%" width="100%" src="http://s3.bytecdn.cn/aweme/resource/web/static/image/index/new-tvc_889b57b.mp4"></iframe>  </div> <div class='portfolio_home__header'> <div class='hamburger trigger'> <div class='hamburger_part'></div> <div class='hamburger_part'></div> <div class='hamburger_part'></div> </div> </div> <div class='portfolio_home__title'> <div class='logo'> <img class='first' src='img/clogotemp.png'> <img class='second' src='img/clogotemp2.png'> <div class='page_portfolio'> <div class='portfolio_home__header'> <div class='logoMain'> <img src='img/cagencylogo.png'> </div> <div class='nav'> <ul> <li class='active trigger'>产品展示</li> <li class='trigger'>公司简介</li> <li class='trigger'>关于我们</li> <li class='trigger'>联系我们</li> </ul> </div> <div class='number black'>0161 345 3464</div> <div class='hamburger black trigger'> <div class='hamburger_part'></div> <div class='hamburger_part'></div> <div class='hamburger_part'></div> </div> </div> <div class='slider_note'> 左右拖拽预览 </div> <div class='portfolio_home__work'> <div class='portfolio_home__header work'> <div class='back'> <img class='trigger' src='img/arrowDown.png'> </div> <div class='logoMain'> <img src='img/slogowhite.png'> </div> <div class='nav'> <ul> <li class='active trigger'>Our work</li> <li class='trigger'>Our services</li> <li class='trigger'>About us</li> <li class='trigger'>Contact us</li> </ul> </div> <div class='number white'>0161 345 3464</div> <div class='hamburger white trigger'> <div class='hamburger_part'></div> <div class='hamburger_part'></div> <div class='hamburger_part'></div> </div> </div> <div class='slideClone'> <div class='title f'> .01 <br> My Protein </div> <div class='image'> <img draggable='false' src='img/fud.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL</div> <div class='title'>My protein rebrand and digital campaign</div> </div> </div> <div class='slideClone'> <div class='title f'> .02 <br> Nike Air Max </div> <div class='image'> <img draggable='false' src='img/nike.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL STRATEGY</div> <div class='title'>Nike Air max video campaign 2017</div> </div> </div> <div class='slideClone'> <div class='title f'> .03 <br> Apple Watch </div> <div class='image'> <img draggable='false' src='img/rpo.jpg'> <div class='overlay'></div> <div class='cats'>ADVERTISING DIGITAL STRATEGY</div> <div class='title'>The new Apple Watch digital campaign 2019</div> </div> </div> <div class='slideClone'> <div class='title f'> .04 <br> Jade Teriyaki </div> <div class='image'> <img draggable='false' src='img/orangetyhing.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL STRATEGY</div> <div class='title'>Another agency did this campaign, not us</div> </div> </div> <img class='scroll' src='img/arrowDown.png'> </div> <div class='portfolio_home__slider'> <div class='slider_inner'> <div class='slider_inner__slide'> <div class='title'> .01 <br> My Protein </div> <div class='image'> <img draggable='false' src='img/fud.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL</div> <div class='title'>My protein rebrand and digital campaign</div> <div class='button'> View case study <img src='img/arrowbblakc.png'> </div> </div> </div> <div class='slider_inner__slide'> <div class='title'> .02 <br> Nike Air Max </div> <div class='image'> <img draggable='false' src='img/nike.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL STRATEGY</div> <div class='title'>Nike Air max video campaign 2017</div> <div class='button'> View case study <img src='img/arrowbblakc.png'> </div> </div> </div> <div class='slider_inner__slide'> <div class='title'> .03 <br> Apple Watch </div> <div class='image'> <img draggable='false' src='img/rpo.jpg'> <div class='overlay'></div> <div class='cats'>ADVERTISING DIGITAL STRATEGY</div> <div class='title'>The new Apple Watch digital campaign 2019</div> <div class='button'> View case study <img src='img/arrowbblakc.png'> </div> </div> </div> <div class='slider_inner__slide'> <div class='title'> .04 <br> Jade Teriyaki </div> <div class='image'> <img draggable='false' src='img/orangetyhing.png'> <div class='overlay'></div> <div class='cats'>ADVERTISING DESIGN DIGITAL STRATEGY</div> <div class='title'>Another agency did this campaign, not us</div> <div class='button'> View case study <img src='img/arrowbblakc.png'> </div> </div> </div> </div>

评论收藏

内容反馈

版权申诉